Zmień centrum widokowe OpenLayers 3

Używam OpenLayers 3 do interakcji z niektórymi mapami. Najpierw deklaruję swoją mapę:

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

Mam zdarzenie, które wyzwala akcję, aby zmienić centrum widoku mojej mapy. W ten sposób (moje współrzędne są w EPSG:4326formacie):

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

Po uruchomieniu funkcji otrzymuję to w konsoli eksploratora:

Lat: 9.0412851667 Long: -79.5658145000

Ale mapy idą do tego [0,0], czy ktoś wie, dlaczego tak się dzieje?

— Guillelon
źródło

Odpowiedzi:

W ol.proj.transform musisz określić fromProjection przed toProjection, to powinno działać.

Jak wyjaśnia Michael Gentry w swojej odpowiedzi, innym problemem jest to, że musisz najpierw określić długość geograficzną (zachód-wschód, więc x), a następnie szerokość geograficzną (południe-północ, więc y).

Lepszym sposobem ustawienia środka jest uzyskanie bieżącego widoku i ustawienie środka zamiast tworzenia nowego.

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

— Simon Zyx
źródło

Ok, rozumiem dzięki. Jeszcze jedno, jeśli zmienię to w ten sposób, otrzymuję nowy błąd

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length

. Myślę, że dzieje się tak, ponieważ moje współrzędne są za długie. Jeśli to zmienię, [131.044922, -25.363882]to działa dobrze. Czy moje współrzędne są za długie?

— Guillelon,

to nie powinno stanowić problemu. z jakimi współrzędnymi wystąpił błąd? te, o których wspomniałeś powyżej?

— Simon Zyx

tak, ten tam

— Guillelon

Próbowałem tych współrzędnych z mapą MapQuest i zadziałało. Długość -79 wynosi nadal w granicach EPSG: 4326 (w zakresie +/- 90 stopni) i EPSG: 3857 (w zakresie +/- 85 stopni).

— Simon Zyx

to typerror występujący w renderze i rangerror

— Simon Zyx

Mam nowe konto wymiany stosów i nie mam wystarczająco wysokiej reputacji, aby skomentować błąd „Uncaught TypeError: Nie można wykonać polecenia„ putImageData ”na kanwie„ CanvasRenderingContext2D ”: parametr float 3 jest nieskończony.” błąd. Dzieje się tak, ponieważ masz wejście łacińskie i długie do tyłu.

map.getView().setCenter(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857'));

Powinien być:

map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

na wypadek, gdyby ktokolwiek miał ten problem.

— Michael Gentry
źródło

tak, masz rację - odpowiednio zaktualizuję swoją odpowiedź.

— Simon Zyx,

Do użytku tylko w przeglądarce:

<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>


  ol.proj.transform() 

  ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857');

Do użytku z aplikacją js

   // for projection
  import {transform} from 'ol/proj.js';

  // use this one : transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857')





   var map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
      //center: [-118.246521, 34.049039],
        center: transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16
    })
  });

— hoogw
źródło