更改OpenLayers 3视图中心

我正在使用OpenLayers 3与某些地图进行交互。我首先声明我的地图：

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

我有一个事件触发操作，以更改地图的视图中心。这样，（我的坐标是EPSG:4326格式）：

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

当函数运行时，我在资源管理器控制台上得到了这个：

Lat: 9.0412851667 Long: -79.5658145000

但是地图转到[0,0]，有人知道为什么会这样吗？

— 吉列隆
source

Answers:

在ol.proj.transform中，您需要在toProjection之前指定fromProjection，然后它才能工作。

正如迈克尔·金特里（Michael Gentry）在回答中所解释的那样，另一个问题是，您必须先指定经度（西向，因此x），然后再指定纬度（南北，因此y）。

设置中心的更好方法是获取当前视图并在此处设置中心，而不是总是创建一个新视图。

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

— 西蒙·齐克斯（Simon Zyx）
source

好吧，我明白了。还有一件事，如果我以这种方式进行更改，则会遇到新的错误

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length

。我认为是因为我的坐标太长。如果我更改它就可以[131.044922, -25.363882]了。我的坐标太长了吗？

— Guillelon 2014年

那不应该是问题。错误发生在什么坐标上？你上面提到的那些？

— Simon Zyx 2014年

是的，那是一个

— Guillelon 2014年

我用MapQuest地图尝试了这些坐标，但确实起作用了。经度-79仍在EPSG：4326（在+/- 90度内）和EPSG：3857（在+/- 85度内）的范围内。

— Simon Zyx 2014年

其在渲染器内部发生的typeerror和rangerror

— Simon Zyx 2014年

我有一个新的堆栈交换帐户，并且信誉不高，无法评论“未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'putImageData'：float参数3是无限的”。错误。发生这种情况是因为您有纬度和经度输入倒退。

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

应该：

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

万一其他人有这个问题。

— 迈克尔·金特里
source

是的，您是对的-我将相应地更新我的答案。

— Simon Zyx

仅用于浏览器：

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

— 胡格
source