Menu
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.
790
What projection is OpenLayers using? Every map that you'll create with OpenLayers will have a view, and every view will have a projection. As the earth is three-dimensional and round but the 2D view of a map isn't, we need a mathematical expression to represent it. Enter projections.
OpenLayers is an open source JavaScript library that renders interactive maps from map tiles and vector data. This guide shows you how to use OpenLayers and ArcGIS location services to display maps and perform operations such as data-driven visualization, geocoding, routing, demographic analysis, and spatial analysis.
OpenLayers resolutions are meters per pixel so if 10mm on paper represents 100m on the ground the resolution needed at 300 dpi is 100 / ( 10 * 300 / 25.4 )
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.
193
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="https://www.eng.chula.ac.th/th/">Eng_Chula</a>
<div id="marker1" title="Marker1"></div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
