高德地图-电子围栏-多边形增删改

仰望半月

已于 2024-12-19 13:27:35 修改

阅读量3.6k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：高德地图文章标签： javascript html css

于 2023-05-26 10:37:55 首次发布

本文链接：https://blog.csdn.net/qq_40295331/article/details/130881286

高德地图专栏收录该内容

3 篇文章

订阅专栏

该文章提供了一个实现高德地图上多边形电子围栏的完整代码，包括多边形的初始渲染、编辑功能（添加、删除、选中编辑）、以及多边形label的居中显示。用户可以直接复制代码并替换自己的APIkey进行使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

史上最完整的实现高德地图多边形电子围栏：

主要功能：多边形的初始渲染，点击编辑进入编辑状态，方可进行添加、右击删除、双击选中编辑，以及每个多边形的label名称居中展示

来先看效果图，嘻嘻~~~

--------------------------------------------------

好了，直接上代码，直接复制即可用

注意：只要替换成自己的key值就好

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
  <title>高德地图-电子围栏-多边形增删改</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <!-- 高德地图 -->
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.PolygonEditor"></script>
</head>
<body>
  <div id="container"></div>
  <div class="input-card" style="width: 120px;bottom: 150px">
    <button class="btn" onclick="editPolygon()" >编辑图形</button>
  </div>
  <div class="input-card" style="width: 120px">
    <button class="btn" onclick="addPolygon()" style="margin-bottom: 5px">添加图形</button>
    <button class="btn" onclick="submitData(1)" style="margin-bottom: 5px">取消</button>
    <button class="btn" onclick="submitData(2)" style="margin-bottom: 5px">保存</button>
  </div>
  <script type="text/javascript">
    var map  = null;
    var polyEditor = null; //多边形编辑器
    var pathArr = []; //获取后台模拟数据
    var polygonArr = []; //地图上所有的多边形
    var labelArr = [] //地图上所有多边形所对应的名称
    var isEdit = false; //是否处于可编辑状态

    initMap(); //初始化地图
    //初始化地图
    function initMap() {
      map = new AMap.Map("container", {
        center: [116.400274, 39.905812],
        zoom: 14
      });
      getInitMapData() //获取初始地图多边形数据
    }
    //获取初始地图多边形数据
    function getInitMapData() {
      var path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]]
      var path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]]
      pathArr = [
        {
          path: path1,
          mapId: 1,
        }, 
        {
          path: path2,
          mapId: 2,
        }, 
      ]
      showInitPolygon(); //初始展示所有多边形
    }
    //初始展示所有多边形
    function showInitPolygon() {
      var dealPolygonArr = []
      var dealLabelArr = []
      pathArr && pathArr.forEach((el, index) => {
        var polygon = new AMap.Polygon({
          path: el.path,
          fillColor: "#FF8D8D",
          fillOpacity: 0.3,
          strokeWeight: 3,
          strokeColor: "#FF8D8D",
          strokeOpacity: 1,
          zIndex: 1,
          extData: {
            mapId: el.mapId,
          }
        })
        var label = showText(polygon); //每个多边形添加label
        //
        dealPolygonArr.push(polygon)
        polygonArr = dealPolygonArr
        //
        dealLabelArr.push(label)
        labelArr = dealLabelArr
      })
      map.add(polygonArr);
      // 缩放地图到合适的视野级别
      map.setFitView(polygonArr)
    }
    //每个多边形添加label
    function showText(polygon) {
      var point = getCenterPoint(polygon.getPath());  //获得中心点
      var label = new AMap.Text({
        text: 'labelname',
        anchor: 'center', // 设置文本标记锚点
        style: {
          'background-color': 'transparent',
          'border-width': 0,
          'text-align': 'center',
          'font-size': '14px',
          'color': '#444444',
        },
        // offset: new AMap.Pixel(0, 0),
        position: point
      });
      label.setMap(map);
      return label;
    }
    // 获得图形的中心点
    function getCenterPoint(path) {
      var x = 0.0;
      var y = 0.0;
      for (var i = 0; i < path.length; i++) {
        x = x + parseFloat(path[i].lng);
        y = y + parseFloat(path[i].lat);
      }
      x = x / path.length;
      y = y / path.length;
      return new AMap.LngLat(x, y);
    }
    //添加多边形
    function addPolygon() {
      drawPolygon();
    }
    //绘制多边形
    function drawPolygon() {
      polyEditor.close();
      polyEditor.setTarget();
      polyEditor.open();
    }
    //开启多边形编辑
    function editPolygon() {
      initEditor(); //初始化地图编辑器
      isEdit = true;
      // polyEditor.open();
    }
    //初始化地图编辑器
    function initEditor() {
      polyEditor = new AMap.PolygonEditor(map)
      polyEditor.addAdsorbPolygons(polygonArr);
      polyEditor._opt.createOptions = { // 创建区域的样式
        fillColor: "#FF8D8D",
        fillOpacity: 0.3,
        strokeWeight: 3,
        strokeColor: "#FF8D8D",
        strokeOpacity: 1,
      };
      polyEditor._opt.editOptions = {// 编辑区域的样式
        fillColor: "#FF8D8D",
        fillOpacity: 0.3,
        strokeWeight: 3,
        strokeColor: "#FF8D8D",
        strokeOpacity: 1,
      };
      // polyEditor.midControlPoint = { // 点位样式
      //   fillColor: "#FF8D8D",
      //   fillOpacity: 1,
      //   strokeWeight: 2,
      //   strokeColor: "#FF8D8D",
      //   bubble: false,
      //   clickable: true,
      //   cursor: "pointer",
      // };
      // polyEditor.controlPoint = {// 点位样式
      //   fillOpacity: 1,
      //   strokeWeight: 2,
      //   strokeColor: "#FF8D8D",
      //   bubble: false,
      //   clickable: true,
      //   cursor: "pointer",
      // };

      polygonArr && polygonArr.forEach((polygon, index) => {
        //多边形添加双击事件
        polygon.on('dblclick', () => {
          if (polyEditor) {
            polyEditor.setTarget(polygon);
            polyEditor.open();
          }
        })
        //绑定右击事件——弹出右键菜单
        polygon.on('rightclick', function (e) {
          clearOne(e.lnglat, polygon, labelArr[index]); //创建右键菜单menu 删（删除多边形）
        });
        // //鼠标高亮效果
        // polygon.on('mouseover', function (e) {
        //   polygon.setOptions({
        //     fillColor: '#1791fc',
        //   })
        // });
        // polygon.on('mouseout', function (e) {
        //   polygon.setOptions({
        //     fillColor: '#FF8D8D',
        //   })
        // });
      })


      //多边形添加
      polyEditor.on('add', function (data) {
        console.log('add');
        var polygon = data.target;
        //
        polyEditor.addAdsorbPolygons(polygon);
        polygonArr.push(polygon);
        //
        var label = showText(polygon); //每个多边形添加label
        labelArr.push(label)
        // 双击图层进行编辑
        polygon.on('dblclick', () => {
          if (polyEditor) {
            polyEditor.setTarget(polygon);
            polyEditor.open();
          }
        })
        //绑定右击事件——弹出右键菜单
        polygon.on('rightclick', function (e) {
          clearOne(e.lnglat, polygon, label); //创建右键菜单menu 删（删除多边形）
        });
        // setTimeout(() => {
        //   addPolygon(); //添加多边形
        // }, 400)
      })

    }
    //创建右键菜单 删（删除多边形）
    function clearOne(lnglat, onePolygon, oneLabel) {
      var rightMenu = new AMap.ContextMenu();
      rightMenu.addItem('删除', function (e) {
        // if (that.isEdit) {
        removePolygon(onePolygon, oneLabel);
        rightMenu.close()
        // } else {
        //   that.$messageBlock('error', '当前未在编辑状态');
        // }
      }, 0);
      rightMenu.open(map, lnglat);
    }
    //删除某个多边形
    function removePolygon(onePolygon, oneLabel) {
      polyEditor.close(); //关闭编辑器
      map.remove(onePolygon);
      map.remove(oneLabel);
      // 获取覆盖物
      var overlays = map.getAllOverlays('polygon');
      polygonArr = overlays
    }
    //保存绘制数据
    function submitData(flag) {
      if (flag == 1) { //取消
        polyEditor.close();
        polyEditor = null;
        isEdit = false;
        map.clearMap(); // 清除地图上所有添加的覆盖物
        getInitMapData() //获取初始地图多边形数据
      } else if (flag == 2) { //保存
        console.log(polygonArr)
      }
    }
  </script>
</body>

</html>

2024.12.19补充：

编辑器的所有监听事件：

// 初始化编辑器
const polyEditor = new AMap.PolygonEditor(map, polygon);

// 1. 开始编辑时触发
polyEditor.on('add', function(data) {
  console.log('开始绘制多边形');
});

// 2. 编辑过程中触发，即每次点击添加一个点时触发
polyEditor.on('addnode', function(data) {
  console.log('添加节点');
  console.log(data.target.getPath()); // 获取所有顶点坐标
});

// 3. 调整节点位置时触发
polyEditor.on('adjust', function(data) {
  console.log('调整节点位置');
  console.log(data.target.getPath());
});

// 4. 删除节点时触发
polyEditor.on('removenode', function(data) {
  console.log('删除节点');
  console.log(data.target.getPath());
});

// 5. 编辑完成时触发
polyEditor.on('end', function(data) {
  console.log('结束编辑');
  const path = data.target.getPath();
  console.log('最终围栏坐标:', path);
});

// 6. 右键单击事件，通常用于结束绘制
map.on('rightclick', function() {
  polyEditor.close();
});

最后，如果有用，点个赞啦~~~ 哈哈哈