如何从 OpenLayers 中获取地图的当前视口作为几何、边界框或 wkt？
[英]How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?
问题描述
我试图找到一些我应该搜索这个主题的提示，但我什么也没找到 - 我花了很多时间在这上面。
我还尝试从 OpenLayers 地图中获取当前显示视口的当前坐标，以仅添加当前视口的当前边界框中的这些向量。
3 个解决方案
解决方案1
24 已采纳 2012-01-24 16:43:54
对于 OpenLayers 2：
Map.getExtent()
...将返回一个边界，然后您可以使用它以多种方式获取纬度/经度坐标： 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())
...将返回一个坐标数组，表示范围的边界框。
解决方案2
5 2019-07-31 05:22:40
对于 openlayers 5.3。
olmap.getView().calculateExtent(olmap.getSize());
openlayers 5.3 的可运行代码如下：
（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
基于此处的答案，但如果您希望结果为经纬度坐标。
function getBounds() {
const extent = olMap.getView().calculateExtent(olMap.getSize())
return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}
在没有加载地图的情况下，获取给定边界框的Google Map边界？
[英]Get Google Map bounds, given a bounding box, without loading map?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.