Question

我正在使用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]);
                }
            }
        }
    }
}

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

Answer 1

map.getBounds（）仅为您提供当前地图视图中可见的地理范围。

简而言之，无论您在屏幕上看到什么。

将其设置为实际的中心纬度坐标。

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

Answer 2

感谢您的答复。我最终保存了原始位置/缩放值，将图像移动到一个已知的位置/缩放值（使用SetView方法），然后添加了十字线，然后将图像移动回了原始位置/缩放值。我确实必须在SetView调用中将动画设置为false ...动画的时间把事情扔了。

可能不是最优雅的解决方案，但是我记得在使用Canvas元素时必须做类似的事情。

传单/ JS：在平移/缩放后添加折线

2 个答案: