Openlayers 3 地图居中

Question

我正在使用OpenLayers 3展示地图。我想使用经纬度坐标来居中地图。

我正在使用快速入门代码开始学习。但是，使用这段代码后，我无法更改地图的中心点。我认为这可能与球形墨卡托投影有关。唯一的问题是，我只有经纬度坐标。

有没有人知道如何在 OpenLayers v3 中使地图居中？

- user936965

Answer 1

您需要使用正确的投影（或坐标系统）将经/纬度坐标转换为：

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

现在你可以使用olCorrdinates来设置中心点。

不同的投影有不同的代码名称。WGS84是“正常”的经度/纬度，EPSG:900913是在Web地图中经常使用的投影，比如Google地图，OpenStreetMap和Bing。

我认为OpenLayers 3内置了从WGS84/EPSG:4326（经度/纬度）进行转换的支持，但如果您需要转换到或从其他坐标系统，则可以包含proj4js库。 Openlayers将与这个库集成，并能够以相同的方式进行转换。

转换文档 http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html Proj4库 https://github.com/proj4js/proj4js 编辑： 在你所提到的示例中，中心位置实际上是用经纬度设置的。

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这两个数字更改为你的经纬度坐标即可。如果你想在初始化后更改中心位置，你需要使用setCenter()方法。

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

- Ole Borgersen

---

什么是"WGS84"，"EPSG:900913"？我在很多网站上看到这些东西，但我真的不明白它是什么。 - user936965

这是一种地图投影或坐标系统。有多种方法来测量世界，这只是不同测量方式的代号。WGS84是经度/纬度，EPSG:900913是OpenStreetMap、Google和Bing等公司使用的投影方式。还有其他投影方式，如将世界分成小矩形并使用公制作为坐标的UTM投影。 - Ole Borgersen

还要注意参数的顺序。ol.proj.transform方法期望[经度，纬度]，而有些程序使用纬度/经度参数顺序。例如，在Google地图的上下文菜单中选择“这里是什么”时，位置显示为纬度/经度。 - P.J.Meisch

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的封装，但我觉得它们更易于使用。

默认的Web Mercators是EPSG：4326和EPSG：3857。

就像Ole Borgersen所述, 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')

- I.G. Pascual

Answer 3

"最初的回答" 翻译成中文是 "Original Answer"。 这取决于你如何使用？ 对于仅用于浏览器：

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

For js-app use

   // 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