一、说明

在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实现判断点是否在多边形范围内的更多相关文章

  1. java/c# 判断点是否在多边形区域内

    java/c# 判断点是否在多边形区域内 年06月29日 ⁄ 综合 ⁄ 共 1547字 ⁄ 字号 小 中 大 ⁄ 评论关闭 最近帮别人解决了一个问题,如何判断一个坐标点,是否在多边形区域内(二维). ...

  2. PHP判断点是否在多边形区域内外

    小谢博客原文地址https://xgs888.top/post/view?id=79 PHP判断点是否在多边形区域内外:根据数学知识的射线法, 射线与几何多边形相交的点的个数为奇数则是在几何内部: 偶 ...

  3. C# 判断点是否在矩形框内

    欢迎加群交流 QQ群 830426796 用 System.Drawing.Drawing2D.GraphicsPath 和 Region 类联合起来,然后用 Region.IsVisible(poi ...

  4. PHP 判断点是否在多边形内

    如何判断一个点是否在一个多边形内,何时会用到这个场景. 我们就模拟一个真是场景.我们公司是快递公司,在本地区域有6个分点.每个分点有3-5个工人负责附近的快递派遣发送,所以根据每个点的服务区域我们就能 ...

  5. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...

  6. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  7. js中判断对象具体类型

    大家可能知道js中判断对象类型可以用typeof来判断.看下面的情况 <script> alert(typeof 1);//number alert(typeof "2" ...

  8. JS代码判断IE6,IE7,IE8,IE9!

    JS代码判断IE6,IE7,IE8,IE9!2011年12月15日 星期四 14:01做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代 ...

  9. JS中判断鼠标按键的问题

    JS中判断鼠标按键的问题.IE左键是 window.event.button = 1右键是 window.event.button = 2中键是 window.event.button = 4没有按键 ...

随机推荐

  1. 集合不安全之 ArrayList及其三种解决方案【CopyOnWriteArrayList 、synchronizedList、Vector 】

    @ 目录 一.前言 二.为什么线程不安全 三.解决方案一CopyOnWriteArrayList (推荐,读多写少场景) 四.Collections.synchronizedList(加锁) 五.Ve ...

  2. 移动端字体图标不显示的Bug

    用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示svg图标:显示正常 以下来自额微信内置 ...

  3. PAT 乙级 1003. 我要通过!(20) (C语言描述)

    "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于PAT的"答案正确"大派送 -- 只要读入的字符串满足下列条件,系统就输出"答案正确&quo ...

  4. kafka学习笔记(二)kafka的基本使用

    概述 第一篇随笔从消息队列的定义和各种应用,以及kafka的分类定义和基本知识,第二篇就写一篇关于kafka的基本实际配置和使用的随笔,包括kafka的集群参数的配置,生产者使用机制,消费者使用机制. ...

  5. kali linux2020 虚拟机改root密码

    kali在2020版的更新中,好多小伙伴登不进root账号,这里来教大家怎样改root账户的密码 1.当我们打开虚拟机看到这个界面的时候,按e进入编辑模式 2.在编辑模式中,"quite s ...

  6. 《Java核心技术·卷Ⅰ:基础知识(原版10》学习笔记 第5章 继承

    <Java核心技术·卷Ⅰ:基础知识(原版10>学习笔记 第5章 继承 目录 <Java核心技术·卷Ⅰ:基础知识(原版10>学习笔记 第5章 继承 5.1 类.超类和子类 5.1 ...

  7. 2022GDUT寒训专题一I题

    题目 题面 给一个长度为 N的数组,一个长为 K的滑动窗体从最左端移至最右端,你只能看到窗口中的 K 个数,每次窗体向右移动一位,如下图: 窗口位置 最小值 最大值 [1 3 -1] -3 5 3 6 ...

  8. 给自己的网站装上SSL证书

    给网站装上SSL证书 前言 主要是因为自己的阿里云快过期了,自己的博客也重新用了一下Halo,重新安装SSL的时候有些地方忘了,所以在此留个记录! 关于SSL 阮一峰<图解图解SSL/TLS协议 ...

  9. python+fastdfs+nginx实现打包下载功能

    环境介绍:生产服务器开发人员需要给client下发数据,主要是图片及视频:图片服务器用fastdfs,下载由nginx 来提供: java 程序来调用此脚本,传递参数来决定打包文件内容: #!/usr ...

  10. VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂,适合新手

    1. 概述 相关定律告诉我们:这个世界上的任何事物之间都会存在一定联系,"城门失火,殃及池鱼"就是一个很好的例子.因此如果我们能够尽早发现这些看不见的联系,就能很好的解决更多遇见的 ...