Javascript Openlayers 3 中心地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27820784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Openlayers 3 center map
提问by TheatreOfSouls
I'm sing OpenLayers 3to display a map. I want to center the map using latLon coordinates.
I'm using the quickstart codeto begin with.
Using this code, I cannot change the center of the map. I think this has something to do with Spherical Mercator projection. Only thing is, I only have lat lon coordinates.
我正在唱OpenLayers 3来显示地图。我想使用 latLon 坐标将地图居中。我正在使用快速入门代码开始。使用此代码，我无法更改地图的中心。我认为这与Spherical Mercator projection. 唯一的问题是，我只有经纬度坐标。
Does anyone know how to center a map from openlayers v3?
有谁知道如何将 openlayers v3 中的地图居中？
回答by Ole Borgersen
You need to transform the lon/lat coordinates to the correct projection (or coordinate system) using
您需要使用以下方法将经纬度坐标转换为正确的投影（或坐标系）
var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")
Now you can set center with olCorrdinates.
现在您可以使用 olCordinates 设置中心。
Different projections has different code names. WGS84 is "normal" lon/lat and EPSG:900913 is the projection often used in web maps like google maps, openstreetmap and bing.
不同的投影有不同的代号。WGS84 是“正常”经纬度，EPSG:900913 是网络地图（如谷歌地图、openstreetmap 和 bing）中常用的投影。
I think OpenLayers 3 has built in support for transforming from WGS84/EPSG:4326 (lon/lat), but if you need to convert to or from other coordinate systems you can include the proj4js library. Openlayers will integrate with this lib and be able to do the transformations in the same way.
我认为 OpenLayers 3 内置了对从 WGS84/EPSG:4326 (lon/lat) 转换的支持，但是如果您需要在其他坐标系之间进行转换，则可以包含 proj4js 库。Openlayers 将与此库集成并能够以相同的方式进行转换。
Transform documentation http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html
转换文档 http://openlayers.org/en/v3.1.1/apidoc/ol.proj.html
Proj4 lib https://github.com/proj4js/proj4js
Proj4 库 https://github.com/proj4js/proj4js
Edit: In the example you are refering to, the center location is actually set with lon/lat.
编辑：在您引用的示例中，中心位置实际上是用 lon/lat 设置的。
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
EPSG:4326 is actually the same as WGS84 and EPSG:3857 is the same as EPSG:900913. This is very confusing. I have been there myself.
EPSG:4326 实际上与 WGS84 相同，EPSG:3857 与 EPSG:900913 相同。这是非常令人困惑的。我自己也去过那里。
You just need to change the numbers 37.41 and 8.82 to your lon/lat coordinates. If you want to change the center location after initialization you will need to use setCenter();
您只需将数字 37.41 和 8.82 更改为您的经纬度坐标。如果要在初始化后更改中心位置，则需要使用 setCenter();
map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
回答by I.G. Pascual
OpenLayers introduced ol.proj.fromLonLatand ol.proj.toLonLatfunctions on Mar. 2015.
OpenLayers于 2015 年 3 月推出ol.proj.fromLonLat并ol.proj.toLonLat发挥作用。
To center the map, you may want to use it during the initialization
要使地图居中，您可能希望在初始化期间使用它
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat])
})
or after the map has been created
或在地图创建后
map.getView().setCenter(ol.proj.fromLonLat([lon, lat]))
Although they're just wrappersof ol.proj.transform, I find them more simple to use.
虽然他们只是包装的ol.proj.transform，我发现他们使用更加简单。
The default Web Mercators are EPSG:4326and EPSG:3857.
默认的 Web 墨卡托是EPSG:4326和EPSG:3857。
Like Ole Borgersen states, WGS84is the same as EPSG:4326which is the type of Long-Lat coordinates we are used to work with.
像极了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')
回答by hoogw
depends on how you use?
取决于你如何使用？
For browser-only use :
仅供浏览器使用：
<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
对于 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
})
});
