Question

我在传单（https://leafletjs.com/）和interactjs（http://interactjs.io/）上有问题，但没有找到解决我问题的答案。

我的设置：我有一个带传单的地图（vue2leaflet组件：https://korigan.github.io/Vue2Leaflet/#/）和一个表，该表作为列表，具有可交互拖动的对象。传单地图被定义为一个交互放置区。

我的目标：将列表元素拖放到地图上，将其拖放并在拖放点上绘制矩形（或者，由于简单性，使用简单的标记）。

当前有效的方法：传单在地图上映射了我的图像，可以将列表元素拖放到地图上，并且事件监听器可以正确触发。同样有效的是地图上的绘图（传单集成矩形选项）。

问题：在地图上绘制的矩形已移动。因此，它不会放在我将我的interactjs拖放到可拖动位置上。

我的环境：

//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等方面帮助我，所以我需要您的帮助。

编辑

我终于解决了。所以我的计划是将一个拖放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);

说明

结果证明我的直觉是正确的：

计算相对于地图容器的放置框的像素坐标
计算相对于地图CRS原点的latLng坐标
将框映射到计算出的坐标

因此必需的功能是：

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框映射到传单地图上，并在传单中绘制我的拖放框。我希望这可以帮助某人一天！

传单和interactjs：拖放，坐标投影

0 个答案: