OpenLayers 3 - 如何获取视口坐标
OpenLayer3 - how to get coordinates of viewport
我有一个用 OpenLayer3 显示的 MapQuest。我想获取视口坐标(当前显示的地图区域)。对于整个地图,这应该是这样的:(180,90) x (-180,-90)。
但我得到了:
右上角经度:37570328.14272983
右上纬度:18941707.105292957
左下经度:-37570328.14272983
左下纬度:-18941707.105292957
我有 jsFiddle:http://jsfiddle.net/0d6d6kxf/2/
(点击"Get viewport coords" div获取当前地图坐标)
我用来获取坐标的命令是:
var extent = map.getView().calculateExtent(map.getSize());
为什么这些结果不是度数?如何获取度坐标?
JS代码:
$(document).ready(function(){
object = new QuestMapWrapper();
object.openMap();
object.getViewportCords();
});
function QuestMapWrapper()
{
//private var
var map;
var view;
//public var
this.wrapperName="QuestMapWrapper";
//methods
this.openMap = function() {
//$('#ol-viewport').show();
//$('#gmap').hide();
//set layers of one
var layers = [
new ol.layer.Tile({
style: 'Road',
source: new ol.source.MapQuest({layer: 'osm'})
})]
view = new ol.View({
//center: ol.proj.transform([20, 52.702222], 'EPSG:4326', 'EPSG:3857'),
center: ol.proj.transform([0., 0.0], 'EPSG:4326', 'EPSG:3857'),
//center: [-73.979378, 40.702222],
zoom: 1
});
map = new ol.Map({
layers: layers,
//renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: view
});
};
/** Set viewport details */
this.getViewportCords = function() {
//var extent = view.calculateExtent( map.getSize() );
var extent = map.getView().calculateExtent(map.getSize());
//var extent = map.getExtent().transform(map.projection, map.displayProjection)
var factor = 1; // coordinates must be devided by 100000 to get real coord
$('#tr-lon').text(extent[2] / factor);
$('#tr-lat').text(extent[3] / factor);
$('#dl-lon').text(extent[0] / factor);
$('#dl-lat').text(extent[1] / factor);
}
}
你快到了。
var extent = map.getView().calculateExtent(map.getSize());
这条线是正确的,但是你得到的坐标是地图使用的投影(EPSG:3857),你需要将它转换回正常lon/lat(WGS84/EPSG :4326).
在转换范围后添加以下行:
extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');
正如您在创建视图时看到的那样,您使用转换函数将中心坐标转换为 EPSG:3857,这是地图可以理解的格式。每当您将坐标发送到视图中时,您都需要在该投影中发送它。无论何时从视图中读取,都需要将其转换回您使用的投影,在本例中为 EPSG:4326.
我有一个用 OpenLayer3 显示的 MapQuest。我想获取视口坐标(当前显示的地图区域)。对于整个地图,这应该是这样的:(180,90) x (-180,-90)。
但我得到了: 右上角经度:37570328.14272983 右上纬度:18941707.105292957 左下经度:-37570328.14272983 左下纬度:-18941707.105292957
我有 jsFiddle:http://jsfiddle.net/0d6d6kxf/2/
(点击"Get viewport coords" div获取当前地图坐标)
我用来获取坐标的命令是: var extent = map.getView().calculateExtent(map.getSize());
为什么这些结果不是度数?如何获取度坐标?
JS代码:
$(document).ready(function(){
object = new QuestMapWrapper();
object.openMap();
object.getViewportCords();
});
function QuestMapWrapper()
{
//private var
var map;
var view;
//public var
this.wrapperName="QuestMapWrapper";
//methods
this.openMap = function() {
//$('#ol-viewport').show();
//$('#gmap').hide();
//set layers of one
var layers = [
new ol.layer.Tile({
style: 'Road',
source: new ol.source.MapQuest({layer: 'osm'})
})]
view = new ol.View({
//center: ol.proj.transform([20, 52.702222], 'EPSG:4326', 'EPSG:3857'),
center: ol.proj.transform([0., 0.0], 'EPSG:4326', 'EPSG:3857'),
//center: [-73.979378, 40.702222],
zoom: 1
});
map = new ol.Map({
layers: layers,
//renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: view
});
};
/** Set viewport details */
this.getViewportCords = function() {
//var extent = view.calculateExtent( map.getSize() );
var extent = map.getView().calculateExtent(map.getSize());
//var extent = map.getExtent().transform(map.projection, map.displayProjection)
var factor = 1; // coordinates must be devided by 100000 to get real coord
$('#tr-lon').text(extent[2] / factor);
$('#tr-lat').text(extent[3] / factor);
$('#dl-lon').text(extent[0] / factor);
$('#dl-lat').text(extent[1] / factor);
}
}
你快到了。
var extent = map.getView().calculateExtent(map.getSize());
这条线是正确的,但是你得到的坐标是地图使用的投影(EPSG:3857),你需要将它转换回正常lon/lat(WGS84/EPSG :4326).
在转换范围后添加以下行:
extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');
正如您在创建视图时看到的那样,您使用转换函数将中心坐标转换为 EPSG:3857,这是地图可以理解的格式。每当您将坐标发送到视图中时,您都需要在该投影中发送它。无论何时从视图中读取,都需要将其转换回您使用的投影,在本例中为 EPSG:4326.