Mapbox GL JS: перетащите 1 точку во многих точках карты - PullRequest
Новая
       21

Mapbox GL JS: перетащите 1 точку во многих точках карты

0 голосов
/ 18 марта 2019

У нас есть требование, при котором мы должны предоставлять возможность перетаскивания маркеров / точек.Пример https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/ отлично работает для 1 маркера. Поскольку он жестко запрограммирован в geojson.features [0] .geometry.coordinates = [коордидля соответствующей функции, которая была перетащена?

Пожалуйста, дайте знать, если требуется дополнительная информация.

Thankx

1 Ответ

2 голосов
/ 18 марта 2019

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

...