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

Question

我试图找到一些提示,我应该搜索这个主题,但我找不到任何东西 - 我花了很多时间在这上面.

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

Answer 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())

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

Answer 2

对于 openlayers 5.3。

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

openlayers 5.3 的可运行代码如下：

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

olmap.getView().calculateExtent(olmap.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;
}