Question

我们有一个要求，我们必须在其中提供用于标记/点的拖放功能。示例https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/非常适合1个标记。 因为它被硬编码为geojson.features [0] .geometry.coordinates = [coords.lng，coords.lat];

但是，在多点场景中，如何为拖动的各个要素设置geojson？

请告知是否需要更多详细信息。

感谢

Answer 1

您可以通过存储当前标记并在onMove期间对其应用更改来实现。

我已经为每个对象添加了一个属性，以定义id：


var geojson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [0, 0]
      },
      properties: {
       id: 1
      }
    },
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [0, 1]
      },
      properties: {
       id: 2
      }
    }
  ]
};

在点图层上的onmousedown事件上，存储当前要素ID

此处features[0]可用，因为事件是在点上触发的，因此第一个功能就是被点击的功能


map.on("mousedown", "point", function(e) {

    currentFeatureId = e.features[0].properties.id;
    // Prevent the default map drag behavior.
    e.preventDefault();
    canvas.style.cursor = "grab";

    map.on("mousemove", onMove);
    map.once("mouseup", onUp);
});

然后，在onMove方法中，您可以使用它移动正确的特征：

function onMove(e) {
    var coords = e.lngLat;

    // Set a UI indicator for dragging.
    canvas.style.cursor = "grabbing";

    // Update the Point feature in `geojson` coordinates
    // and call setData to the source layer `point` on it.
    var currentMarker = geojson.features.find(obj => {
        return obj.properties.id === currentFeatureId
    })
    currentMarker.geometry.coordinates = [coords.lng, coords.lat];
    map.getSource("point").setData(geojson);
}

在这里查看工作示例：https://codepen.io/tmacpolo/pen/moxmpZ

Mapbox GL JS：在多点地图中拖动1点

1 个答案: