Openlayers 3中心地圖

Question

我正在唱OpenLayers 3來顯示地圖。 我想使用latLon坐標使地圖居中。 我正在使用快速啟動代碼 。 使用此代碼，我無法更改地圖的中心。 我認為這與Spherical Mercator projection 。 唯一的問題是，我只有lat lon坐標。

有誰知道如何從openlayers v3中心地圖？

Answer 1

您需要使用將lon / lat坐標轉換為正確的投影（或坐標系）

var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")

現在您可以使用olCorrdinates設置中心。

不同的投影具有不同的代號。 WGS84是“普通”lon / lat和EPSG：900913是網絡地圖中經常使用的投影，如谷歌地圖，openstreetmap和bing。

我認為OpenLayers 3內置支持從WGS84 / EPSG轉換：4326（lon / lat），但是如果你需要轉換到其他坐標系或從其他坐標系轉換，你可以包含proj4js庫。 Openlayers將與此lib集成，並能夠以相同的方式進行轉換。

轉換文檔http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html

Proj4 lib https://github.com/proj4js/proj4js

編輯：在您參考的示例中，中心位置實際上是使用lon / lat設置的。

view: new ol.View({
    center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
})

EPSG：4326實際上與WGS84和EPSG相同：3857與EPSG相同：900913。 這非常令人困惑。 我自己去過那兒。

您只需將數字37.41和8.82更改為您的lon / lat坐標。 如果要在初始化后更改中心位置，則需要使用setCenter（）;

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

Answer 2

OpenLayers 於2015年3月推出了ol.proj.fromLonLat和ol.proj.toLonLat函數。

要使地圖居中，您可能希望在初始化期間使用它

view: new ol.View({
        center: ol.proj.fromLonLat([lon, lat])
      })

或者在創建地圖之后

map.getView().setCenter(ol.proj.fromLonLat([lon, lat]))

雖然它們只是 ol.proj.transform 包裝器 ， ol.proj.transform我發現它們更易於使用。

默認的Web Mercators是EPSG:4326和EPSG:3857 。

與Ole Borgersen所說的一樣， WGS84與EPSG:4326相同EPSG:4326這是我們習慣使用的Long-Lat坐標的類型。

ol.proj.fromLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')

ol.proj.toLonLat([lon, lat]);
// is equivalent of
ol.proj.transform([lon, lat], 'EPSG:3857', 'EPSG:4326')

Answer 3

取決於你如何使用？

僅限瀏覽器使用：

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

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