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没有按键 ...
随机推荐
- go.mod file not found in current directory or any parent directory; see 'go help modules'
go的环境设置问题,执行 go env -w GO111MODULE=auto 我的环境:Windows 7, Go 1.17 D:\Apps\GOPATH\src\code.oldboyedu.co ...
- 关于 用 js 实现 快照功能
1.前言 前段时间有个需求,想要 打印一个小票凭证 ,实现这个功能,我首先想到了快照, 就是将数据内容排版好,然后截图或者用其他方式将内容 制作成图片 ,然后下载下来打印即可. 2.探讨 为何不直接以 ...
- Word2010制作倒福字
原文: https://www.toutiao.com/i6489772955797553677/ 选择"插入"选项卡,"插图"功能组,"形状&quo ...
- HTML相关知识入门
HTML 注意点 html是不区分大小写的 建议包括嵌套,不要交叉嵌套 文件后缀名可以是.html或.htm 格式 <!------类似于java中类的大括号--------> <h ...
- 端口状态 LISTENING、ESTABLISHED、TIME_WAIT及CLOSE_WAIT详解,以及三次握手四次挥手,滑动窗口(整理转发)
网上查了一下端口状态的资料,我下面总结了一下,自己学习学习: TCP状态转移要点 TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死 ...
- [C 语言基础] 如何调用不同文件中的函数
很多时候需要将实现不同功能的函数或者与某个模块有关的函数写在一个文件里.这样有两个好处: 1. 方便以后调用:以后需要用到这个模块,或者这类函数,直接将相关文件复制过去,再稍微修改一下就能应用于不同场 ...
- http 的get 与 post 的区别
1.原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本的 ...
- 浅析DOM 与 html ,xml。
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.是表示和处理一个HTML或XML文档的常用方法. DOM定义了 ...
- QT之事件机制
MyPushButton.h: #ifndef MYPUSHBUTTON_H #define MYPUSHBUTTON_H #include<QPushButton> #include&l ...
- iPhone12和iPhone12pro的区别有什么?
阅读全部 说法一 iPhone12和iPhone12pro的区别有:颜色.价格.运行内存.拍照.屏幕最高亮度.电池容量.材质.重量等,具体对比如下: 颜色:iPhone12五色可选,青春绚丽:iPho ...