How to get the current viewport of the map out of OpenLayers as geometry, bounding box or wkt?
Question
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.
3 answers
solution1
24 ACCPTED 2012-01-24 16:43:54
For 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
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.
For OpenLayers 3:
ol.Map.getView().calculateExtent(map.getSize())
...will return an array of coordinates, representing the bounding box of the extent.
solution2
5 2019-07-31 05:22:40
For openlayers 5.3.
olmap.getView().calculateExtent(olmap.getSize());
Runnable code for openlayers 5.3 follows:
(V6.5.0 has the same API document concerning the use of getView and getSize , the code above should also work with it.)
// 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>
solution3
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')
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.