листовка и интерактив: перетаскивание, координатная проекция

Question

У меня проблема с листовкой (https://leafletjs.com/) и interactivejs (http://interactjs.io/),), и я не нашел ответа на мою проблему.

Моя настройка : У меня есть карта с буклетом (компонент vue2leaflet: https://korigan.github.io/Vue2Leaflet/#/) и таблица, которая работает как список, с интерактивно перетаскиваемыми объектами. Карта листовки определяется как интерактивная выпадающая зона.

Моя цель : Перетащите элементы списка на карту, отбросьте их и нарисуйте прямоугольники (или, из-за простоты, простые маркеры) в опущенной точке.

Что сейчас работает : Листовка отображает мое изображение, элементы списка можно перетаскивать на карту, и слушатели событий запускаются правильно. Что также работает, так это рисование на карте (листовки с интегрированным прямоугольником).

Проблема : Прямоугольник, который рисуется на карте, сдвинут. Так что он не помещается на позицию, куда я уронил свой интерактив перетаскиваемым.

Моя оценка :

//My leaflet container coordinates
let mapContainer = {
    x: document.getElementsByClassName('vue2leaflet-map')[0].offsetTop,
    y: document.getElementsByClassName('vue2leaflet-map')[0].offsetLeft
};

//My drop-coordinates, and widht / height of the box
let pointCoords = {
    x: point.offsetTop,
    y: point.offsetLeft,
    width: point.offsetWidth,
    height: point.offsetHeight
};

//Compute the relative pixels (dropped box, relative to the container)
let relCoords = {
    x: (pointCoords.x - mapContainer.x),
    y: (pointCoords.y - mapContainer.y),
    x_end: (pointCoords.x - mapContainer.x) + pointCoords.width,
    y_end: (pointCoords.y - mapContainer.y) + pointCoords.height
};

//Convert into leaflet lat-lng coordinates
let latlngCoords = {
    start: this.$refs.floorplan.mapObject.containerPointToLatLng(new L.point(relCoords.x,relCoords.y)),
    end: this.$refs.floorplan.mapObject.containerPointToLatLng(new L.point(relCoords.x_end,relCoords.y_end))
};

//Convert lat-lng to bounds
let bounds = new L.latLngBounds(latlngCoords.start,latlngCoords.end);

//Add the bounds to an array, which simply builds up a box out of these bounds
this.markers.push(bounds);

Мой текущий результат : Прямоугольник рисуется буклетом, но смещается в нижний левый угол.

Я больше не знаю, где искать помощь, листовки не помогают мне с project / unproject / containerToLatLng и т. Д., Поэтому мне нужна ваша помощь.

EDIT

Я наконец решил это. Поэтому я планировал отобразить HTML-блок перетаскивания на мою карту, а затем, после нажатия кнопки, добавить мой блок на карту (нарисовав его в листовке и удалив блок HTML)

Итак, вот мой модифицированный код, после чего я объясню (насколько я понял):

let mapContainer = {
  x: document.getElementsByClassName('vue2leaflet-map')[0].offsetTop,
  y: document.getElementsByClassName('vue2leaflet-map')[0].offsetLeft
};

let pointCoords = {
  x: point.offsetTop,
  y: point.offsetLeft,
  width: point.offsetWidth,
  height: point.offsetHeight
};

let relCoords = {
  x: (pointCoords.x - mapContainer.x),
  y: (pointCoords.y - mapContainer.y),
  x_end: (pointCoords.x - mapContainer.x) + pointCoords.height,
  y_end: (pointCoords.y - mapContainer.y) + pointCoords.width
};

let origin = this.$refs.floorplan.mapObject.getPixelOrigin();

let startpoint = this.$refs.floorplan.mapObject.containerPointToLayerPoint(new L.point(relCoords.y_end,relCoords.x))
startpoint=startpoint.add(origin)

let endpoint = this.$refs.floorplan.mapObject.containerPointToLayerPoint(new L.point(relCoords.y,relCoords.x_end))
endpoint=endpoint.add(origin)

let latlngCoords = {
  start: this.$refs.floorplan.mapObject.unproject(startpoint),
  end: this.$refs.floorplan.mapObject.unproject(endpoint)
}

let bounds = new L.latLngBounds(latlngCoords.start,latlngCoords.end);

this.markers.push(bounds);

Объяснение

Оказывается, моя интуиция была верна:

1. вычислить пиксельные координаты моего выпавшего блока относительно контейнера карты
2. вычислить координаты широты относительно координат происхождения CRS
3. отобразить окно на вычисленные координаты

Итак, необходимые функции:

let startpoint = 
  this.$refs.floorplan.mapObject.containerPointToLayerPoint(new 
  L.point(relCoords.y_end,relCoords.x))

Создание точки на основе относительных координат пикселей, а затем вычисление пикселя, относящегося к исходному пикселю карты (containerPointToLayerPoint, подробнее см. В листовке)

  startpoint=startpoint.add(origin)

Добавьте исходную точку, чтобы иметь правильную позицию новой прямоугольной точки

  let latlngCoords = {
    start: this.$refs.floorplan.mapObject.unproject(startpoint),
    end: this.$refs.floorplan.mapObject.unproject(endpoint)
  }

Отпроектировать координаты пикселя относительно исходного пикселя до latLng

Это помогло мне, и теперь я могу сопоставить блоки HTML с картой листовки и нарисовать свои брошенные блоки в листовке. Надеюсь, это поможет кому-нибудь когда-нибудь!