Openlayers 3 中心地图答案

【问题标题】：Openlayers 3 center mapOpenlayers 3 中心地图
【发布时间】：2015-01-07 13:39:59
【问题描述】：

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

有谁知道如何将 openlayers v3 中的地图居中？

【问题讨论】：

标签： javascript openlayers-3

【解决方案1】：

您需要使用

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

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

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

不同的投影有不同的代号。 WGS84 是“正常”经度/纬度，EPSG:900913 是谷歌地图、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'))

【讨论】：

那是什么：“WGS84”、“EPSG:900913”？我在很多网站上都看到了这些东西，但我真的不明白它是什么。
地图投影或坐标系。有多种方法可以衡量世界，这些只是不同方法的代号。 WGS84 是 lon/lat，EPSG:900913 是 openstreetmap、google、bing 等使用的。还有其他的，比如 UTM-projections，它将世界分成小矩形并使用公制作为坐标。
还要注意参数的顺序。 ol.proj.transform 方法需要 [longitude, latitude]，而某些程序使用参数的纬度/经度顺序。例如，当从 Google 地图的上下文菜单中选择“这里有什么”时，位置会显示为纬度/经度。

【解决方案2】：

OpenLayers 引入了ol.proj.fromLonLat 和ol.proj.toLonLat 函数on Mar. 2015。

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

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

或在地图创建后

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

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

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

与Ole Borgersen states 一样，WGS84 与EPSG:4326 相同，后者是我们常用的经纬度坐标类型。

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

【讨论】：

【解决方案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
    })
  });

【讨论】：