0

我需要将谷歌地图的一些功能转换成 Leaflet 和 OSM。我拥有的是一个室内访客跟踪应用程序，它使用带有自定义瓷砖的谷歌地图（室内平面图图像）。它通过将 XY 坐标转换为 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);
}

在此处输入图像描述

在传单地图中，我尝试使用以下代码来实现相同的结果（使用相同的图像/图块）：

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');

更新 2：

在此处输入图像描述

4

2 回答 2

0

感谢您的指导。我已经能够找出解决方案。我使用以下代码来获取正确的 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));
于 2019-03-12T14:58:48.070 回答
0

似乎标记位置取决于我的屏幕分辨率或缩放级别。

的确。您正在使用layerPointToLatLng()，根据文档（强调我的）...

给定一个相对于原点像素的像素坐标，返回相应的地理坐标（对于当前缩放级别）。

Leaflet 有一种奇怪的方式来隐藏 CRS和预测的复杂性。如果没有看到更多用于定义地图 CRS 或室内地图图像边界的代码，除了“注意坐标的含义”之外，不可能提供任何建议。

于 2019-02-24T15:38:15.423 回答