Vergleich aktueller Open Source JS-Kartenframeworks

Transkript

1 Vergleich aktueller Open Source JS-Kartenframeworks Vergleich aktueller Open Source JS-Kartenframeworks Seite 1 / 22

2 JS-Mapping & GDI Beispiel: Schweizerische Eidgenossenschaft (geo.map.admin.ch) Vergleich aktueller Open Source JS-Kartenframeworks Seite 2 / 22

3 JS-Mapping & GDI JS-Mapping-Bibliotheken sind integraler Bestandteil von Geoportalen Kernkomponenten des Schaufensters zur GDI Großer Einfluss auf Bedienbarkeit & Nutzerakzeptanz Ladezeit & Rendering-Performance Eignung für Mobilgeräte Pflegbarkeit der Anwendung Vergleich aktueller Open Source JS-Kartenframeworks Seite 3 / 22

4 Aktuelle FOSS Lösungen OpenLayers 2 Leaflet.js OpenLayers 3 (D3.js) OpenLayers 2 Leaflet.js OpenLayers 3 D3.js Version Seit Lizenz FreeBSD MIT FreeBSD BSD Website openlayers.org/two leafletjs.com openlayers.org d3js.org Beispiele dev.openlayers.org/ examples/ leafletjs.com/exam ples.html openlayers.org/en/ v3.1.1/examples/ bl.ocks.org/mbosto ck Vergleich aktueller Open Source JS-Kartenframeworks Seite 4 / 22

5 OpenLayers 2 Info OpenLayers has been developed to further the use of geographic information of all kinds. (openlayers.org/two) Open Source Geo Spatial Foundation Project Stetige Weiterentwicklung seit Erscheinen Bestandteil vieler Anwendungen wie MapBender, GeoDjango Vergleich aktueller Open Source JS-Kartenframeworks Seite 5 / 22

6 OpenLayers 2 Info Raster- und Vektor-Rendering als DOM, SVG-Elemente VML für Browser ohne SVG-Unterstützung API zweckmäßig aber mitunter undurchsichtig Kombination von Handler & Controls Semantik von Controls (CacheRead/CacheWrite) Event Handling Feature Complete Interaktion mit OGC-Services (WMS/WFS/WMC) Wrapper für proprietäre Bibliotheken Große Anzahl von Steuerelementen und Tools ~ 200kb Vergleich aktueller Open Source JS-Kartenframeworks Seite 6 / 22

7 OpenLayers 2 OpenLayers.Control.* ArgParser Attribution Button CacheRead CacheWrite DragFeature DragPan DrawFeature EditingToolbar Geolocate GetFeature Graticule KeyboardDefaults LayerSwitcher Measure ModifyFeature MousePosition Navigation NavigationHistory NavToolbar OverviewMap Pan Panel PanPanel PanZoom PanZoomBar Permalink PinchZoom Scale ScaleLine SelectFeature SLDSelect Snapping Split TouchNavigation TransformFeature UTFGrid WMSGetFeatureInfo WMTSGetFeatureInfo Zoom ZoomBox ZoomIn ZoomOut ZoomPanel ZoomToMaxExtent Vergleich aktueller Open Source JS-Kartenframeworks Seite 7 / 22

8 OpenLayers 2 OpenLayers.Layer.* ArcGISCache.js ArcGIS93Rest ArcIMS Bing Boxes GeoRSS Google HTTPRequest Image KaMap KaMapCache MapGuide MapServer Markers OSM PointGrid PointTrack SphericalMercator Text TileCache TMS Vector WMS WMTS WorldWind XYZ Zoomify UTFGrid Vergleich aktueller Open Source JS-Kartenframeworks Seite 8 / 22

9 OpenLayers 2 Beispiel Vergleich aktueller Open Source JS-Kartenframeworks Seite 9 / 22

10 Leaflet.js Info Leaflet is an open source JavaScript library for mobile-friendly interactive maps. (leafletjs.com) Kompatibel ab Internet Explorer 7 (HTML5 + CSS3 + Fallback) Expliziter Support für mobile Endgeräte Nur ~ 34kb bei komprimierter Übertragung Vergleich aktueller Open Source JS-Kartenframeworks Seite 10 / 22

11 Leaflet.js Features Leaflet doesn't try to do everything for everyone. Instead it focuses on making the basic things work perfectly. (leafletjs.com/features.html) L.Layer.* Tile layers Markers Popups Vector layers GeoJSON layers Image overlays WMS layers Layer groups L.Control.* Zoom buttons Attribution Layer switcher Scale Interfaces IHandler ILayer IControl IProjection ICRS ca. 170 gelistete Plugins (s.a. esri-leaflet) Vergleich aktueller Open Source JS-Kartenframeworks Seite 11 / 22

12 Leaflet.js Beispiel Vergleich aktueller Open Source JS-Kartenframeworks Seite 12 / 22

13 OpenLayers 3 Info A high-performance, feature-packed library for all your mapping needs. (openlayers.org) Basierend auf HTML5-Features Canvas & WebGL (Raster-Layer) Komplette Neuentwicklung Nicht abwärtskompatibel Neu strukturierte API, strenge Namenskonventionen Vergleich aktueller Open Source JS-Kartenframeworks Seite 13 / 22

14 OpenLayers 3 Features ol.layer.* Base Group Heatmap Image Layer Tile Vector ol.source.* BingMaps Cluster FormatVector GeoJSON GPX IGC Image ImageCanvas ImageMapGuide ImageStatic ImageVector ImageWMS KML MapQuest OSM OSMXML ServerVector Source Stamen StaticVector Tile TileDebug TileImage TileJSON TileUTFGrid TileVector TileWMS TopoJSON Vector VectorEvent WMTS XYZ Zoomify Vergleich aktueller Open Source JS-Kartenframeworks Seite 14 / 22

15 OpenLayers 3 Features Bibliothek basierend auf Google Closure Tools Closure Library für DOM, Event-Handling, Klassenstruktur Closure Compiler für Advanced -Optimierung function hello(name) { alert('hello, ' + name); } hello('new user'); alert("hello, New user"); Bidirektionales Binding zu HTML-Inputs Vereinfacht Prototyping var visible = new ol.dom.input(document.getelementbyid('visible')); visible.bindto('checked', layer, 'visible'); Vergleich aktueller Open Source JS-Kartenframeworks Seite 15 / 22

16 OpenLayers 3 Features Clientseitige Bildmanipulation via WebGL Clipping Sättigung & Färbung Kontrast & Helligkeit Cesium-Integration via ol3-cesium (WebGL) Vergleich aktueller Open Source JS-Kartenframeworks Seite 16 / 22

17 OpenLayers 3 Beispiel Vergleich aktueller Open Source JS-Kartenframeworks Seite 17 / 22

18 Mapping auf Mobilgeräten OpenLayers 2 Leaflet.js OpenLayers 3 Vergleich aktueller Open Source JS-Kartenframeworks Seite 18 / 22

19 D3.js Info A JavaScript visualization library for HTML and SVG. (github.com/mbostock/d3) Dynamisches Generieren von Diagrammen Beliebige Datengrundlage (CSV, GeoJSON) Ideal für clientseitiges Rendering Säulendiagramme Höhendiagramme Voronoi Tesselation (Choroplethen) Unterstützung für Projektionen und Transformation chriszetter.com/blog/2014/06/15/building-a-voronoi-map-with-d3-and-leaflet Vergleich aktueller Open Source JS-Kartenframeworks Seite 19 / 22

20 D3.js Beispiel Vergleich aktueller Open Source JS-Kartenframeworks Seite 20 / 22

21 Fazit OpenLayers 2 weiterhin fester Bestandteil vieler Anwendungen Größter Funktionsumfang Neue Features in Zukunft unwahrscheinlich Leaflet.js Hervorragend geeignet für mobile Anwendungen Unterstützung für viele OGC Services nur via Plugins Sehr kurze Einarbeitungszeit OpenLayers 3 Sehr gute Eignung für mobile Anwendungen Großer Funktionsumfang (Services & Formate) Hohe Codequalität durch Closure Tools und Peer-Review D3.js Hohes Potential für zusätzliche Aufbereitung von Geodaten Vergleich aktueller Open Source JS-Kartenframeworks Seite 21 / 22

22 Vielen Dank für Ihre Aufmerksamkeit Beispiele: Vergleich aktueller Open Source JS-Kartenframeworks Seite 22 / 22