高德地图鼠标工具绘制电子围栏

最新推荐文章于 2024-06-01 09:13:22 发布

林林加油

最新推荐文章于 2024-06-01 09:13:22 发布

阅读量1.2k

点赞数

分类专栏： vue-map 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35834157/article/details/103611412

版权

vue-map 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

高德地图鼠标工具绘制电子围栏

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <style>
      html,body,#container{
        height: 100%
      }
      .input-item{
        height: 2.2rem;
      }
      .btn{
        width: 6rem;
        margin: 0 1rem 0 2rem;
      }
      .input-text{
        width: 4rem;
        margin-right:1rem;
      }
    </style>
    <title>鼠标工具绘制电子围栏</title>
  </head>
  <body>
    <div id='container'></div>
    <!-- <div class='info'>操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div> -->
    <div class="input-card" style='width: 30rem;'>
        <div class="input-item">
            <input id="createfence" type="button" class="btn" value="创建电子围栏" />
            <input id="edit" type="button" class="btn" value="开始编辑" />
            <input id="stop" type="button" class="btn" value="结束编辑" />
        </div>
    </div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=*****&plugin=AMap.MouseTool,AMap.PolyEditor"></script>
    <script type="text/javascript">
    var map = new AMap.Map('container',{
        zoom:14
    });

    var mouseTool = new AMap.MouseTool(map); 
    //监听draw事件可获取画好的覆盖物
    var overlays = [];
    //用鼠标工具画多边形
    var path = [
        [116.362209, 39.887487],
        [116.422897, 39.878002],
        [116.372105, 39.90651],
        [116.428945, 39.89663]
    ];
    var PolygonOptions={
            strokeColor: "#FF33FF", 
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: '#1791fc',
            zIndex: 50,
        };
    var drawPolygon;
    var polyEditor;
    var editobj=createPolygon(path);
    var beginPoints;
    var isedit=false;

    
      //添加事件
      var listener=AMap.event.addListener( mouseTool,'draw',function(e){
          console.log(isedit);
          beginPoints=e.obj.getPath();
          console.log(e.obj.getPath());//获取路径/范围
          isedit=true;
          mouseTool.close(true)
          editobj=createPolygon(beginPoints);

      });

      // AMap.event.removeListener(listener);
    document.getElementById('createfence').onclick = function(){
      beginPoints = [];
      if(editobj){
        map.remove(editobj)
      }
      drawPolygon = mouseTool.polygon(PolygonOptions); 
        
    }  
    document.getElementById('edit').onclick = function(){
      isedit=true;
      // 引入多边形编辑器插件
      map.plugin(["AMap.PolyEditor"],function(){
         // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
         polyEditor = new AMap.PolyEditor(map, editobj); 
         // 开启编辑模式
         polyEditor.open(); 
         
         polyEditor.on('end', function(event) {
            beginPoints = event.target.getPath().map(point => [point.lng, point.lat]);
            console.log(beginPoints);
            //log.info('触发事件： end')
            // event.target 即为编辑后的折线对象
        })

      }); 
        
    }
    document.getElementById('stop').onclick = function(){
        isedit=false;
        // 关闭编辑模式
        if(polyEditor){

          polyEditor.close(true)//关闭，并清除覆盖物 
        }
    }

    
    function createPolygon(path){
        polygon = new AMap.Polygon({
            path: path,
            strokeColor: "#FF33FF", 
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: '#1791fc',
            zIndex: 50,
        })
        
        map.add(polygon)
        // 缩放地图到合适的视野级别
        map.setFitView([ polygon ])
        return polygon;
    }
    </script>
  </body>
</html>

林林加油

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
高德地图鼠标工具绘制电子围栏

高德地图鼠标工具绘制电子围栏<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewpor...
复制链接

扫一扫