OpenLayers

Stand, Neues und Zukünftiges

Andreas Hocevar / @ahoce
Marc Jansen / @selectoid

22. März 2017, FOSSGIS 2017, Passau

Outline

• Über …
• Stand
• Neues
• Zukünftiges

Über …

Marc Jansen

jansen@terrestris.de
@marcjansen
@selectoid

• Seit 2007 bei terrestris
• Kernentwickler und PSC Mitglied GeoExt
• Kernentwickler OpenLayers
• Buchautor "OpenLayers"
• Sprecher & Trainer
  national & international
• OSGeo Foundation Charter Member

terrestris

@terrestris
@terrestrisde

• terrestris.de
• OpenSource GIS aus Bonn
• Entwicklung, Projekte & Support/Schulung
• Beratung, Planung, Implementierung & Wartung

Andreas Hocevar

ahocevar@boundlessgeo.com
@ahocevar
@ahoce

• OpenLayers core developer and steering committee member
• Consultant for Boundless

Boundless

@boundlessgeo
@boundlessgeo

• boundlessgeo.com
• Active leader in the open source community
• Has developed and supported powerful software for enterprise GIS applications since 2002

Stand

Was ist OpenLayers?

A high-performance, feature-packed library for all your mapping needs.

• OpenSource (BSD)
• JavaScript
• OSGeo Projekt

OpenLayers

• …lange Historie
  • v1.0.0, Mai 2006
  • v2.0.0, August 2006
  • v3.0.0, August 2014
  • v4.0.0, Februar 2017

OpenLayers

• Viele Daten- & Layerquellen
• Interaktionen & Steuerelemente
• Aktiv entwickelt & große Community
• Gut dokumentiert & viele Beispiele
• Universal einsetzbar

Neues

v4.0.1

Was bedeutet die 4?

• Kein kompletter rewrite
• Keine massiven API-Brüche
• Ab jetzt: Semantic versioning

Was bedeutet die 4?

• Beta: npmjs.com/package/ol
• ES6 ES2015 Module
• Hintergrund: PR 6302

// Adjusted from
// https://gist.github.com/tschaub/32a5692bedac5254da24fa3b12072f35

import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import proj from 'ol/proj';

new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: proj.fromLonLat([13.4319466, 48.5667364]),
    zoom: 14
  })
});

// That's it already…
          

import closure from 'rollup-plugin-closure-compiler-js';
import common from 'rollup-plugin-commonjs';
import node from 'rollup-plugin-node-resolve';
module.exports = {
  entry: 'main.js',
  targets: [
    {dest: 'bundle.js', format: 'es'}
  ],
  plugins: [ node(), common(),
    closure({
      compilationLevel: 'ADVANCED',
      warningLevel: 'QUIET'
    })
  ]
};
        

…auf der Kommandozeile…

$ npm run build
        

32 KB (gzip)

Neue / geänderte Features

…seit v3.17.1 (> 1600 Commits)

getZoom / setZoom

Vorher

view.setZoom(1.5);
view.getZoom(); // undefined
          

Nachher

view.setZoom(1.5);
view.getZoom(); // 1.5   ヽ(´▽`)/   Hooray!
          

Details: Issue 4333, PR 5674

Geometrien skalieren

var geom = new ol.geom.Polygon([[
    [-1, -2],
    [1, -2],
    [1, 2],
    [-1, 2],
    [-1, -2]
]]);

geom.scale(2);

geom.scale(2, 1);

geom.scale(2, 1, [-1, -2]);
          

Details: Issue 5684, PR 5685

Intersects & Within

new ol.format.WFS().writeGetFeature({
  srsName: 'EPSG:4326',
  featureTypes: ['area'],
  filter: ol.format.filter.intersects(
    'the_geom',
    new ol.geom.Polygon([[
        [10, 20],
        [10, 25],
        [15, 25],
        [15, 20],
        [10, 20]
    ]])
  )
});
          

Details: PR 5668

overlaps & Vector / VectorTile

new ol.source.Vector({
  url: 'state.geo.json',
  format: new ol.format.GeoJSON(),
  overlaps: false
})
          

Details: PR 5196

rotateWithView

Details: PR 5050

Sonstige Änderungen

• style.clone() (PR 5832)
• Freihandzeichnen nun intuitiver (PR 5970, PR 5973, PR 5975)
• CanvasGradient / CanvasPattern roteren nun mit dem View (PR 5950)

Sonstige Änderungen

• Neu ol.interaction.Extent (PR 5290)
• Closure library entfernt
• DOM Renderer entfernt

Sonstige Änderungen

• view.animate() statt beforeRender
• WebGL Vektor Support erweitert (immer noch experimentell, PR 5462)

Sonstige Änderungen

• PinchZoom & fraktionaler Zoom
• forEachFeatureAtPixel etc.:

            // Alt:
            map.forEachFeatureAtPixel(
              pixel, callback, callbackThis, layerFilterFn, layerFilterThis
            );
            map.hasFeatureAtPixel(
              pixel, layerFilterFn, layerFilterThis
            );

            // Neu:
            map.forEachFeatureAtPixel(pixel, callback.bind(callbackThis), {
              layerFilter: layerFilterFn.bind(layerFilterThis)
            });
            map.hasFeatureAtPixel(pixel, {
              layerFilter: layerFilterFn.bind(layerFilterThis)
            });
          

Zukünftiges

• Leichtere Wiederverwendbarkeit (u.a. wegen ES2015 Modulen & Co.)
• Leichtere Partizipation am Projekt
• WebGL Verbesserungen (hoffentlich)
• Canvas Performance

Vielen Dank

Fragen & Anmerkungen?

Impressum

Impressum

Autoren

Lizenz

Dieser Vortrag ist unter CC BY-SA lizensiert.

Slides, PDF, git repository