高德地图编辑多边形事件监听

  //监听坐标点的变化
      // polylineEditor.on("addnode", function (event) {
      //   console.log(event, event.target.getPath());
      //   let path = event.target.getPath();
      //   for (const item of path) {
      //     console.log(item.lng, item.lat);
      //   }
      // });
      //监听拖动变化
      // polylineEditor.on("adjust", function (event) {
      //   console.log(event, "1",event.target.getPath());
      // });
      //监听编辑多边形结束
          that.polygonEditor.on("end", function (event) {
        let getPath = event.target.getPath();
        console.log(getPath);
        saveRail = getPath;
      });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您提到的问题是关于在 Vue 中绘制多边形并进行编辑的问题,对吗?那么,您可以使用高德地图 JavaScript API 中提供的绘制工具类来实现这一功能。具体步骤如下: 1. 引入高德地图 JavaScript API 和绘制工具类库: ```javascript <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> ``` 2. 在 Vue 组件中创建地图容器,生成地图实例,并加载绘制工具类库: ```javascript <template> <div id="mapContainer"></div> </template> <script> export default { name: 'Map', mounted() { this.initMap(); }, methods: { initMap() { const map = new AMap.Map('mapContainer', { zoom: 10, center: [116.397428, 39.90923], }); AMap.plugin(['AMap.MouseTool'], () => { // 初始化鼠标绘制工具 const mouseTool = new AMap.MouseTool(map); // 监听draw事件,获取绘制的图形对象 AMap.event.addListener(mouseTool, 'draw', (e) => { console.log(e.obj); // e.obj为绘制出来的图形对象 // TODO: 将图形对象保存到state中,用于后续编辑 }); }); }, }, }; </script> ``` 3. 在绘制完成后,将绘制的图形对象保存到 state 中,以便进行后续编辑: ```javascript // 将绘制的图形对象保存到state中 // state.polygons为一个数组,保存所有已绘制的多边形对象 state.polygons.push(e.obj); ``` 4. 对已绘制的多边形对象进行编辑: ```javascript // 对已绘制的多边形对象进行编辑 const drawPolygon = (polygon) => { // 使用多边形编辑插件 const polygonEditor = new AMap.PolyEditor(map, polygon); // 开启编辑模式 polygonEditor.open(); // 监听编辑完成事件,保存编辑后的多边形对象到state中 AMap.event.addListener(polygonEditor, 'end', (e) => { console.log(e.target); // e.target为当前编辑多边形对象 // TODO: 保存编辑后的多边形对象到state中 }); }; ``` 希望这个回答能够帮助您解决问题。如果您还有其他问题,可以继续向我提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值