如何将地图的当前视口作为几何体、边界框或wkt从OpenLayers中获取
How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?
我试图在应该搜索这个主题的地方找到一些提示,但我什么都没找到——我花了很多时间在这上面。
我还试图从OpenLayers贴图中获取当前显示视口的当前坐标,以仅添加当前视口的当前边界框中的这些矢量。
对于OpenLayers 2:
Map.getExtent()
将返回Bounds,然后您可以使用该Bounds以多种方式获取纬度/经度坐标:http://dev.openlayers.org/apidocs/files/OpenLayers/BaseTypes/Bounds-js.html#OpenLayers.Bounds
理想情况下,您应该将矢量转换为几何体对象,并使用Bounds.contersectBounds()根据Map.getExtent()检查它们,以查看它们是否在当前视口中。
对于OpenLayers 3:
ol.Map.getView().calculateExtent(map.getSize())
将返回一个坐标数组,表示范围的边界框。
对于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="https://www.eng.chula.ac.th/th/">Eng_Chula</a>
<div id="marker1" title="Marker1"></div>
</div>
</body>
基于这里的答案,但如果您希望结果在经纬度坐标中。
function getBounds() {
const extent = olMap.getView().calculateExtent(olMap.getSize())
return transformExtent(extent, 'EPSG:3857', 'EPSG:4326')
}
相关文章:
- 上传带有XMLHttprequest的文件-多部分/表单数据中缺少边界
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- 仅在边界内时替换特定字符
- 将谷歌地图中的平移边界设置为图像覆盖
- 将边界设置为overlayImage谷歌地图
- 为什么不是't这=>边界“;这个“;到周围的范围
- 获取以屏幕像素为单位的旋转SVG元素的边界
- RegEx:在单词边界添加加号
- 我如何才能获得Facebook在边界内的位置列表
- 精灵从pixi到p2的边界多边形
- CSS 溢出边界半径鼠标事件
- WKT和开放层
- jQuery根据鼠标位置计算DIV偏移量和边界
- 世界的最大纬度和长边界 - 谷歌地图API LatLngBounds().
- 谷歌地图API地理编码器,受边界限制
- 由于找不到多部分边界,请求被拒绝
- 谷歌地图的多段线边界
- ExtJS 4.2.1-具有动态高度的边界布局
- 为什么可以't我得到了这个d3.js文本的边界框
- 如何将地图的当前视口作为几何体、边界框或wkt从OpenLayers中获取