var map = new ol.Map({layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]});
Render tiles using XYZ, TileJSON, WMTS, MapQuest, Bing Maps, ArcGIS (new in 3.3), and more.
Support for non-square tiles (3.5). Monitor tile load events (3.3). Use a prioritized tile queue, configure tile loading priority.
Define how users interact with the map.
Default interactions include:
Controls are visual components related to the map.
Default controls:
new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'http://example.net/my.geojson'
});
KML, GeoJSON, TopoJSON, WKT, GPX, GML 2 & 3, WFS 1.1, OSMXML, ICG, Polyline, EsriJSON (new in 3.5)
Transform while parsing
Geometry simplification
Replay (maintain stroke, symbol size, and fonts)
World wrapped rendering (new in 3.5)
Pixel-based Object Detection
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'
})
}));
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
})
})
];
});
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);
}
});
map.on('postcompose', function(event) {
var context = event.vectorContext;
context.setImageStyle(imageStyle);
context.drawPointGeometry(point);
});
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
}
});
OpenLayers 3 provides various Feature Editing tools:
Simpler vector sources (3.5)
Removal of two way binding (3.5)
Removal of feature overlay (3.7)
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'
});
// Web Mercator
var source = new ol.source.OSM();
var view = new ol.View({
// Korea 2000
projection: 'EPSG:5179',
center: [14229000, 4398000],
zoom: 7
});
Funded by a Boundless client, implemented by Klokan Technologies
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);
}
})
});
Funded by Boundless clients