Блог

У нас есть требование, в котором мы должны предоставить возможность перетаскивания для маркеров / точек. Пример https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point идеально подходит для 1 маркера. Потому что это жестко запрограммировано в geojson.объекты[0].геометрия.координаты = [координаты.lng, координаты.широта];

Однако, в сценарии с несколькими точками, как установить geojson для соответствующего объекта, который был перетащен?

Пожалуйста, сообщите, если потребуются какие-либо дополнительные сведения.

Спасибо

Вы можете добиться этого, сохранив текущий маркер и применив к нему изменение во время 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 событии на точечном слое сохраните текущий идентификатор объекта

Здесь 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