Ändern Sie die Ansichtsmitte von OpenLayers 3

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?

— Guillelon
quelle

Antworten:

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

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

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