Openlayers 3中心地图

Question

我正在唱歌 OpenLayers 3 以显示地图。我想使用 latLon 坐标将地图居中。我开始使用 quickstart code 。使用此代码，我无法更改地图的中心。我认为这与Spherical Mercator projection有关。唯一的问题是，我只有经纬度坐标。

有谁知道如何通过 openlayers v3 使地图居中？

Answer 1

您需要使用

将 lon/lat 坐标转换为正确的投影（或坐标系）

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

现在您可以使用 olCorrdinates 设置中心。

不同的投影有不同的代号。 WGS84 是 "normal" lon/lat 并且 EPSG:900913 是网络地图中经常使用的投影，例如 google 地图、openstreetmap 和 bing.

我认为 OpenLayers 3 内置了对从 WGS84/EPSG:4326 (lon/lat) 进行转换的支持，但如果您需要与其他坐标系相互转换，则可以包含 proj4js 库。 Openlayers 将与这个库集成，并能够以相同的方式进行转换。

转换文档 http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html

Proj4 库 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 ol.proj.fromLonLat and ol.proj.toLonLat functions on Mar. 2015。

要使地图居中，您可能需要在初始化期间使用它

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

或创建地图后

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

虽然它们是 just wrappers of ol.proj.transform，但我发现它们更易于使用。

默认的 Web 墨卡托是 EPSG:4326 和 EPSG:3857。

与一样，WGS84 与 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

要看你怎么用？

browser-only 使用：

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

Openlayers 3中心地图

Openlayers 3 center map

javascript

openlayers-3