Thay đổi trung tâm xem OpenLayers 3

Tôi đang sử dụng OpenLayers 3 để tương tác với một số bản đồ. Trước tiên tôi khai báo bản đồ của mình:

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

Tôi đã có một sự kiện kích hoạt một hành động, để thay đổi trung tâm chế độ xem bản đồ của tôi. Bằng cách này, (tọa độ của tôi có EPSG:4326định dạng):

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

Khi chức năng chạy, tôi nhận được điều này tại bảng điều khiển explorer:

Lat: 9.0412851667 Long: -79.5658145000

Nhưng các bản đồ đi đến [0,0], có ai biết tại sao điều này xảy ra?

— Guillelon
nguồn

Câu trả lời:

Trong ol.proj.transform, bạn cần chỉ định fromProjection trước toProjection, sau đó nó sẽ hoạt động.

Như Michael Gentry giải thích trong câu trả lời của mình, một vấn đề khác là bạn phải xác định kinh độ (tây-đông do đó x) trước và sau đó là vĩ độ (nam-bắc do đó y).

Và một cách tốt hơn để đặt trung tâm là lấy chế độ xem hiện tại và đặt trung tâm ở đó thay vì luôn tạo một chế độ mới.

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
nguồn

Ok tôi đã cảm ơn nó. Một điều nữa, nếu tôi thay đổi theo cách đó thì tôi sẽ gặp một lỗi mới

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

. Và tôi nghĩ là vì tọa độ của tôi quá dài. Nếu tôi thay đổi nó cho [131.044922, -25.363882]nó hoạt động ok. Vì vậy, tọa độ của tôi quá dài ??

— Guillelon

đó không phải là vấn đề tọa độ nào đã xảy ra lỗi với? những người bạn đã đề cập ở trên?

— Simon Zyx

vâng, cái đó ở đó

— Guillelon

Tôi đã thử các tọa độ này với bản đồ MapQuest và nó đã hoạt động. Kinh độ -79 vẫn nằm trong giới hạn của EPSG: 4326 (trong khoảng +/- 90 độ) và EPSG: 3857 (trong khoảng +/- 85 độ).

— Simon Zyx

nó là một máy đánh chữ xuất hiện bên trong trình kết xuất và một máy đo tốc độ

— Simon Zyx

Tôi có một tài khoản trao đổi ngăn xếp mới và không có uy tín đủ cao để nhận xét về "Loại chưa được xử lýError: Không thể thực hiện 'putImageData' trên 'CanvasRenderingContext2D': tham số float 3 là không hữu hạn." lỗi. Điều này xảy ra bởi vì bạn có lat và đầu vào dài ngược.

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

nên là:

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

trong trường hợp bất cứ ai khác có vấn đề này

— Michael Gentry
nguồn

vâng bạn đúng - tôi sẽ cập nhật câu trả lời của tôi cho phù hợp.

— Simon Zyx

Chỉ sử dụng cho trình duyệt:

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

Để sử dụng ứng dụng 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
nguồn