首页 > 其他分享 >JS实现判断点是否在多边形范围内

JS实现判断点是否在多边形范围内

时间:2023-10-11 20:33:05浏览次数:38  
标签:p2 p3 判断 多边形 polygon p4 JS p1

JS实现判断点是否在多边形范围内

 

一、说明

在GIS领域,判断点是否在多边形范围内是一个基础方法,这里主要说下实现原理。

原理比较简单,就是有一个GIS理论,一个点向一个方向发送射线,射线与多边形各个边相交的交点如果是奇数说明点在多边形范围内。

 

(图片引用自:https://blog.csdn.net/qq_27161673/article/details/52973866)

 

二、实现代码

所以实现代码就很清晰了,随便一个点向右侧创建射线,为啥是右侧呢,因为横线可以保持y不变,这种情况最简单更好理解。实现代码如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48     //判断点是否在多边形范围内     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;         }     } }

使用示例

1 2 3 4 var point={x:10,y:10}; var polygon=[{x:0,y:0},{x:100,y:0},{x:100,y:100},{x:0,y:100},{x:0,y:0}];       var pts=queryPtInPolygon(points,polygon); //pts即为和多边形交叉的点集合,判断为奇数说明在多边形范围内

  

测试用例下载地址:https://download.csdn.net/download/jiangfei200809/9213835

  分类: GIS

标签:p2,p3,判断,多边形,polygon,p4,JS,p1
From: https://www.cnblogs.com/sexintercourse/p/17758120.html

相关文章

  • 10.11树的最大深度和判断对称树
    publicclasstrees<T>{privateTdata;publictrees<T>left;publictrees<T>right;publictrees(Tdata){this.data=data;this.left=null;this.right=null;}publictrees(Tdata,trees<T&g......
  • linux 服务器 多网口判断网卡名字和实际网卡口顺序 对应关系
    #!/bin/bashmac_addresses=($(dmesg|grep"eth"|grep"PCIe"|awk-F'''{print$8}'))count=0formacin"${mac_addresses[@]}";do((count++))interface=$(ifconfig|grep-B4"$mac"|gr......
  • 2023.10.10 js.Array和js.String
    1定义数组21.vararr=newArray{1,2,3,4...};32.vararr=[1,2,3,4];4访问5arr[索引]=值67同一数组的类型可变,长度可变。89Array中的属性和方法10arr.length//获取数组长度11forEach()遍历数组中的每个有值的元素,并调用一次传入的函数12arr......
  • 2023.10.11 js.JSON和js.BOM
    1定义2var变量名='{"key1":value1,"key2":value2}'3varuser='{"字符串":"tom","整型"=20,"数组":["北京","上海","深圳"],"对象":{},"布尔值"......
  • js 多文件下载打包zip 重名问题
    这里用jszip实现多文件下载并打包zip,但是这里有个问题,项目是可以上传重名文件,也就是下载也必须全部下载。jszipblob以文件名称(filename)下载的话,同名多个文件是会被忽略掉的,也就是只下载一个,而我们的需求是全部下载,问题也是困扰了很久。如果名称可以重复,那么可以试试用地址(file......
  • mysql 删除数组 json 字段中的某个指定值
    例:SELECTcar_imgFROMlogistics_car_infoWHEREcar_id=2--结果为:["1","2","3","4"]SELECTJSON_SEARCH(car_img,'one','4')FROMlogistics_car_infoWHEREcar_id=2--结果为:"$[3]"SELE......
  • .net 关于在program中使用AddNewtonsoftJson之后,继承于System.Text.Json.Serializatio
    首先,先说遇见的问题与代码示例,在.net代码中注册了如下代码.AddNewtonsoftJson(option=>{//使用本地时区option.SerializerSettings.DateTimeZoneHandling=DateTimeZoneHandling.Local;......
  • ERROR in node_modules/rxjs/dist/types/internal/operators/combineLatest.d.ts(3,61
    原文链接:https://www.longkui.site/error/error-in-node_modules-rxjs/4839/angular项目,启动的时候报错。详细的报错如下:这个报错的原因比较简单,rxjs的版本不对,我用的是angular7可能和rxjs版本不匹配。解法方法也很简单,主要是降版本,我们找到项目的package.json把rxjs版本改成......
  • 浏览器可直接访问 Dubbo、gRPC 后端微服务,Dubbo-js 首个alpha 版本来了!
    作者:蔡建怿基于Dubbo3定义的Triple协议,你可以轻松编写浏览器、gRPC兼容的RPC服务,并让这些服务同时运行在HTTP/1和HTTP/2上。DubboTypeScriptSDK[1]支持使用IDL或编程语言特有的方式定义服务,并提供一套轻量的APl来发布或调用这些服务。Dubbo-js已于9月份......
  • nodejs xxl-job-executor 客户端试用
    代码fork自awesomeoxc/xxl-job-executor-nodejs,进行了一些以来包的升级,同时发布npm包到npm仓库中,方便使用npm包名称npm包我已经发布npm仓库中了,可以直接使用@dalongrong/xxl-job-executor参考使用安装npminstall@dalongrong/xxl-job-executor--saveor......