如何将地图居中放置在 Open layer 3 中的某个位置

Question

我需要将位置中心设置到我有坐标 [lat: '28.627671', lng: '77.216574'] 的印度德里的某个地方。我已经使用下面的代码使其工作，但仍然显示错误的位置。

 map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        view: new ol.View({
            center: [0,0],
            zoom: 4
        })
    });

    var newLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    map.addLayer(newLayer);
    map.addLayer(mapVectorLayer);
    console.log(centerPosition);
    map.getView().setCenter(ol.proj.transform([centerPosition.lng, centerPosition.lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);

Answer 1

我可能是因为你给坐标赋了字符串值。通过在变量前添加 + 将它们转换为数字，你应该没问题。

查看 JSFiddle 示例，它看起来像您想要执行的操作：http://jsfiddle.net/bbc7gup9/2/

还有一个片段：

var centerPosition = {
  lat: '28.627671',
  lng: '77.216574'
};
view.setCenter(ol.proj.transform([
  +centerPosition.lng,
  +centerPosition.lat
], 'EPSG:4326', 'EPSG:3857'));
view.setZoom(5);

Answer 2

只需翻转坐标即可。这样做：

map.getView().setCenter(ol.proj.transform([ 77.216574,28.627671], 'EPSG:4326', 'EPSG:3857'));

fiddle here

也请检查@Alexander Dude fiddle，按照他建议的方式传递坐标更安全。我很确定你有解决办法

如何将地图居中放置在 Open layer 3 中的某个位置

How to center a map on a position in Open layer 3

jquery

angularjs

openlayers-3