Ubah pusat tampilan OpenLayers 3

14

Saya menggunakan OpenLayers 3 untuk berinteraksi dengan beberapa peta. Saya pertama kali mendeklarasikan peta saya:

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

Saya memiliki acara yang memicu tindakan, untuk mengubah pusat tampilan peta saya. Dengan cara ini, (koordinat saya dalam 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
     }));
}

Ketika fungsi berjalan saya mendapatkan ini di konsol explorer:

Lat: 9.0412851667 Long: -79.5658145000

Tapi peta itu mengarah [0,0], apakah ada yang tahu mengapa ini terjadi?

openlayers-2 coordinate-system coordinates epsg openlayers Guillelon
sumber

Jawaban:

26

Dalam ol.proj.transform Anda perlu menentukan dari Proyeksi sebelum Proyeksi, maka itu harus bekerja.

Seperti yang dijelaskan Michael Gentry dalam jawabannya, Masalah lain adalah Anda harus menentukan garis bujur (barat-timur dengan demikian x) pertama dan kemudian garis lintang (selatan-utara dengan demikian y).

Dan cara yang lebih baik untuk mengatur pusat adalah untuk mendapatkan tampilan saat ini dan mengatur pusat di sana daripada selalu membuat yang baru.

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
sumber
Ok, saya terima kasih. Satu hal lagi, jika saya mengubahnya dengan cara itu saya mendapatkan kesalahan baru Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length. Dan saya pikir itu karena koordinat saya terlalu panjang. Jika saya mengubahnya agar [131.044922, -25.363882]berfungsi ok. Jadi, apakah koordinat saya terlalu lama ??
Guillelon
itu seharusnya tidak menjadi masalah. dengan koordinat apa kesalahan terjadi? yang Anda sebutkan di atas?
Simon Zyx
ya yang di sana
Guillelon
Saya mencoba koordinat ini dengan peta MapQuest dan berhasil. Garis bujur -79 masih dalam batas EPSG: 4326 (dalam +/- 90 derajat) dan EPSG: 3857 (dalam +/- 85 derajat).
Simon Zyx
itu adalah typeerror yang terjadi di dalam renderer dan rangerror
Simon Zyx
9

Saya memiliki akun pertukaran tumpukan baru dan tidak memiliki reputasi yang cukup tinggi untuk mengomentari "UnEught TypeError: Gagal menjalankan 'putImageData' di 'CanvasRenderingContext2D': parameter float 3 tidak terbatas." kesalahan. Ini terjadi karena Anda memiliki input lat dan panjang mundur.

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

seharusnya:

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

kalau-kalau ada orang lain yang memiliki masalah ini.

Michael Gentry
sumber
ya Anda benar - saya akan memperbarui jawaban saya sesuai.
Simon Zyx
0

Untuk penggunaan khusus 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');

Untuk penggunaan 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
sumber