使用高德地图API判定目标点是否在用户编辑的任意多边形中

最新推荐文章于 2024-05-23 09:58:55 发布

原创最新推荐文章于 2024-05-23 09:58:55 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #高德地图 #AMap.MouseTool

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用高德地图API判断指定点是否位于用户绘制的任意多边形区域内的方法。通过监听draw事件并使用contains方法实现点与多边形的位置关系判断。

在许多信息统计系统中，用户可能希望在地图中划定一块任意多边形区域，系统便会自动反馈该区域的相关目标信息。例如在学区信息系统中，用户在应用的地图上划定一块区域便能够知道这个区域中有多少小学以及小学的相关信息。
这里的核心问题在于如何判断所需计算的点是否在我编辑的任意多边形中，所以这里我使用到了高德地图API的工具类mouseTool。
这里我先写了个demo，它可以判定我设定的点marker1是否在我编辑的任意多边形中，实际应用中的点可能是从数据库中取回再处理的。
JS代码如下：

       //初始化地图对象，加载地图
       var map = new AMap.Map("container", {
         resizeEnable: true,
        });
        var marker1 = new AMap.Marker({
        map: map,
        position: […,…]//marker1的坐标位置，根据需要自己设定
      });
                    map.plugin(["AMap.MouseTool"], function() {
                    var mouseTool = new AMap.MouseTool(map);
                    //鼠标工具插件添加draw事件监听
                     AMap.event.addListener(mouseTool, "draw", function callback(e) {
            var eObject = e.obj;//obj覆盖物对象。
                var marker1InPolygon  = eObject.contains(marker1.getPosition());//是否包含marker1
        marker1.setLabel({
        content:marker1InPolygon?'内部':'外部',
        offset:new AMap.Pixel(20,0)
        });
      });
    mouseTool.polygon();
    map.setFitView();  
    map.on('dblclick',function(){
    mouseTool.close(true)//双击清除覆盖对象
    });
    });