GeoJSON. Een nieuw vector formaat voor web-based GIS. Bart van den Eijnden OSGIS

Transcriptie

1 GeoJSON Een nieuw vector formaat voor web-based GIS Bart van den Eijnden OSGIS

2 Inhoud JSON GeoJSON Performance: transport- en parseertijd Best practices in web-based GIS OpenLayers GeoExt Proj4JS Voorbeeld project: GEOZET

3 Over mezelf 1999 afgestudeerd Fysische Geografie Utrecht 5 jaar Geodan Sinds 2005 eenmanszaak OSGIS Gespecialiseerd in open standaarden en open source GIS Onderdeel van de OpenGeoGroep

4 Wat is JSON? JSON = JavaScript Object Notation Tekst gebaseerd Leesbaar Lichtgewicht Ondersteuning in vrijwel elke programmeertaal Meer info op:

5 JSON voorbeeld { "gemeentes": [ {"naam": "Deurne", "inwonertal": 30000}, {"naam": "Utrecht", "inwonertal": } ] }

6 JSON in meer detail Verkorte schrijfwijze voor nieuw object: {} Verkorte schrijfwijze voor nieuw array: [] Key value pairs (properties) Gebruik dubbele quote voor strings, escape middels \ dus \

7 GeoJSON Hoe encodeer ik geografische gegevens in JSON? Geometrie Feature Collectie van features Opgesteld in 2008 door een aantal bedrijven (o.a. MetaCarta, OpenGeo, Cadcorp) Wordt gebruikt in meer dan 20 projecten waaronder FME en Twitter

8 GeoJSON: geometrie types Point LineString Polygon MultiPoint MultiLineString MultiPolygon GeometryCollection

9 GeoJSON objecten type property is verplicht en bevat het geometrie type danwel Feature of FeatureCollection crs property is optioneel en bevat info over het Coordinate Reference System. Volgorde x,y(,z) bbox property is optioneel Geometrie objecten behalve de GeometryCollection dienen een coordinates property te hebben

10 GeoJSON: Point { "type": "Point", "coordinates": [100.0, 0.0] }

11 GeoJSON: LineString { "type": "LineString", "coordinates": [ [100.0, 0.0], [101.0, 1.0] ] }

12 GeoJSON: Polygon { "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ], [ [100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2] ] ] } 1e element: outerring 2e en volgende elementen: innerring

13 GeoJSON: GeometryCollection { "type": "GeometryCollection", "geometries": [ { "type": "Point", "coordinates": [100.0, 0.0] }, { "type": "LineString", "coordinates": [ [101.0, 0.0], [102.0, 1.0] ] } ] }

14 GeoJSON: real-life voorbeeld

15 Alternatieve formaten GML = Geography Markup Language = XML KML = Keyhole Markup Language = XML SVG = Scalable Vector Graphics = XML Voordeel: vaak geen transformatie nodig in de browser (Internet Explorer vanaf 9, Firefox, Safari, Chrome) EWKT = extended Well-Known Text EWKB = extended Well-Known Binary

16 Wat bepaalt de keuze? Transport-tijd Hoe groter het bestand, hoe langer het transport duurt naar de client. M.a.w. hoe kleiner de payload, hoe beter. Denk aan GZIP! Parseertijd Tijd om te renderen in de browser (eventuele transformatie)

17 Rendering Renderen van features in de browser is nu de bottleneck: paar 100 features maximaal. In 2010 komt 2D/3D hardware acceleratie in de browser: Firefox 4 Internet Explorer 9 Google Chrome Dit wordt een revolutie voor web-based GIS: native javascript gaat richting Flash!

18 Payload onderzoek Bron: Op de x-as: payload in bytes. Hoe kleiner hoe beter!

19

20 Gemeten parseertijden Gemeentekaart CBS Laat Geoserver output generen, plaats dit op een localhost Apache Gemiddelde van 5 runs Geen Internet Explorer want alleen in VMWare beschikbaar op Mac OSX, geen eerlijke vergelijking! Let op: OpenLayers gebruikt momenteel niet de native JSON parser van de browser, zie ook:

21 Parseertijden Mac OSX (ms) JSON GML Firefox Safari Chrome 6.04 Opera 10.62

22 Probeer het zelf

23 Best practices OpenLayers GeoExt Proj4JS All-in-one: OpenGeo Suite!

24 OpenLayers De-facto standaard javascript bibliotheek voor webmapping Ondersteunt vele typen lagen zoals Google Maps, Bing Maps, OpenStreetMap, WMS, WMTS, TMS, WMS-C, WFS Zeer ruime OGC ondersteuning: WMS, WFS, WFS-T, WMTS, Web Map Context, OWSContext, SLD, SOS Ondersteunt vele formaten: GML, KML, GeoJSON, GeoRSS, GPX

25 OpenLayers Beste manier om OpenLayers te leren is middels de vele examples:

26 GeoExt GeoExt koppelt OpenLayers aan Ext JS Ext JS is een dual-licensed (GPL v3 en commercieel) javascript (GUI) framework Een voorbeeld is een GeoExt.MapPanel welke een brug vormt tussen een Ext.Panel en een OpenLayers.Map GeoExt maakt de redelijk basische OpenLayers GUI tot een fancy GUI!

27 GeoExt MapPanel LegendPanel ZoomSlider Layer trees (table of content) Toolbars Interactie met de MapFish print service (PDF output)

28 GeoExt voorbeeld: Styler

29 GeoExt voorbeeld: GeoExplorer

30 GeoExt voorbeeld: GeoEditor

31 Proj4JS Javascript poort van Proj.4 (Frank Warmerdam) OpenLayers komt standaard met alleen transformaties tussen EPSG:4326 en de Google Web Mercator Bijna alle andere CRS-en zoals RD zijn beschikbaar via Proj4JS Je kan dus in je browser transformeren tussen CRS-en, maar het is natuurlijk efficiënter om dit aan de serverkant te doen

32 Voorbeeld project: GEOZET Geografische zoek- en toondienst Voor Geonovum in opdracht van ICTU (Binnenlandse zaken) Generieke viewer en geocoder interface, in eerste instantie bedoeld om bekendmakingen van o.a. gemeentes in beeld te brengen. Maakt gebruikt van jquery, Ext JS, GeoExt en OpenLayers. Accessibility is erg belangrijk!

33 GEOZET Server-side clustering op provincie, gemeente en wijk niveau (in PostGIS database) Client-side clustering voor individuele bekendmakingen wanneer deze te dicht op elkaar liggen

34 GEOZET

35 GEOZET

36 GEOZET

37 Samenvatting [1/2] GeoJSON is een encoding van geografische objecten in JSON GeoJSON is geen standaard van het Open Geospatial Consortium Payload van GeoJSON is relatief groot, maar verschillen zijn klein

38 Samenvatting [2/2] Parseertijd van JSON is normaal gesproken kleiner dan van XML, maar situatie verschilt per browser Vector rendering zou in de nieuwe generatie browsers veel sneller moeten gaan De OpenGeo Suite is een one-click installer voor een hele interessante Open Source GIS stack (PostGIS, GeoServer, GeoWebCache, OpenLayers, GeoExt)

39 Vragen?