[英]Openlayers 3 center map
I'm sing OpenLayers 3 to display a map. 我正在唱OpenLayers 3来显示地图。 I want to center the map using latLon coordinates. 我想使用latLon坐标使地图居中。 I'm using the quickstart code to begin with. 我正在使用快速启动代码 。 Using this code, I cannot change the center of the map. 使用此代码,我无法更改地图的中心。 I think this has something to do with Spherical Mercator projection
. 我认为这与Spherical Mercator projection
。 Only thing is, I only have lat lon coordinates. 唯一的问题是,我只有lat lon坐标。
Does anyone know how to center a map from openlayers v3? 有谁知道如何从openlayers v3中心地图?
You need to transform the lon/lat coordinates to the correct projection (or coordinate system) using 您需要使用将lon / lat坐标转换为正确的投影(或坐标系)
var olCoordinates = ol.proj.transform([lon, lat],"WGS84", "EPSG:900913")
Now you can set center with olCorrdinates. 现在您可以使用olCorrdinates设置中心。
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是“普通”lon / lat和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 3内置支持从WGS84 / EPSG转换:4326(lon / lat),但是如果你需要转换到其他坐标系或从其他坐标系转换,你可以包含proj4js库。 Openlayers will integrate with this lib and be able to do the transformations in the same way. Openlayers将与此lib集成,并能够以相同的方式进行转换。
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 lib 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. EPSG:4326实际上与WGS84和EPSG相同:3857与EPSG相同:900913。 This is very confusing. 这非常令人困惑。 I have been there myself. 我自己去过那儿。
You just need to change the numbers 37.41 and 8.82 to your lon/lat coordinates. 您只需将数字37.41和8.82更改为您的lon / lat坐标。 If you want to change the center location after initialization you will need to use setCenter(); 如果要在初始化后更改中心位置,则需要使用setCenter();
map.getView().setCenter(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'))
OpenLayers introduced ol.proj.fromLonLat
and ol.proj.toLonLat
functions 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 wrappers of ol.proj.transform
, I find them more simple to use. 虽然它们只是 ol.proj.transform
包装器 , ol.proj.transform
我发现它们更易于使用。
The default Web Mercators are EPSG:4326
and EPSG:3857
. 默认的Web Mercators是EPSG:4326
和EPSG:3857
。
Like Ole Borgersen states , WGS84
is the same as EPSG:4326
which is the type of Long-Lat coordinates we are used to work with. 与Ole Borgersen所说的一样, WGS84
与EPSG:4326
相同EPSG:4326
这是我们习惯使用的Long-Lat坐标的类型。
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')
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
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.