Voor een project heb ik de (layer) luchtvaartgebieden nodig die selecteerbaar zijn en de objectinformatie weergeeft net zoals in de PDOKviewer. Behoort dit tot mogelijkheden van de javascript API?
groet,
Michael Scheffel
Hallo @mikeIlent,
Ik heb net snel even wat geprobeerd, het is mogelijk om dit te doen met NLMaps.
Let niet op de code, maar na een paar minuutjes experimenteren werkt het volgende:
<!DOCTYPE html>
<html>
<head>
<title>Feature Info OpenLayers Test met NLMaps</title>
</head>
<body>
<div id="nlmaps-holder"></div>
<div id="info"></div>
<link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css">
<script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
<script src="https://rawgit.com/kadaster/nlmaps/master/dist/nlmaps.iife.js"></script>
<script>
var nlMapsHolder = document.getElementById('nlmaps-holder');
nlMapsHolder.style.height = '300px'; // Change to required height
var opts = {
style: 'standaard',
target: 'nlmaps-holder',
center: {
longitude: 5.706367,
latitude: 52.218125
},
overlay: 'drone-no-fly-zones',
marker: false,
search: true,
zoom: 11
};
var map = nlmaps.createMap(opts);
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** @type {number} */ (map.getView().getResolution());
var layers = map.getLayers().getArray();
var url = layers[1].getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
</script>
</body>
</html>
Wellicht kan je hier wat inspiratie mee opdoen.
Het stukje code wat ik heb toegevoegd is:
map.on('singleclick', function(evt) {
// Leeg het divje met het id info.
document.getElementById('info').innerHTML = '';
// Haal de resolutie van de kaart op en vraag alle lagen op van de kaart.
var viewResolution = /** @type {number} */ (map.getView().getResolution());
// Vraag een array op met alle lagen van de kaart.
var layers = map.getLayers().getArray();
// Pak de 2e laag in de array (dronenoflyzones) en pak daarvan het source object en roep vervolgens een getFeatureInfo functie aan.
var url = layers[1].getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857',{'INFO_FORMAT': 'text/html'});
// Komt er een URL terug, stop deze dan in het divje met het id info.
if (url) {
document.getElementById('info').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
}
});
Dit zorgt ervoor dat er een GetFeatureInfo verzoek naar de achterliggende service wordt gestuurd waarmee de object informatie in HTML vorm terug komt wanneer er op de kaart wordt geklikt. De functies die ik hierbij heb aangeroepen zijn van OpenLayers (OpenLayers v7.3.0 API - Class: TileWMS).
Het is dus ook mogelijk om zelf uitbreidingen te doen. API documentatie van OpenLayers kan je hier vinden: http://openlayers.org/en/latest/apidoc/
Ook kan je een andere library gebruiken. Dit kan je bovenin bij NLMaps selecteren:
Zou dit ook mogelijk zijn om op de click de longitude latitude te krijgen. Dus op het punt waar je klikt?
Ik heb na wat “klussen” het antwoord zelf gevonden.
map.on('singleclick', function (evt) {
console.info(ol.proj.toLonLat(evt.coordinate));
var coords = ol.proj.toLonLat(evt.coordinate);
var lat = coords[1];
var lon = coords[0];
var locTxt = "Latitude: " + lat + " Longitude: " + lon;
console.info(locTxt)
alert(locTxt)
}