グーグルマップのいくつかの機能をリーフレットとOSMに変換する必要があります。私が持っているのは、カスタムタイル付きのグーグルマップを使用する屋内訪問者追跡アプリケーションです(屋内フロアプラン画像)。XY座標をLatLngに変換することにより、訪問者(屋内)の場所にマーカーをプロットします。それは
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マップでは、同じ結果を達成するために次のコードを試しています(同じ画像/タイルを使用)。
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.setZoom(5);
map.setMaxBounds(bounds);
map.zoomControl.setPosition('bottomright');
アップデート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));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加