Mapbox предотвращает поведение привязки при перетаскивании

У меня есть функция в mapbox, которую можно перетаскивать. Но когда я перетаскиваю эту функцию, она привязывается к мыши (она прыгает). Я не хочу этого. Есть ли способ предотвратить это?

У меня такое поведение (возьмите точку на краю): https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

Что я хочу иметь: https://www.mapbox.com/mapbox-gl-js/example/drag-a-marker/

Разница в том, что первая функция, а вторая - html-маркер. Но я не хочу использовать html-маркер, потому что они негативно влияют на производительность.


javascript mapbox mapbox-gl-js
person Vincent Hoch-Drei    schedule 06.09.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Основная идея - вычислить дельту в пикселях между объектом и начальной точкой мыши и применить ее при установке новых координат:

var delta = {
  x: 0,
  y: 0
};
function onMove(e) {
  var coordsXY = {
    x: e.point.x + delta.dx,
    y: e.point.y + delta.dy
  };
  var coords = map.unproject(coordsXY);
  ...
}

map.on('mousedown', 'point', function(e) {
  // Prevent the default map drag behavior.
  e.preventDefault();

  var featureXY = map.project(e.features[0].geometry.coordinates.slice());
  var mouseXY = e.point;
  delta = {
    dx: featureXY.x - mouseXY.x,
    dy: featureXY.y - mouseXY.y
  };
  ...
}

[https://jsfiddle.net/gfs8b59c/]

person stdob--    schedule 06.09.2018
comment
Хорошо, я уже думал об этом, но я надеялся, что есть решение, включенное в mapbox. Спасибо. - person Vincent Hoch-Drei; 07.09.2018
comment
@ VincentHoch-Drei К сожалению, mapbox gl js не имеет для этого встроенного API. - person stdob--; 07.09.2018