高德地图多边形编辑过程中获取编辑点的索引问题

由于PolyEditor没有相关编辑多边形过程中获取编辑点的索引的api,所以用了以下思路:
编辑过程中获取鼠标的坐标的xy,根据高德地图提供的containerToLngLat转换成地图实际坐标,
多边形编辑过程中会触发多边形的change事件,在该事件中监听获取实时多边形的path
循环path,根据AMap.GeometryUtil.distance获取到鼠标地图坐标和多边形每个点坐标的距离,
从而获取到最小的一个距离,即当前编辑的点。
思路应该是对的吧,但是获取到的索引有时对有时是错的,如果快速移动,获取到的索引确实正确的,如下图所示:
高德地图多边形编辑过程中获取编辑点的索引问题

示例代码:https://codepen.io/anon/pen/W...
有没有熟悉高德地图的解答下,感激。

阅读 6.7k
2 个回答

换了一种思路解决了,既然是拖动多边形的某点点,其他的点的坐标肯定不变的,只有被拖动的点的坐标的变的,做下判断就知道是哪个点了。
Demo:https://codepen.io/anon/pen/b...
预览:
5cbed51ba54fa.gif

把你的minIndex变量定义在polygonchange事件作用域外部。

let minIndex = 0;
    polygon.on('change', function(ev) {
      let minPoint = path[0];
      //获取移动点的索引
      path.forEach((item, index) => {
        var distance = AMap.GeometryUtil.distance(item, mousePosition);
        var minSistance = AMap.GeometryUtil.distance(minPoint, mousePosition);
        if (distance < minSistance) {
          minPoint = item;
          minIndex = index;
        }
      })
      console.log('编辑点索引:',minIndex);
    })
    

polygon.on('change', function(ev) {
  let minPoint = path[0];
  let minIndex = 0;
  //获取移动点的索引
  path.forEach((item, index) => {
    var distance = AMap.GeometryUtil.distance(item, mousePosition);
    var minSistance = AMap.GeometryUtil.distance(minPoint, mousePosition);
    if (distance < minSistance) {
      minPoint = item;
      minIndex = index;
    }
  })
  console.log('编辑点索引:',minIndex);
})   

这两者是有区别的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进