OpenLayers 3 - Beispiel
Aus kvwmap
--Markus Hentschel (Diskussion) 16:27, 9. Nov. 2015 (CET)
OpenLayers3 funktioniert (teilweise ganz) anders als OpenLayers2. Es gibt einige neue Features, dafür aber einige alte nicht mehr. Der fest eingebaute Layer-Switcher aus OL2 fehlt z.B. ganz, ebenso die Definition von BaseLayern. Dafür muss man nun selbst sorgen.
Die Angabe eines ProxyHost, wenn die Karte auf einem anderen als dem Dienstserver läuft, scheint nicht mehr nötig.
Hier ist beispielhaft eine OpenLayers3-Karte, die ohne Änderungen so wie sie ist funktionieren sollte. Es wird dabei auf die Online-Bibliothek von OpenLayers verlinkt - das wird man in einer Produktivumgebung vielleicht anders machen.
Die Seite ist auf Grundlage der verfügbaren Beispiele aus dem Netz entstanden. Dort findet man auch noch weitere Funktionalitäten.
Das Beispiel beinhaltet einen Vektordaten-WMS (Naturschutzflächen) und einige Rasterdaten-WMS (ORKA M-V, OSM, DOP). Die Bezeichnungen layers[0], layers[1] und layers[2] sind nötig für die Layer, die als Hintergrundkarten-Layer im selbst erstellten Layerswitcher erscheinen sollen. Wenn es nur eine Hintergrundkarte geben soll, ist ein selbst erstellter Layerswitcher und damit eine spezielle Bezeichnung des Layers mit layers[0] etc. nicht nötig.
- Hinweis: Soll eine Seite via HTTPS aufgerufen werden und enthält diese Seite über HTTP verknüpfte Inhalte, so werden diese Seiten von den Browsern jetzt als nicht vertrauenswürdig angesehen und nicht mehr angezeigt. In dem Fall sind sämtliche Verknüpfungen wie hier z.B. die dienstaufrufe via HTTPS zu machen.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="description" content="Beispiel-Seite mit OpenLayers3">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>
<title>Test OL3</title>
<!-- Definition der Karte -->
<style type="text/css">
#map {
width: 800px;
height: 500px;
}
</style>
<!-- Definition des Layerswitchers -->
<style>
#toolbox {
position:absolute;
top:360px;
left:648px;
padding:3px;
border-radius: 4px;
color:#fff;
background: rgba(255, 255, 255, 0.4); z-index:100;
}
#layerswitcher {
margin:0;
padding:8px;
border-radius:4px;
background:rgba(0, 60, 136, 0.4); list-style-type:none;
}
</style>
<!-- Definition Legende -->
<style>
#legende {
margin-top: 7px;
width:800px;
border: 1px solid #cccccc;
border-radius:4px;
padding-left:3px;
padding-top:3px;
padding-bottom:10px;
font-size:12px;
}
</style>
<!-- Definition der Full-Screen-Größe -->
<style>
.map:-moz-full-screen {
height: 100%;
}
.map:-webkit-full-screen {
height: 100%;
}
.map:-ms-fullscreen {
height: 100%;
}
.map:fullscreen {
height: 100%;
}
.ol-rotate {
top: 3em;
}
</style>
<!-- Definition des Popups bei Abfragen -->
<style>
.ol-popup {
position: absolute;
background-color: #F0F8FF;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 7px;
}
.ol-popup-closer:after {
background-color: #ccccee;
content: "X";
font-weight: bold;
color: red;
}
</style>
<!-- Änderung des Frames im Popup -->
<style>
iframe {
color: rgba(51, 51, 51, 0.07);
}
</style>
<!-- Definition des Export-PNG-Buttons -->
<style>
#exportpng {
margin-left: 0px;
margin-top: 7px;
z-index: 3;
width: 150px;
border: 1px solid #CCC;
background: transparent linear-gradient(#EDF2FF 0%, #D7DDED 100%) repeat scroll 0% 0%;
line-height: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div id="map">
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
</div>
<!-- Definition der HintergrundLayer im Layerswitcher -->
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> ORKA M-V</label></li>
<li><label><input type="radio" name="layer" value="1"> OpenStreetMap</label></li>
<li><label><input type="radio" name="layer" value="2"> Luftbild</label></li>
</ul>
</div>
<div id="legende"><b>Legende:</b><br>
<img src="http://geodienste.lk-vr.de/cgi-bin/mapserv?map=/srv/www/wms/regis/kreisgrenze.map&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=regismv_kreis">
<img id="legend" src="http://geodienste.lk-vr.de/cgi-bin/mapserv?map=/srv/www/wms/naturschutz.map&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&LAYER=naturschutzgebiete">
</div>
<!-- PNG-Export-Link der Karte -->
<div id="exportpng" align="center"><a id="export-png" download="map.png">Als Bild exportieren</a></div>
<script type="text/javascript">
<!-- Funktion für den Layer-Switcher -->
function switchLayer()
{
var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
}
$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );
<!-- Definitionen für die Objektabfrage -->
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
<!------------ Layer-Definitionen ------------>
var layers = [];
<!-- Definition des WMS-Layers Naturschutzflächen -->
var wmsSourceNSF = new ol.source.ImageWMS({
url: 'http://geodienste.lk-vr.de/cgi-bin/mapserv?map=/srv/www/wms/naturschutz.map',
params: {
'LAYERS': 'naturschutzgebiete',
'VERSION': '1.1.1',
'FORMAT': 'image/png',
'TILED': true
},
serverType: 'mapserver'
});
wmsLayerNSF = new ol.layer.Image({
source: wmsSourceNSF
});
<!-- Definition des WMS-Layers Kreisgrenze -->
var wmsSourceKreisgrenze = new ol.source.ImageWMS({
url: 'http://geodienste.lk-vr.de/cgi-bin/mapserv?map=/srv/www/wms/regis/kreisgrenze.map',
params: {
'LAYERS': 'regismv_kreis',
'VERSION': '1.1.1',
'FORMAT': 'image/png',
'TILED': true
},
serverType: 'mapserver'
});
wmsLayerKreisgrenze = new ol.layer.Image({
source: wmsSourceKreisgrenze
});
<!-- Definition des ORKA-MV-Layers -->
var wmsSourceORKA = new ol.source.XYZ({
projection: 'EPSG:3857',
url: 'http://geo.sv.rostock.de/geodienste/stadtplan/tiles/1.0.0/' + 'stadtplan/EPSG3857/{z}/{x}/{y}.png',
attributions: [
new ol.Attribution({
html: '© Openstreetmap und uVGB M-V' <!-- erzeugt Copyright-Hinweis in der Zuordnung -->
})
]
});
layers[0] = new ol.layer.Tile({
source: wmsSourceORKA
});
<!-- Definition des OSM-Layers -->
layers[1] = new ol.layer.Tile({
source: new ol.source.OSM()
});
<!-- Definition des DOP-Layers -->
var wmsSourceDOP = new ol.source.ImageWMS({
url: 'http://www.geodaten-mv.de/dienste/adv_dop?language=ger',
params: {
'LAYERS': 'WMS_MV_DOP',
'VERSION': '1.1.1',
'FORMAT': 'image/png',
'TILED': true
},
attributions: [
new ol.Attribution({
html: '© GeoBasis-DE/M-V' <!-- erzeugt Copyright-Hinweis in der Zuordnung -->
})
],
serverType: 'mapserver'
});
layers[2] = new ol.layer.Image({
source: wmsSourceDOP
});
<!------------ Ende Layer-Definitionen ------------>
<!-- Definition des Bildmittelpunkts, des Zooms und der min-/max Zoomstufen -->
var view = new ol.View({
center: ol.proj.transform([12.99, 54.32], 'EPSG:4326', 'EPSG:3857'),
zoom: 9,
minZoom: 8,
maxZoom: 15
});
<!-- Definition der Maßstabsleiste -->
var scaleLineControl = new ol.control.ScaleLine();
<!-- Definition des Attribution-Button -->
var attribution = new ol.control.Attribution({
collapsible: true,
label: '©',
collapsed: true,
tipLabel: 'Zuordnungen'
});
<!-- Definition der Karte -->
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false <!-- verhindert den Standard-Attributions-Button -->
}).extend([
attribution, <!-- setzt den eigenen Attributions-Button -->
scaleLineControl, <!-- hier wird die Maßstabsleiste der map hinzugefügt -->
new ol.control.FullScreen({ <!-- bringt einen Button für die Full-Screen-Anzeige -->
tipLabel: 'Auf ganzen Bildschirm' <!-- deutscher Tooltip für den Button -->
})
]),
overlays: [overlay],
target: 'map',
layers: [layers[0], layers[1], layers[2], wmsLayerKreisgrenze, wmsLayerNSF], <!-- Definition der Layer und der Layerreihenfolge -->
view: view
});
<!-- Definition des GetFeatureInfo -->
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var viewResolution = /** @type {number} */ (view.getResolution());
var url = wmsSourceNSF.getGetFeatureInfoUrl( <!-- wenn mehrere abzufragende WMS eingebunden werden, muss das hier anders! -->
evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
content.innerHTML = '<iframe seamless src="' + url + '"></iframe>';
overlay.setPosition(coordinate);
});
<!-- Definition des PNG-Exports -->
var exportPNGElement = document.getElementById('export-png');
if ('download' in exportPNGElement) {
exportPNGElement.addEventListener('click', function(e) {
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
exportPNGElement.href = canvas.toDataURL('image/png');
});
map.renderSync();
}, false);
} else {
var info = document.getElementById('no-download');
/**
* display error message
*/
info.style.display = '';
}
</script>
</body>
</html>
