OpenLayers

Feature Frenzy

[email protected]

[email protected]

[email protected]

Tile Sources

var map = new ol.Map({layers: [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
]});
          

Interactions

Define how users interact with the map.

Default interactions include:

• Double click zoom
• Drag pan
• Drag rotate
• Pinch rotate
• Pinch zoom
• Mousewheel zoom

Controls

Controls are visual components related to the map.

Default controls:

• Zoom
• Rotate
• Attribution

interaction and control

Vector formats

new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: 'http://example.net/my.geojson'
});
          

Vector rendering

Feature Interaction

Pixel-based Object Detection

• Feature hit detection
• UTFGrid support (new in 3.1)
• Color detection on raster and vector layers (new in 3.2)

hit detection

Styled Features (I)

layer.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.3)'
  }),
  stroke: new ol.style.Stroke({
    color: '#319FD3'
  })
}));
          

Styled Features (II)

layer.setStyle(function(feature, resolution) {
  return [
    new ol.style.Style({
      image: new ol.style.Icon({
        src: 'http://example.com/icon.png',
        scale: feature.get('magnitude') / 2
      })
    })
  ];
});
          

Styled Features (III)

layer.setStyle(new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({color: 'orange'})
  }),
  geometry: function(feature) {
    var coordinates = feature.getGeometry()
        .getCoordinates()[0];
    return new ol.geom.MultiPoint(coordinates);
  }
});
          

but wait, there's more!

Immediate Rendering

map.on('postcompose', function(event) {
  var context = event.vectorContext;
  context.setImageStyle(imageStyle);
  context.drawPointGeometry(point);
});
          

bike track

Raster Operations

var raster = new ol.source.Raster({
  sources: [imagery, landcover],
  operation: function(pixels, data) {
    // here you can run operations
    // on the input pixels and
    // return new pixel values
  }
});
          

flood fill

Feature Editing

OpenLayers 3 provides various Feature Editing tools:

• Draw point, line, polygon (and multi)
• Draw circle (new in 3.4)
• Draw regular polygon (new in 3.6)
• Modify, Translate (new in 3.9)
• Maintain Topology
• Snapping (new in 3.5)

feature editing

API refinements (I)

API refinements (II)

var source = new ol.source.GeoJSON({
  url: 'data/vectors.geojson',
  projection: 'EPSG:3857' // Why not EPSG:4326?
});
          

var source = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: 'data/vectors.geojson'
});
        

Upcoming features

Raster reprojection

// Web Mercator
var source = new ol.source.OSM();
          

var view = new ol.View({
  // Korea 2000
  projection: 'EPSG:5179',
  center: [14229000, 4398000],
  zoom: 7
});
        

Vector tiles

var url = 'tileservice/{z}/{x}/{y}.pbf';
var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tileGrid: ol.tilegrid.createXYZ(),
    tilePixelRatio: 16,
    tileUrlFunction: function(tileCoord) {
      return xyz(url, tileCoord);
    }
  })
});
          

Thanks!

http://openlayers.org/