OpenLayers 3 - 如何获取视口的坐标答案

【问题标题】：OpenLayer3 - how to get coordinates of viewportOpenLayers 3 - 如何获取视口的坐标
【发布时间】：2015-01-27 08:55:14
【问题描述】：

我有一个使用 OpenLayer3 显示的 MapQuest。我想获取视口的坐标（当前显示的地图区域）。对于整个地图，这应该是这样的：(180,90) x (-180,-90)。

但我得到了：右上角经度：37570328.14272983 右上纬度：18941707.105292957 左下经度：-37570328.14272983 左下纬度：-18941707.105292957

我有 jsFiddle：http://jsfiddle.net/0d6d6kxf/2/

（点击“获取视口坐标” 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);    
  } 
}

【问题讨论】：

标签： openlayers-3

【解决方案1】：

你快到了。

var extent = map.getView().calculateExtent(map.getSize());

这条线是正确的，但您获得的坐标是地图使用的投影 (EPSG:3857)，您需要将其转换回正常的经度/纬度 (WGS84/EPSG:4326)。

在后面加上下面一行来转换范围：

extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

正如您在创建视图时所看到的，您使用转换函数将中心坐标转换为 EPSG:3857，这是地图可以理解的格式。每当您将坐标发送到视图中时，您都需要在该投影中发送它。每当您从视图中读取数据时，都需要将其转换回您使用的投影，在本例中为 EPSG:4326。

【讨论】：