Wenn sowohl die Daten als auch deren Ausgestalten nicht dynamisch, sondern im Grunde fix sind, kann es aus Perfomancegründen Sinn machen, dass ol3 ein Bild der Vektordaten berechnet.
Im vorherigen Beispiel wurde ein ol.layer.Vector verwendet, der ständig die Features neugerendert hat; dies ist etwa daran erkennbar, dass die Größe der Marker auch während des Zoomens konstant blieb. Dies führt zu einer sehr konsistenten aber natürlich auch aufwendigeren Darstellung.
Alternativ kann dieses ständige Neurendern während der Aninmationen mittels ol.source.ImageVector umgangen werden.
Das nächste Beispiel verwendet einen ol.layer.Image mit einer ol.source.ImageVector. Im konkreten Falle ist die Anzahl an Daten gering, so dass der Effekt vermutlich fast unmerklich ist. Im Falle von einer großen Menge weitgehend statischer Daten ist der gezeigte Ansatz vermutlich am performantesten.
Unsere Beispielkarte soll nun zunächst auf einen Stand zurückversetzt werden, in welchem die Erdbebendaten auf der Weltkarte angezeigt werden.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title>
<script src="ol3/ol.js" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
new ol.layer.Vector({
title: 'Earthquakes',
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
Tasks
Öffnen Sie die Datei map.html in einem Texteditor und fügen Sie obigen Code ein.
Speichern Sie ihre Änderungen in der Datei map.html und testen Sie das Ergebnis im Browser: http://localhost/ol3-ws/map.html
Ändern Sie dann den Vektorlayer wie folgt:
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
Reload http://localhost/ol3-ws/map.html in the browser
Bemerkung
Wenn alles korrekt ist, sehen Sie die gleichen Daten wie zuvor, selbst feature detection (aus einer Zusatzaufgabe) sollte noch funktionieren. Allerdings sollten die Daten weniger scharf gerendert werden. Effektiv haben wir Perfomance zu Gunsten der Qualität des Renderings gewonnen.
Wir werfen einen erneuten Blick auf die Erzeugung des ol.layer.Image.
new ol.layer.Image({
title: 'Earthquakes',
source: new ol.source.ImageVector({
source: new ol.source.GeoJSON({
url: 'data/layers/7day-M2.5.json'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({color: 'white'})
})
})
})
})
Wir verwenden ol.layer.Image statt ol.layer.Vector, trotzdem können wir nach wie vor, mittels ol.source.ImageVector, auf die zuvor verwendete source vom Typ ol.source.GeoJSON zurückgreifen.
Anders als zuvor wird die Ausgestaltung als style nicht dem Layer sondern der ol.source.ImageVector mitgegeben.
Zusatzaufgabe
Funktioniert unser singleclick-Handler aus dem vorherigen Abschnitt noch?
Zur Erinnerung:
Registrieren Sie eine Funktion, die bei jedem singleclick-Event, welcher auf der ol.Map gefeuert wird, die Funktion forEachFeatureAtPixel der map aufruft und gegebenenfalls weitere Erdbebeninformationen ausgibt.
