Openlayers 3中心图

Question

我唱OpenLayers 3来显示一张地图。我想使用latLon坐标将地图居中。我首先使用的是quickstart code。使用这段代码，我不能改变地图的中心。我想这和Spherical Mercator projection有关。唯一的问题是，我只有后来的坐标。

有人知道如何在openlayers v3中将地图居中吗？

Answer 1

您需要使用将经度/经度坐标转换为正确的投影(或坐标系

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

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

不同的投影有不同的代号。WGS84是“正常”的经度/经度，而EPSG:900913是经常用于谷歌地图、openstreetmap和必应等网络地图的投影。

我认为WGS84/ OpenLayers :4326(经度/纬度)转换支持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'))

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

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