使用 OSM 和 Leaflet 在自定义地砖上渲染图标

Question

我需要将 google 地图的一些功能转换成 Leaflet 和 OSM。我拥有的是一个室内访客跟踪应用程序，它使用 google 带有自定义图块的地图（室内平面图图像）。它通过将 X Y 坐标转换为 Lat Lng 来绘制访客位置（室内）的标记。它通过

完成

function findLatLangFromImagePixel(imgPixel) {
    var scalingRatio = ImageWidth / 256;
    var pixel = { x: ((imgPixel.X) / scalingRatio), y: ((imgPixel.Y) / scalingRatio) };

    var point = new google.maps.Point(pixel.x + 0.5, pixel.y + 0.5);
    return map.getProjection().fromPointToLatLng(point);
}

在 Leaflet 地图中，我正在尝试使用以下代码来获得相同的结果（使用相同的 image/tiles）：

var x = ImageXYLocation.X;
            var y = ImageXYLocation.Y;
            var scalingRatio = ImageWidth / 256;
            var pixel = { x: ((x) / scalingRatio), y: ((y) / scalingRatio) };
var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

            latlng = map.layerPointToLatLng(pointXY);
latlng.lng += 180;

但我得到了不同的结果。此外，我观察到随着屏幕分辨率的改变，标记会在室内地图上切换其位置。标记位置似乎取决于我的屏幕分辨率或缩放级别。

第二个缩放级别

更新： 地图初始化代码如下：

 if (map != null) {
            map.remove();
        }
        $("#map_canvas").html("");

        map = L.map('map_canvas', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            crs: L.CRS.Simple,
        });
        var w = 6095,
            h = 3410;
        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);
        L.tileLayer('./tiles/{z}/{x}/{y}.png', {
            maxZoom: 16,
            minZoom: 0,
            continuousWorld: false,
            bounds: bounds,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        map.setZoom(5);
        map.setMaxBounds(bounds);

        map.zoomControl.setPosition('bottomright');

更新二：

Answer 1

It seems that the marker position is dependent on my screen resolution or at zoom level.

确实如此。您正在使用 layerPointToLatLng()，其中 according to the documentation（强调我的）...

Given a pixel coordinate relative to the origin pixel, returns the corresponding geographical coordinate (for the current zoom level).

传单有 curious way of hiding the complexities of CRSs 和投影。如果没有看到更多用于定义地图的 CRS 或室内地图图像边界的代码，除了 "pay attention to what your coordinates mean".

之外无法提供任何建议

Answer 2

感谢您的指导。我已经能够找到解决方案。我使用以下代码获得正确的 LatLng

var x = ImageXYLocation.X;
var y = ImageXYLocation.Y;
var scalingRatio = ImageWidth / 256;
var pixel = { x: ((x / scalingRatio) * Math.pow(2, map.getZoom())), y: ((y / scalingRatio) * Math.pow(2, map.getZoom())) };

var pointXY = L.point(pixel.x + 0.5, pixel.y +0.5);

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

使用 OSM 和 Leaflet 在自定义地砖上渲染图标

Render Icon on custom floor tiles using OSM & Leaflet

maps

google-maps

openstreetmap

leaflet

google-indoor-maps