javascript - Leaflet/JS：在平移/缩放后添加折线

问题描述

我正在使用 Leaflet 地图作为图像查看器，并且我正在尝试添加一个“切换十字准线”功能，该功能将在图像中心放置一个十字准线。我已经让它工作到了十字准线正确出现的程度，并且在进行平移/缩放时与图像“耦合”，这是我期望看到的。

我遇到的问题是，如果我先进行平移/缩放，然后切换十字准线，十字准线会出现在“窗口”的中心，而不是图像的中心。

我为此使用的代码在这里：

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]);
                }
            }
        }
    }
}

有人对如何获得我希望的行为有任何提示吗？谢谢！

标签： javascriptleaflet

javascript - Leaflet/JS：在平移/缩放后添加折线

问题描述

解决方案

推荐阅读