Używam mapy Ulotka jako przeglądarki obrazów i próbuję dodać funkcję „przełączania krzyżyków”, która umieści celownik na środku obrazu. Sprawiłem, że działa do punktu, w którym celownik pojawia się poprawnie i jest „sprzężony” z obrazem podczas wykonywania panoram / zoomów, czyli tego, czego bym się spodziewał.

Problem polega na tym, że jeśli NAJPIERW wykonam panoramowanie / powiększanie, a następnie przełączę krzyżyki, krzyżyki pojawią się na środku „okna”, a nie na środku obrazu.

Kod, którego do tego używam, jest tutaj:

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

Czy ktoś ma jakieś wskazówki, jak uzyskać zachowanie, na które mam nadzieję? Dzięki!

0
dave reid 19 listopad 2019, 21:10
Jak radzisz sobie ze swoim wizerunkiem? Czy jest to nakładka obrazu?
 – 
ghybs
19 listopad 2019, 21:16
Tak, używam ImageOverlay.
 – 
dave reid
19 listopad 2019, 23:30

3 odpowiedzi

Map.getBounds () podaje tylko granice geograficzne widoczne w bieżącym widoku mapy.

Krótko mówiąc, cokolwiek widzisz na ekranie.

Ustaw go na rzeczywiste współrzędne środkowej szerokości lng.

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

0
Jay Z 21 listopad 2019, 07:04

Dzięki za odpowiedzi. Skończyło się na zapisaniu pierwotnej lokalizacji / wartości powiększenia, przeniesieniu obrazu do znanej lokalizacji / wartości powiększenia (przy użyciu metody SetView), następnie dodaniu krzyżyka, a następnie przeniesieniu obrazu z powrotem do pierwotnej lokalizacji / wartości powiększenia. Musiałem ustawić animację na false w wywołaniach SetView ... czas animacji wyrzucił wszystko.

Prawdopodobnie nie jest to najbardziej eleganckie rozwiązanie, ale pamiętam, że musiałem zrobić coś podobnego z elementami Canvas.

0
dave reid 21 listopad 2019, 20:50

Czy możesz przyjąć moją odpowiedź? Albo przynajmniej daj mu głos za, dzięki,

0
Jay Z 22 listopad 2019, 07:12