百度地图API:JavaScript开源库几何运算判断点是否在多边形内(电子围栏)

百度地图JavaScript开源库,是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库,帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。

判断点是否在多边形内,主要使用的GeoUtils类。它提供若干几何算法,用来帮助用户判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。 主入口类是GeoUtils。

引入JS封装库

html 复制代码
    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=3HGqGo***"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

构建HTML地图容器

html 复制代码
<div style="float:left;width:600px;height:500px;padding: 15px;" id="container"></div>

核心代码

javascript 复制代码
var map = new BMap.Map("container");
    var pt = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(pt, 16);
    map.enableScrollWheelZoom();//开启滚动缩放

    //电子围栏
    var pts = [];
    var pt1 = new BMap.Point(116.395, 39.910);
    var pt2 = new BMap.Point(116.394, 39.914);
    var pt3 = new BMap.Point(116.403, 39.920);
    var pt4 = new BMap.Point(116.402, 39.914);


    pts.push(pt1);
    pts.push(pt2);
    pts.push(pt3);
    pts.push(pt4);

    var opts = {
        fillColor: 'blue',
        fillOpacity: 0.3,
        strokeColor: 'blue',
        strokeStyle: "dashed",
        strokeWeight: 1,
        strokeOpacity: 0.5
    }
    var ply = new BMap.Polygon(pts, opts);
    map.addOverlay(ply);

    //地图监听事件
    map.addEventListener('click', function (e) {
        var x = e.point.lng;
        var y = e.point.lat;
        var newPoint = new BMap.Point(x, y);
        var mkr = new BMap.Marker(newPoint);
        map.addOverlay(mkr);

        //判断时间
        ptInPolygon(newPoint, ply);
    })

    var allOverlay = map.getOverlays();
    console.log(allOverlay[0]);

    //点在多边形内
    function ptInPolygon(pt, ply) {
        var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply);
        if (result == true) {
            $("#control").append("操作在电子围栏内<br>");
        } else {
            $("#control").append("超出电子围栏<br>");
        }
    }

封装函数及优化


@漏刻有时

相关推荐
你怎么知道我是队长5 分钟前
C语言---头文件
c语言·开发语言
期待のcode10 分钟前
Java虚拟机的运行模式
java·开发语言·jvm
hqwest17 分钟前
码上通QT实战25--报警页面01-报警布局设计
开发语言·qt·qwidget·ui设计·qt布局控件
a程序小傲21 分钟前
京东Java面试被问:动态规划的状态压缩和优化技巧
java·开发语言·mysql·算法·adb·postgresql·深度优先
HellowAmy33 分钟前
我的C++规范 - 玩一个小游戏
开发语言·c++·代码规范
Irene19911 小时前
Vue 官方推荐:kebab-case(短横线命名法)
javascript·vue.js
徐先生 @_@|||1 小时前
Palantir Foundry 五层架构模型详解
开发语言·python·深度学习·算法·机器学习·架构
tang777892 小时前
爬虫如何绕过绕过“5秒盾”Cloudflare:从浏览器指纹模拟到Rust求解之不完全指南
开发语言·爬虫·rust·cloudflare
Yuer20252 小时前
什么是 Rust 语境下的“量化算子”——一个工程对象的最小定义
开发语言·后端·rust·edca os·可控ai
2501_948195342 小时前
RN for OpenHarmony英雄联盟助手App实战:符文配置实现
javascript·react native·react.js