如何从 OpenLayers 中获取地图的当前视口作为几何、边界框或 wkt？答案

【问题标题】：How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?如何从 OpenLayers 中获取地图的当前视口作为几何、边界框或 wkt？
【发布时间】：2012-01-24 14:25:09
【问题描述】：

我试图找到一些提示，我应该在哪里搜索这个主题，但我什么也没找到 - 我花了很多时间在这上面。

我还尝试从 OpenLayers 地图中获取当前显示视口的当前坐标，以仅添加当前视口的当前边界框中的这些向量。

【问题讨论】：

ol3 见stackoverflow.com/questions/22206570/…

标签： javascript openlayers latitude-longitude

【解决方案1】：

对于 OpenLayers 2：

Map.getExtent()

...将返回一个 Bounds，然后您可以使用它以多种方式获取纬度/经度坐标：http://dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html#OpenLayers.Bounds

理想情况下，您可以将向量转换为 Geometry 对象，并使用 Bounds.intersectBounds() 对照 Map.getExtent() 检查它们是否在当前视口中。

对于 OpenLayers 3：

ol.Map.getView().calculateExtent(map.getSize())

...将返回一个坐标数组，表示范围的边界框。

【讨论】：

谢谢！这很好用。我现在像这样使用它：this.map.getExtent().toGeometry().toString() 返回类似POLYGON((-8852235.9398912 -2760000,11337764.060109 -2760000,11337764.060109 11370000,-8852235.9398912 11370000,-8852235.9398912 -2760000))
我对 GIS 有点陌生，但数字 -8852235 -2760000，... 看起来不像 lat/long 值？当我得到地图的范围时，我得到了类似的结果。纬度/经度值是否在 -90/90 和 -180/180 的范围内？
这个答案帮助我解决了这个问题：stackoverflow.com/a/2607145/1359765
谢谢，我认为 openlayers 3 有一个小错误，这对我有用 map.getView().calculateExtent(map.getSize()) From this answer
在此处使用原始示例中的 transformExtent 函数：openlayers.org/en/latest/examples/layer-extent.html

【解决方案2】：

对于 openlayers 5.3。

olmap.getView().calculateExtent(olmap.getSize());

openlayers 5.3 的可运行代码如下：

（V6.5.0 有相同的API文档关于getView and getSize的使用，上面的代码也应该可以使用它。）

// import modules
const Map = ol.Map;
const View = ol.View;
const TileLayer = ol.layer.Tile;
const VectorLayer = ol.layer.Vector;
const fromLonLat = ol.proj.fromLonLat;
const OSM = ol.source.OSM;
const VectorSource = ol.source.Vector;
const Overlay = ol.Overlay;
const Style = ol.style.Style;
const Fill = ol.style.Fill;
const Text = ol.style.Text;

// basic base layer: raster
var rasterLayer = new TileLayer({
  source: new OSM()
});

// create main map with a base map
var mapcenter = [100.5330981, 13.7364029];
var olmap = new Map({
  layers: [rasterLayer] /* more layers can be added here, or later steps */ ,
  target: document.getElementById("map1"),
  view: new View({
    center: fromLonLat(mapcenter),
    zoom: 17
  })
});

// add eng-chula marker
const engchula = [100.5330981, 13.7364029];
var marker1 = new Overlay({
  position: fromLonLat(engchula),
  positioning: "center-center",
  element: document.getElementById("marker1"),
  stopEvent: false
});
// 'Eng-chula' label
var engchula1 = new Overlay({
  position: fromLonLat(engchula),
  element: document.getElementById("engchula1")
});
// add overlay(s) to 'olmap'
olmap.addOverlay(marker1);
olmap.addOverlay(engchula1);

// Demo the use of .getSize()
var sizes = olmap.getSize(); //units:pixels; columns x rows
console.log("getSize (pixels): " + sizes); //2 numbers

// get `extent` through getView()
var extent = olmap.getView().calculateExtent(olmap.getSize());
console.log("Extent, LL_x: " + extent[0]); //left
console.log("Extent, LL_y: " + extent[1]); //bottom
console.log("Extent, UR_x: " + extent[2]); //right
console.log("Extent, UR_y: " + extent[3]); //top
/*
Status:ok
*/

#map1 {
  width: 70%;
  height: 500px;
}

#marker1 {
  width: 25px;
  height: 25px;
  border: 2px solid #088;
  border-radius: 10px;
  background-color: firebrick;
  opacity: 0.75;
}

<head>
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>

<body>
  <H3>Openlayers v5.3.0 Web Map with Geojson Data</H3>
  <div id="map1" class="map"></div>
  <i>:</i>
  <p id="p1">Find &quot;<b>Eng_Chula</b>&quot;, then click it.</p>

  <div style="display: none;">
    <!-- Clickable label for Eng-Chula -->
    <a class="overlay" id="engchula1" target="_blank" href="http://eng.chula.ac.th">Eng_Chula</a>
    <div id="marker1" title="Marker1"></div>
  </div>

</body>

【讨论】：

【解决方案3】：

根据此处的答案，但如果您希望结果采用经纬度坐标。

function getBounds() {
  const extent = olMap.getView().calculateExtent(olMap.getSize())
  return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}

【讨论】：