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没有按键 ...
随机推荐
- Selenium_环境安装(1)
Selenium是一个用于Web应用程序自动化测试工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. Selenium基本上支持主流的浏览器,包括IE,Mozilla Firef ...
- git 生成忽略文件
一.在.git的同级目录下打开git bash 二.在命令行输入 三.在生成的文件中添加忽略提交的文件夹名称 来自为知笔记(Wiz)
- Java集合为什么设计为:实现类继承了抽象类,同时实现抽象类实现的接口
更好阅读体验:Java集合为什么设计为:实现类继承了抽象类,同时实现抽象类实现的接口 问题 Java集合源码为什么设计为:「实现类继承了抽象类,同时实现抽象类实现的接口?」 看着List 集合的UML ...
- Linux系统管理学习实训任务书
1.<Linux系统管理实训任务一之搭建实验基础环境> https://www.toutiao.com/i6763578305091207694/ 2.<Linux系统管理实训任务一 ...
- efcore使用ShardingCore实现分表分库下的多租户
efcore使用ShardingCore实现分表分库下的多租户 介绍 本期主角:ShardingCore 一款ef-core下高性能.轻量级针对分表分库读写分离的解决方案,具有零依赖.零学习成本.零业 ...
- MongoDB之几种情况下的索引选择策略
一.MongoDB如何选择索引 如果我们在Collection建了5个index,那么当我们查询的时候,MongoDB会根据查询语句的筛选条件.sort排序等来定位可以使用的index作为候选索引:然 ...
- UML 有关用例图知识及用例关系
原文链接:https://blog.csdn.net/mj_ww/article/details/53020080 1. 如何识别用例 任何用例都不能在缺少参与者的情况下独立存在.同样,任何参与者也必 ...
- 使用Cesium Stories在3D Tilesets中检查Features
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们创建了3D Tiles用以流式化.可视化和分析大量的三维内容 ...
- 基于World Wind的数据可视化插件
基于开源数据可视化类库(MSChart.VTK.D3)实现的组件样例,并基于World Wind实现调用上述组件的功能插件. GitHub下载地址:https://github.com/hujiuli ...
- Windows和Linux(Centos7)下安装Nginx
安装Nginx 这篇记录只不过做了一个简单总结,如果对这块没什么概念的话可以看一下知乎的这篇文章 https://zhuanlan.zhihu.com/p/83890573 window下安装 win ...