Ändern Sie die Ansichtsmitte von OpenLayers 3

14

Ich verwende OpenLayers 3, um mit einigen Karten zu interagieren. Ich erkläre zuerst meine Karte:

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

Ich habe ein Ereignis, das eine Aktion auslöst, um das Ansichtszentrum meiner Karte zu ändern. So (meine Koordinaten sind im EPSG:4326Format):

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

Wenn die Funktion ausgeführt wird, erhalte ich Folgendes an der Explorer-Konsole:

Lat: 9.0412851667 Long: -79.5658145000

Aber die Karten gehen an [0,0], weiß jemand warum das passiert?

openlayers-2 coordinate-system coordinates epsg openlayers Guillelon
quelle

Antworten:

26

In ol.proj.transform müssen Sie fromProjection vor toProjection angeben, dann sollte es funktionieren.

Wie Michael Gentry in seiner Antwort erklärt, besteht ein weiteres Problem darin, dass Sie zuerst den Längengrad (West-Ost, also x) und dann den Breitengrad (Süd-Nord, also y) angeben müssen.

Eine bessere Möglichkeit, den Mittelpunkt festzulegen, besteht darin, die aktuelle Ansicht abzurufen und dort den Mittelpunkt festzulegen, anstatt immer einen neuen zu erstellen.

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
quelle
Ok, ich habe es verstanden, danke. Eine weitere Sache, wenn ich es so ändere, bekomme ich einen neuen Fehler Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length. Und ich denke, weil meine Koordinaten zu lang sind. Wenn ich es ändere [131.044922, -25.363882], funktioniert es in Ordnung. Also sind meine Koordinaten zu lang?
Guillelon
das sollte nicht das problem sein. Mit welchen Koordinaten ist der Fehler aufgetreten? die, die du oben erwähnt hast?
Simon Zyx
ja der da
Guillelon
Ich habe diese Koordinaten mit einer MapQuest-Karte ausprobiert und es hat funktioniert. Ein Längengrad von -79 liegt immer noch innerhalb der Grenzen von EPSG: 4326 (innerhalb von +/- 90 Grad) und EPSG: 3857 (innerhalb von +/- 85 Grad).
Simon Zyx
Es ist ein Tippfehler innerhalb des Renderers und ein Rangfehler
Simon Zyx
9

Ich habe ein neues Stapelaustauschkonto und habe keinen Ruf, der hoch genug ist, um zu "Uncaught TypeError: Ausführen von 'putImageData' für 'CanvasRenderingContext2D' fehlgeschlagen: Float-Parameter 3 ist nicht endlich" Stellung zu nehmen. Error. Dies liegt daran, dass Sie die lat- und die long-Eingaben rückwärts haben.

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

sollte sein:

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

falls jemand anderes dieses Problem hat.

Michael Gentry
quelle
ja du hast recht - ich werde meine antwort entsprechend aktualisieren.
Simon Zyx
0

Nur für Browser: 

<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');

Für die Verwendung mit der js-App 

   // 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
quelle