如何在mapbox-gl-js中拖动多边形?

Question

我有一个地图与多个多边形。多边形需要在用户点击/拖动时移动/更新。我想要的功能与这个例子相同:https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

我想让多边形像鼠标下拉时的点一样可拖动，能够在地图上移动它，在整个事件中更新多边形节点的x/y坐标，但在整个拖动过程中保持geojson的大小不变。

Mapbox上的点教程工作得很好，但我不确定如何使它与多边形一起工作。

Answer 1

@Toni BCN你的版本是工作的，你只需要确保以正确的格式交出坐标(括号的数量令人困惑):

let north = coords.lat + 0.17;
let west = coords.lng - 0.32;
let south = coords.lat - 0.17;
let east = coords.lng + 0.32;
geojson.features[0].geometry.coordinates = [[
[west, north],
[west, south],
[east, south],
[east, north],
[west, north]
]];
map.getSource('pol').setData(geojson);

小提琴在这里:https://jsfiddle.net/d5ynupb3/

Answer 2

1. 使用draw.selectionchange捕获多边形选择/取消选择。记住在变量中选择的多边形(事件features属性，最有可能是features[0]，因为选择的特征在顶部);如果你想要确切的类型，多边形是GeoJSON.Feature<GeoJSON.Polygon>;
2. 使用draw.render-它特别对应于一个拖拽:检查-如果变量不是null -所需的多边形信息;您可能需要额外检查当前绘制模式(simple_select或direct_select)以排除错误触发。在这里做任何你需要的;
3. 使用draw.update:如果action是move，它是一个多边形'绘制结束'事件(显然你可以使用记住的变量，但你也有事件features属性在你的处置)。在这里做任何你需要的。