如何从 OpenLayers 中获取地图的当前视口作为几何、边界框或 wkt？
[英]How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?
问题描述
I'm trying to find some hints where I should search for this topic but I've nothing found - and I spent many hours on this.
我试图找到一些我应该搜索这个主题的提示，但我什么也没找到 - 我花了很多时间在这上面。
I'm also trying to get the current coordinates out of the current displayed viewport from the OpenLayers map to add only these vectors that are in the current bounding box of the current viewport.我还尝试从 OpenLayers 地图中获取当前显示视口的当前坐标，以仅添加当前视口的当前边界框中的这些向量。
3 个解决方案
解决方案1
24 已采纳 2012-01-24 16:43:54
For OpenLayers 2:对于 OpenLayers 2：
Map.getExtent()
...will return a Bounds, which you can then use to get the lat/long coordinates in any number of ways: http://dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html#OpenLayers.Bounds ...将返回一个边界，然后您可以使用它以多种方式获取纬度/经度坐标： http : //dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html# OpenLayers.Bounds
Ideally, you'd turn the vectors into Geometry objects and check them against Map.getExtent() using Bounds.intersectBounds() to see if they're in the current viewport.理想情况下，您可以将向量转换为 Geometry 对象，并使用 Bounds.intersectBounds() 对照 Map.getExtent() 检查它们是否在当前视口中。
For OpenLayers 3:对于 OpenLayers 3：
ol.Map.getView().calculateExtent(map.getSize())
...will return an array of coordinates, representing the bounding box of the extent. ...将返回一个坐标数组，表示范围的边界框。
解决方案2
5 2019-07-31 05:22:40
For openlayers 5.3.对于 openlayers 5.3。
olmap.getView().calculateExtent(olmap.getSize());
Runnable code for openlayers 5.3 follows: openlayers 5.3 的可运行代码如下：
(V6.5.0 has the same API document concerning the use of getView and getSize , the code above should also work with it.) （V6.5.0 有关于getView and getSize使用的相同 API 文档，上面的代码也应该使用它。）
// 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 "<b>Eng_Chula</b>", 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
0 2021-07-08 07:58:33
Based on the answers here, but if you'd like your results to be in longitude-latitude coordinates.基于此处的答案，但如果您希望结果为经纬度坐标。
function getBounds() {
const extent = olMap.getView().calculateExtent(olMap.getSize())
return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.