Leaflet/JS：在平移/縮放后添加折線

Question

我正在使用 Leaflet map 作為圖像查看器，並且我正在嘗試添加一個“切換十字准線”function 將在圖像的中心放置一個十字准線。 我已經讓它工作到了十字准線正確出現的程度，並且在進行平移/縮放時與圖像“耦合”，這是我期望看到的。

我遇到的問題是，如果我先進行平移/縮放，然后切換十字准線，十字准線會出現在“窗口”的中心，而不是圖像的中心。

我為此使用的代碼在這里：

toggleCrosshair(toggleVal) {      
    let map = this.map;              

    if (toggleVal == true) {
        var north = map.getBounds().getNorth(); // these are in lat, lng
        var south = map.getBounds().getSouth();
        var east = map.getBounds().getEast();
        var west = map.getBounds().getWest();

        var center = map.getCenter();

        var latlngHorizontalLeft = new L.latLng(center.lat, west);
        var latlngHorizontalRight = new L.latLng(center.lat, east); 

        var horizLineList = [latlngHorizontalLeft, latlngHorizontalRight];
        let horizLine = new L.Polyline(horizLineList, {
            color: 'red',
            weight: 2,
            opacity: 0.5,
            smoothFactor: 1
        });

        var latlngVerticalTop = new L.latLng(north, center.lng);
        var latlngVerticalBottom = new L.latLng(south, center.lng);

        var vertLineList = [latlngVerticalTop, latlngVerticalBottom];
        let vertLine = new L.Polyline(vertLineList, {
            color: '#A5CE3A',
            weight: 2,
            opacity: 0.5,
            smoothFactor: 1
        });

        horizLine.addTo(map);
        vertLine.addTo(map);

    } else {
        var i;
        for (i in map._layers) {
            if (map._layers[i].options.color == '#A5CE3A') {
                try {
                    map.removeLayer(map._layers[i]);
                } catch (e) {
                    console.log("problem with " + e + map._layers[i]);
                }
            } else if (map._layers[i].options.color == 'red') {
                try {
                    map.removeLayer(map._layers[i]);
                } catch (e) {
                    console.log("problem with " + e + map._layers[i]);
                }
            }
        }
    }
}

有人對如何獲得我希望的行為有任何提示嗎？ 謝謝！

Answer 1

map.getBounds() 只為您提供在當前 map 視圖中可見的地理邊界。

簡而言之，無論您在屏幕上看到什么。

將其設置為實際的中心 lat lng 坐標。

https://leafletjs.com/reference-1.6.0.html#map-getbounds

Answer 2

感謝您的回復。 我最終保存了原始位置/縮放值，將圖像移動到已知位置/縮放值（使用 SetView 方法），然后添加十字准線，然后將圖像移回原始位置/縮放值。 我確實必須在 SetView 調用中將 animation 設置為 false ...... animation 的時間安排把事情搞砸了。

可能不是最優雅的解決方案，但我記得在使用 Canvas 元素時必須做類似的事情。

Answer 3

你能接受我的回答嗎？ 或者至少給它一個贊成票，謝謝，