JS实现判断点是否在多边形范围内
一、说明
在GIS领域,判断点是否在多边形范围内是一个基础方法,这里主要说下实现原理。
原理比较简单,就是有一个GIS理论,一个点向一个方向发送射线,射线与多边形各个边相交的交点如果是奇数说明点在多边形范围内。

(图片引用自:https://blog.csdn.net/qq_27161673/article/details/52973866)
二、实现代码
所以实现代码就很清晰了,随便一个点向右侧创建射线,为啥是右侧呢,因为横线可以保持y不变,这种情况最简单更好理解。实现代码如下:
//判断点是否在多边形范围内
function queryPtInPolygon(point, polygon) {
var p1, p2, p3, p4; p1 = point;
p2 = { x: 1000000000000, y: point.y }; var count = 0;
//对每条边都和射线作对比
for (var i = 0; i < polygon.length - 1; i++) {
p3 = polygon[i]; p4 = polygon[i + 1];
if (checkCross(p1, p2, p3, p4) == true) {
count++;
}
}
p3 = polygon[polygon.length - 1]; p4 = polygon[0];
if (checkCross(p1, p2, p3, p4) == true) {
count++;
} return (count % 2 == 0) ? false : true; //判断两条线段是否相交
function checkCross(p1, p2, p3, p4) {
var v1 = { x: p1.x - p3.x, y: p1.y - p3.y },
v2 = { x: p2.x - p3.x, y: p2.y - p3.y }, v3 = { x: p4.x - p3.x, y: p4.y - p3.y },
v = crossMul(v1, v3) * crossMul(v2, v3); v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
v2 = { x: p4.x - p1.x, y: p4.y - p1.y }; v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
return (v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0) ? true : false; } //计算向量叉乘
function crossMul(v1, v2) {
return v1.x * v2.y - v1.y * v2.x;
}
}
}
测试用例下载地址:https://download.csdn.net/download/jiangfei200809/9213835
JS实现判断点是否在多边形范围内的更多相关文章
- java/c# 判断点是否在多边形区域内
java/c# 判断点是否在多边形区域内 年06月29日 ⁄ 综合 ⁄ 共 1547字 ⁄ 字号 小 中 大 ⁄ 评论关闭 最近帮别人解决了一个问题,如何判断一个坐标点,是否在多边形区域内(二维). ...
- PHP判断点是否在多边形区域内外
小谢博客原文地址https://xgs888.top/post/view?id=79 PHP判断点是否在多边形区域内外:根据数学知识的射线法, 射线与几何多边形相交的点的个数为奇数则是在几何内部: 偶 ...
- C# 判断点是否在矩形框内
欢迎加群交流 QQ群 830426796 用 System.Drawing.Drawing2D.GraphicsPath 和 Region 类联合起来,然后用 Region.IsVisible(poi ...
- PHP 判断点是否在多边形内
如何判断一个点是否在一个多边形内,何时会用到这个场景. 我们就模拟一个真是场景.我们公司是快递公司,在本地区域有6个分点.每个分点有3-5个工人负责附近的快递派遣发送,所以根据每个点的服务区域我们就能 ...
- 百度地图 判断marker是否在多边形内
昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js <script type="text/javascript&quo ...
- 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
- js中判断对象具体类型
大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...
- JS代码判断IE6,IE7,IE8,IE9!
JS代码判断IE6,IE7,IE8,IE9!2011年12月15日 星期四 14:01做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代 ...
- JS中判断鼠标按键的问题
JS中判断鼠标按键的问题.IE左键是 window.event.button = 1右键是 window.event.button = 2中键是 window.event.button = 4没有按键 ...
随机推荐
- 初识python: 小练习 之 笔记本电脑开机指定时间之后自动拍照并发送邮件
需求: 1.调用笔记本的摄像头,拍摄笔记本面前的照片:2.将照片发送给指定邮箱:3.发送邮件,提醒我们电脑已经开机,并附上笔记本拍摄的照片. 面向过程: #!/user/bin env python ...
- JMeter_jmeter-plugins插件的安装使用
一.安装JMter Plugins 1.官网下载 JMeter Plugins 的jar包 2. 将下载的jar包复制到 %JMETER_HOME%\lib\ext 目录下 3. 启动 JMeter ...
- Itellij Idea使用
图片如果损坏,点击链接查看 https://www.toutiao.com/i6491635946176381454/ 创建Maven项目 JDK环境 目前大多数IDE都没有集成JDK环境,IDEA也 ...
- 一键AI着色,黑白老照片画面瞬间鲜活
很多老照片或者电影受时代技术所限制,只能以黑白形式保存:经过编辑后的黑白视频和图片早已丢失彩色原图,这对于保存者来说都十分遗憾.如何能将单一乏味.陈旧斑驳的黑白照片变成鲜活亮丽的彩色照片,从照片中重新 ...
- python中join()方法介绍
描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法:str.join(sequence) 参数 sequence -- 要连接的元 ...
- Solon 开发,八、注入依赖与初始化
Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...
- leetcode 24. 两两交换链表中的节点 及 25. K 个一组翻转链表
24. 两两交换链表中的节点 问题描述 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2-> ...
- linux与shell介绍 - 进程与线程
linux linux与windows的区别 linux的文件结构 Linux基本命令 ls: 列出目录 cd: 切换目录 pwd: 显示当前目录 mkdir: 创建一个新的目录 rmdir: 删除一 ...
- ArrayList实现类
特点 数组结构实现,查询快,增删慢 运行效率高,线程不安全 可重复 常用方法 Modifier and Type Method and Description boolean add(E e) 将指定 ...
- cnpm安装教程
安装cnpm,输入以下命令: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v ,检测是否正常 ...