Question

使用ImageOverlay将图像用作地图，使用Leaflet.js - 但在更改缩放时，标记会改变位置。

已遵循此tutorial中的指南，代码笔示例为here。

// Markers 
var markers = [{"title":"OneOcean Port Vell","description":"Super yacht marina","link":"http:\/\/www.oneoceanportvell.com\/","x":"68.28125","y":"68.443002780352178"}]; 

var map = L.map('image-map', {
  minZoom: 2,
  maxZoom: 4,
  center: [0, 0],
  zoom: 2,
  attributionControl: false,
  maxBoundsViscosity: 1.0,
  crs: L.CRS.Simple
});

// dimensions of the image
var w = 3840,
    h = 2159,
    url = 'map.png';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);

// Add Markers  
for (var i = 0; i < markers.length; i++){
    var marker = markers[i];

    // Convert Percentage position to point
    x = (marker['x']/100)*w;
    y = (marker['y']/100)*h;

    point = L.point((x / 2), (y / 2))
    latlng = map.unproject(point);

    L.marker(latlng).addTo(map);
}

在codepen中，将zoom更改为4以查看标记失去其位置。

理想情况下，我正在尝试更改缩放以允许不同的屏幕尺寸，并在移动设备上显示更多地图。

也许相关，我看不到让zoomSnap功能工作以允许分数缩放。

任何指针都非常贴切。

Answer 1

map.unproject需要您应用非投影的zoom值。

在计算imageZoom和unproject时，您正确指定bounds的静态center值，而不是您的标记位置。

如果未指定zoom参数，则unproject会使用当前地图缩放级别，即您在zoom变量中定义的内容。这就是为什么当您更改其值时，unproject为您的标记使用不同的值，并且它们位于不同的位置。

您甚至不得不将x和y值（相对于您的图片）除以2，以说明在初始情况下，imageZoom的值是正确的但是由于你没有为unproject指定缩放，后者使用当前zoom（即3），所以坐标应该除以2才能“正确”。

更新了codepen：https://codepen.io/anon/pen/pLvbvv

leaflet.js ImageOverlay缩放更改标记位置

1 个答案: