OpenLayers 3 - Beispiel
Aus kvwmap
Version vom 9. November 2015, 16:27 Uhr von Markus Hentschel (Diskussion | Beiträge)
--Markus Hentschel (Diskussion) 16:27, 9. Nov. 2015 (CET)
OpenLayers3 funktioniert anders als OpenLayers2. Es gibt einige neue Features, dafür aber einige alte nicht mehr. Der Layer-Switcher fehlt z.B. ganz, ebenso die Definition von BaseLayern. Dafür muss man nun selbst sorgen.
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, einen Rasterdaten-WMS und einen OSM-WMS. Die Bezeichnungen layers[0] und layers[1] sind nötig für die Layer, die als Hintergrundkarten-Layer im Layerswitcher erscheinen sollen. Wenn es nur eine Hintergrundkarte geben soll, ist ein Layerswitcher und damit eine spezielle Bezeichnung des Layers mit layers[0] nicht nötig.
<!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">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<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 und der "Base-Layer" -->
<style>
#toolbox {
position:absolute;
top:380px;
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 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 Layer im Layerswitcher -->
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> OpenStreetMap</label></li>
<li><label><input type="radio" name="layer" value="1"> Luftbild</label></li>
</ul>
</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.landkreis-vorpommern-ruegen.de/cgi-bin/mapserv?map=/home/fgs/fgs/www/wms/naturschutz.map',
params: {
'LAYERS': 'naturschutzgebiete',
'VERSION': '1.1.1',
'FORMAT': 'image/png',
'TILED': true
},
serverType: 'mapserver',
crossOrigin: ''
});
wmsLayerNSF = new ol.layer.Image({
source: wmsSourceNSF
});
<!-- Definition des WMS-Layers Kreisgrenze -->
var wmsSourceKreisgrenze = new ol.source.ImageWMS({
url: 'http://geodienste.landkreis-vorpommern-ruegen.de/cgi-bin/mapserv?map=/home/fgs/fgs/www/wms/regis/kreisgrenze.map',
params: {
'LAYERS': 'regismv_kreis',
'VERSION': '1.1.1',
'FORMAT': 'image/png',
'TILED': true
},
serverType: 'mapserver',
crossOrigin: ''
});
wmsLayerKreisgrenze = new ol.layer.Image({
source: wmsSourceKreisgrenze
});
<!-- Definition des OSM-Layers -->
layers[0] = 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
},
serverType: 'mapserver'
});
layers[1] = 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], 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>
