diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md
index 88f1ad372a..bd86f3b6d6 100644
--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -42,6 +42,10 @@ but with additional css:
}
```
+#### Removal of `ol.source.TileVector`
+
+With the introduction of true vector tile support, `ol.source.TileVector` becomes obsolete. Change your code to use `ol.layer.VectorTile` and `ol.source.VectorTile` instead of `ol.layer.Vector` and `ol.source.TileVector`.
+
### v3.10.0
#### `ol.layer.Layer` changes
diff --git a/examples/mapbox-vector-tiles-advanced.css b/examples/mapbox-vector-tiles-advanced.css
new file mode 100644
index 0000000000..33e90f7301
--- /dev/null
+++ b/examples/mapbox-vector-tiles-advanced.css
@@ -0,0 +1,3 @@
+.map {
+ background: #f8f4f0;
+}
diff --git a/examples/mapbox-vector-tiles-advanced.html b/examples/mapbox-vector-tiles-advanced.html
new file mode 100644
index 0000000000..0edbe9fe50
--- /dev/null
+++ b/examples/mapbox-vector-tiles-advanced.html
@@ -0,0 +1,17 @@
+---
+template: example.html
+title: Advanced Mapbox vector tiles example
+shortdesc: Example of a Mapbox vector tiles map with custom tile grid.
+docs: >
+ A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices. **Note**: No map will be visible when the access token has expired.
+tags: "mapbox, vector, tiles, mobile"
+resources:
+ - resources/mapbox-streets-v6-style.js
+cloak:
+ pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+---
+
diff --git a/examples/mapbox-vector-tiles-advanced.js b/examples/mapbox-vector-tiles-advanced.js
new file mode 100644
index 0000000000..aaa0736fcc
--- /dev/null
+++ b/examples/mapbox-vector-tiles-advanced.js
@@ -0,0 +1,73 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.proj');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+goog.require('ol.tilegrid.TileGrid');
+
+
+var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+
+// For how many zoom levels do we want to use the same vector tiles?
+// 1 means "use tiles from all zoom levels". 2 means "use the same tiles for 2
+// subsequent zoom levels".
+var reuseZoomLevels = 2;
+
+// Offset of loaded tiles from web mercator zoom level 0.
+// 0 means "At map zoom level 0, use tiles from zoom level 0". 1 means "At map
+// zoom level 0, use tiles from zoom level 1".
+var zoomOffset = 1;
+
+// Calculation of tile urls
+var resolutions = [];
+for (var z = zoomOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
+ resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
+}
+function tileUrlFunction(tileCoord) {
+ return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+ '{z}/{x}/{y}.vector.pbf?access_token=' + key)
+ .replace('{z}', String(tileCoord[0] * reuseZoomLevels + zoomOffset))
+ .replace('{x}', String(tileCoord[1]))
+ .replace('{y}', String(-tileCoord[2] - 1))
+ .replace('{a-d}', 'abcd'.substr(
+ ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
+}
+
+var map = new ol.Map({
+ layers: [
+ new ol.layer.VectorTile({
+ preload: Infinity,
+ source: new ol.source.VectorTile({
+ attributions: [new ol.Attribution({
+ html: '© Mapbox ' +
+ '© ' +
+ 'OpenStreetMap contributors '
+ })],
+ format: new ol.format.MVT(),
+ tileGrid: new ol.tilegrid.TileGrid({
+ extent: ol.proj.get('EPSG:3857').getExtent(),
+ resolutions: resolutions
+ }),
+ tilePixelRatio: 16,
+ tileUrlFunction: tileUrlFunction
+ }),
+ style: createMapboxStreetsV6Style()
+ })
+ ],
+ target: 'map',
+ view: new ol.View({
+ center: [0, 0],
+ minZoom: 1,
+ zoom: 2
+ })
+});
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()
diff --git a/examples/mapbox-vector-tiles.css b/examples/mapbox-vector-tiles.css
new file mode 100644
index 0000000000..33e90f7301
--- /dev/null
+++ b/examples/mapbox-vector-tiles.css
@@ -0,0 +1,3 @@
+.map {
+ background: #f8f4f0;
+}
diff --git a/examples/mapbox-vector-tiles.html b/examples/mapbox-vector-tiles.html
new file mode 100644
index 0000000000..27a8dc54c2
--- /dev/null
+++ b/examples/mapbox-vector-tiles.html
@@ -0,0 +1,17 @@
+---
+template: example.html
+title: Mapbox vector tiles example
+shortdesc: Example of a Mapbox vector tiles map.
+docs: >
+ A simple vector tiles map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles"
+resources:
+ - resources/mapbox-streets-v6-style.js
+cloak:
+ pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg: Your Mapbox access token from http://mapbox.com/ here
+---
+
diff --git a/examples/mapbox-vector-tiles.js b/examples/mapbox-vector-tiles.js
new file mode 100644
index 0000000000..783e2462af
--- /dev/null
+++ b/examples/mapbox-vector-tiles.js
@@ -0,0 +1,42 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+
+
+var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+
+var map = new ol.Map({
+ layers: [
+ new ol.layer.VectorTile({
+ source: new ol.source.VectorTile({
+ attributions: [new ol.Attribution({
+ html: '© Mapbox ' +
+ '© ' +
+ 'OpenStreetMap contributors '
+ })],
+ format: new ol.format.MVT(),
+ tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
+ tilePixelRatio: 16,
+ url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+ '{z}/{x}/{y}.vector.pbf?access_token=' + key
+ }),
+ style: createMapboxStreetsV6Style()
+ })
+ ],
+ target: 'map',
+ view: new ol.View({
+ center: [0, 0],
+ zoom: 2
+ })
+});
+
+// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
+// ol.style.Text are required for createMapboxStreetsV6Style()
diff --git a/examples/resources/mapbox-streets-v6-style.js b/examples/resources/mapbox-streets-v6-style.js
new file mode 100644
index 0000000000..af123f84b9
--- /dev/null
+++ b/examples/resources/mapbox-streets-v6-style.js
@@ -0,0 +1,311 @@
+// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
+// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
+
+function createMapboxStreetsV6Style() {
+ var fill = new ol.style.Fill({color: ''});
+ var stroke = new ol.style.Stroke({color: '', width: 1});
+ var polygon = new ol.style.Style({fill: fill});
+ var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
+ var line = new ol.style.Style({stroke: stroke});
+ var text = new ol.style.Style({text: new ol.style.Text({
+ text: '', fill: fill, stroke: stroke
+ })});
+ var iconCache = {};
+ function getIcon(iconName) {
+ var icon = iconCache[iconName];
+ if (!icon) {
+ icon = new ol.style.Style({image: new ol.style.Icon({
+ src: '//raw.githubusercontent.com/mapbox/maki/mb-pages/renders/' +
+ iconName + '-12.png'
+ })});
+ iconCache[iconName] = icon;
+ }
+ return icon;
+ }
+ var styles = [];
+ return function(feature, resolution) {
+ var length = 0;
+ var layer = feature.get('layer');
+ var cls = feature.get('class');
+ var type = feature.get('type');
+ var scalerank = feature.get('scalerank');
+ var labelrank = feature.get('labelrank');
+ var adminLevel = feature.get('admin_level');
+ var maritime = feature.get('maritime');
+ var disputed = feature.get('disputed');
+ var maki = feature.get('maki');
+ var geom = feature.getGeometry().getType();
+ if (layer == 'landuse' && cls == 'park') {
+ fill.setColor('#d8e8c8');
+ styles[length++] = polygon;
+ } else if (layer == 'landuse' && cls == 'cemetery') {
+ fill.setColor('#e0e4dd');
+ styles[length++] = polygon;
+ } else if (layer == 'landuse' && cls == 'hospital') {
+ fill.setColor('#fde');
+ styles[length++] = polygon;
+ } else if (layer == 'landuse' && cls == 'school') {
+ fill.setColor('#f0e8f8');
+ styles[length++] = polygon;
+ } else if (layer == 'landuse' && cls == 'wood') {
+ fill.setColor('rgb(233,238,223)');
+ styles[length++] = polygon;
+ } else if (layer == 'waterway' &&
+ cls != 'river' && cls != 'stream' && cls != 'canal') {
+ stroke.setColor('#a0c8f0');
+ stroke.setWidth(1.3);
+ styles[length++] = line;
+ } else if (layer == 'waterway' && cls == 'river') {
+ stroke.setColor('#a0c8f0');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'waterway' && (cls == 'stream' ||
+ cls == 'canal')) {
+ stroke.setColor('#a0c8f0');
+ stroke.setWidth(1.3);
+ styles[length++] = line;
+ } else if (layer == 'water') {
+ fill.setColor('#a0c8f0');
+ styles[length++] = polygon;
+ } else if (layer == 'aeroway' && geom == 'Polygon') {
+ fill.setColor('rgb(242,239,235)');
+ styles[length++] = polygon;
+ } else if (layer == 'aeroway' && geom == 'LineString' &&
+ resolution <= 76.43702828517625) {
+ stroke.setColor('#f0ede9');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'building') {
+ fill.setColor('#f2eae2');
+ stroke.setColor('#dfdbd7');
+ stroke.setWidth(1);
+ styles[length++] = strokedPolygon;
+ } else if (layer == 'tunnel' && cls == 'motorway_link') {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' && cls == 'service') {
+ stroke.setColor('#cfcdca');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' &&
+ (cls == 'street' || cls == 'street_limited')) {
+ stroke.setColor('#cfcdca');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' && cls == 'main' &&
+ resolution <= 1222.99245256282) {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' && cls == 'motorway') {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' && cls == 'path') {
+ stroke.setColor('#cba');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'tunnel' && cls == 'major_rail') {
+ stroke.setColor('#bbb');
+ stroke.setWidth(1.4);
+ styles[length++] = line;
+ } else if (layer == 'road' && cls == 'motorway_link') {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'road' && (cls == 'street' ||
+ cls == 'street_limited') && geom == 'LineString') {
+ stroke.setColor('#cfcdca');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'road' && cls == 'main' &&
+ resolution <= 1222.99245256282) {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'road' && cls == 'motorway' &&
+ resolution <= 4891.96981025128) {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'road' && cls == 'path') {
+ stroke.setColor('#cba');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'road' && cls == 'major_rail') {
+ stroke.setColor('#bbb');
+ stroke.setWidth(1.4);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'motorway_link') {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'motorway') {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'service') {
+ stroke.setColor('#cfcdca');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' &&
+ (cls == 'street' || cls == 'street_limited')) {
+ stroke.setColor('#cfcdca');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'main' &&
+ resolution <= 1222.99245256282) {
+ stroke.setColor('#e9ac77');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'path') {
+ stroke.setColor('#cba');
+ stroke.setWidth(1.2);
+ styles[length++] = line;
+ } else if (layer == 'bridge' && cls == 'major_rail') {
+ stroke.setColor('#bbb');
+ stroke.setWidth(1.4);
+ styles[length++] = line;
+ } else if (layer == 'admin' && adminLevel >= 3 && maritime === 0) {
+ stroke.setColor('#9e9cab');
+ stroke.setWidth(1);
+ styles[length++] = line;
+ } else if (layer == 'admin' && adminLevel == 2 &&
+ disputed === 0 && maritime === 0) {
+ stroke.setColor('#9e9cab');
+ stroke.setWidth(1);
+ styles[length++] = line;
+ } else if (layer == 'admin' && adminLevel == 2 &&
+ disputed === 1 && maritime === 0) {
+ stroke.setColor('#9e9cab');
+ stroke.setWidth(1);
+ styles[length++] = line;
+ } else if (layer == 'admin' && adminLevel >= 3 && maritime === 1) {
+ stroke.setColor('#a0c8f0');
+ stroke.setWidth(1);
+ styles[length++] = line;
+ } else if (layer == 'admin' && adminLevel == 2 && maritime === 1) {
+ stroke.setColor('#a0c8f0');
+ stroke.setWidth(1);
+ styles[length++] = line;
+ } else if (layer == 'country_label' && scalerank === 1) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#334');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(2);
+ styles[length++] = text;
+ } else if (layer == 'country_label' && scalerank === 2 &&
+ resolution <= 19567.87924100512) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('bold 10px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#334');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(2);
+ styles[length++] = text;
+ } else if (layer == 'country_label' && scalerank === 3 &&
+ resolution <= 9783.93962050256) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('bold 9px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#334');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(2);
+ styles[length++] = text;
+ } else if (layer == 'country_label' && scalerank === 4 &&
+ resolution <= 4891.96981025128) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('bold 8px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#334');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(2);
+ styles[length++] = text;
+ } else if (layer == 'marine_label' && labelrank === 1 &&
+ geom == 'Point') {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont(
+ 'italic 11px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#74aee9');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(0.75);
+ styles[length++] = text;
+ } else if (layer == 'marine_label' && labelrank === 2 &&
+ geom == 'Point') {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont(
+ 'italic 11px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#74aee9');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(0.75);
+ styles[length++] = text;
+ } else if (layer == 'marine_label' && labelrank === 3 &&
+ geom == 'Point') {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont(
+ 'italic 10px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#74aee9');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(0.75);
+ styles[length++] = text;
+ } else if (layer == 'marine_label' && labelrank === 4 &&
+ geom == 'Point') {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont(
+ 'italic 9px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#74aee9');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(0.75);
+ styles[length++] = text;
+ } else if (layer == 'place_label' && type == 'city' &&
+ resolution <= 1222.99245256282) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#333');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(1.2);
+ styles[length++] = text;
+ } else if (layer == 'place_label' && type == 'town' &&
+ resolution <= 305.748113140705) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#333');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(1.2);
+ styles[length++] = text;
+ } else if (layer == 'place_label' && type == 'village' &&
+ resolution <= 38.21851414258813) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
+ fill.setColor('#333');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(1.2);
+ styles[length++] = text;
+ } else if (layer == 'place_label' &&
+ resolution <= 19.109257071294063 && (type == 'hamlet' ||
+ type == 'suburb' || type == 'neighbourhood')) {
+ text.getText().setText(feature.get('name_en'));
+ text.getText().setFont('bold 9px "Arial Narrow"');
+ fill.setColor('#633');
+ stroke.setColor('rgba(255,255,255,0.8)');
+ stroke.setWidth(1.2);
+ styles[length++] = text;
+ } else if (layer == 'poi_label' && resolution <= 19.109257071294063 &&
+ scalerank == 1 && maki !== 'marker') {
+ styles[length++] = getIcon(maki);
+ } else if (layer == 'poi_label' && resolution <= 9.554628535647032 &&
+ scalerank == 2 && maki !== 'marker') {
+ styles[length++] = getIcon(maki);
+ } else if (layer == 'poi_label' && resolution <= 4.777314267823516 &&
+ scalerank == 3 && maki !== 'marker') {
+ styles[length++] = getIcon(maki);
+ } else if (layer == 'poi_label' && resolution <= 2.388657133911758 &&
+ scalerank == 4 && maki !== 'marker') {
+ styles[length++] = getIcon(maki);
+ } else if (layer == 'poi_label' && resolution <= 1.194328566955879 &&
+ scalerank >= 5 && maki !== 'marker') {
+ styles[length++] = getIcon(maki);
+ }
+ styles.length = length;
+ return styles;
+ };
+}
diff --git a/examples/tile-vector.css b/examples/tile-vector.css
deleted file mode 100644
index e038ad375e..0000000000
--- a/examples/tile-vector.css
+++ /dev/null
@@ -1,4 +0,0 @@
- #map {
- max-width: 600px;
- margin: 0 auto;
- }
\ No newline at end of file
diff --git a/examples/tile-vector.html b/examples/tile-vector.html
deleted file mode 100644
index 3fa660c722..0000000000
--- a/examples/tile-vector.html
+++ /dev/null
@@ -1,23 +0,0 @@
----
-template: example.html
-title: Tile vector example
-shortdesc: Example of vector tiles from openstreetmap.us.
-docs: >
- Example of vector tiles from openstreetmap.us.
-tags: "custom, control"
----
-
-
- Warning Map is becoming unresponsive with too many layers.
-
-
- Layers
-
diff --git a/examples/tile-vector.js b/examples/tile-vector.js
deleted file mode 100644
index 40644545fd..0000000000
--- a/examples/tile-vector.js
+++ /dev/null
@@ -1,168 +0,0 @@
-goog.require('ol.Map');
-goog.require('ol.View');
-goog.require('ol.format.TopoJSON');
-goog.require('ol.layer.Vector');
-goog.require('ol.proj');
-goog.require('ol.source.TileVector');
-goog.require('ol.style.Fill');
-goog.require('ol.style.Stroke');
-goog.require('ol.style.Style');
-
-var waterLayer = new ol.layer.Vector({
- source: new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- projection: 'EPSG:3857',
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- url: 'http://{a-c}.tile.openstreetmap.us/' +
- 'vectiles-water-areas/{z}/{x}/{y}.topojson'
- }),
- style: new ol.style.Style({
- fill: new ol.style.Fill({
- color: '#9db9e8'
- })
- })
-});
-
-var roadStyleCache = {};
-var roadLayer = new ol.layer.Vector({
- source: new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- projection: 'EPSG:3857',
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- url: 'http://{a-c}.tile.openstreetmap.us/' +
- 'vectiles-highroad/{z}/{x}/{y}.topojson'
- }),
- style: function(feature, resolution) {
- var kind = feature.get('kind');
- var railway = feature.get('railway');
- var sort_key = feature.get('sort_key');
- var styleKey = kind + '/' + railway + '/' + sort_key;
- var styleArray = roadStyleCache[styleKey];
- if (!styleArray) {
- var color, width;
- if (railway) {
- color = '#7de';
- width = 1;
- } else {
- color = {
- 'major_road': '#776',
- 'minor_road': '#ccb',
- 'highway': '#f39'
- }[kind];
- width = kind == 'highway' ? 1.5 : 1;
- }
- styleArray = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: color,
- width: width
- }),
- zIndex: sort_key
- })];
- roadStyleCache[styleKey] = styleArray;
- }
- return styleArray;
- }
-});
-
-var buildingStyle = [
- new ol.style.Style({
- fill: new ol.style.Fill({
- color: '#666',
- opacity: 0.4
- }),
- stroke: new ol.style.Stroke({
- color: '#444',
- width: 1
- })
- })
-];
-var buildingLayer = new ol.layer.Vector({
- source: new ol.source.TileVector({
- format: new ol.format.TopoJSON({
- defaultProjection: 'EPSG:4326'
- }),
- projection: 'EPSG:3857',
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- url: 'http://{a-c}.tile.openstreetmap.us/' +
- 'vectiles-buildings/{z}/{x}/{y}.topojson'
- }),
- visible: false,
- style: function(f, resolution) {
- return (resolution < 10) ? buildingStyle : [];
- }
-});
-
-var landuseStyleCache = {};
-var landuseLayer = new ol.layer.Vector({
- source: new ol.source.TileVector({
- format: new ol.format.TopoJSON({
- defaultProjection: 'EPSG:4326'
- }),
- projection: 'EPSG:3857',
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- url: 'http://{a-c}.tile.openstreetmap.us/' +
- 'vectiles-land-usages/{z}/{x}/{y}.topojson'
- }),
- visible: false,
- style: function(feature, resolution) {
- var kind = feature.get('kind');
- var styleKey = kind;
- var styleArray = landuseStyleCache[styleKey];
- if (!styleArray) {
- var color, width;
- color = {
- 'parking': '#ddd',
- 'industrial': '#aaa',
- 'urban area': '#aaa',
- 'park': '#76C759',
- 'school': '#DA10E7',
- 'garden': '#76C759',
- 'pitch': '#D58F8D',
- 'scrub': '#3E7D28',
- 'residential': '#4C9ED9'
- }[kind];
- width = kind == 'highway' ? 1.5 : 1;
- styleArray = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: color,
- width: width
- }),
- fill: new ol.style.Fill({
- color: color,
- opacity: 0.5
- })
- })];
- landuseStyleCache[styleKey] = styleArray;
- }
- return styleArray;
- }
-});
-
-var map = new ol.Map({
- layers: [landuseLayer, buildingLayer, waterLayer, roadLayer],
- renderer: 'canvas',
- target: document.getElementById('map'),
- view: new ol.View({
- center: ol.proj.fromLonLat([-74.0064, 40.7142]),
- maxZoom: 19,
- zoom: 15
- })
-});
-
-$('input[type=checkbox]').on('change', function() {
- var layer = {
- landuse: landuseLayer,
- buildings: buildingLayer,
- water: waterLayer,
- roads: roadLayer
- }[$(this).attr('id')];
- layer.setVisible(!layer.getVisible());
-});
diff --git a/externs/example.js b/externs/example.js
index 5f114e6387..5fcec4903a 100644
--- a/externs/example.js
+++ b/externs/example.js
@@ -9,3 +9,10 @@ var common;
* @return {string} Renderer type.
*/
common.getRendererFromQueryString = function() {};
+
+
+/**
+ * @return {function((ol.Feature|ol.render.Feature), number):
+ * Array.}
+ */
+var createMapboxStreetsV6Style = function() {};
diff --git a/externs/olx.js b/externs/olx.js
index eef86f69d0..36d2bd800e 100644
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -1685,6 +1685,57 @@ olx.format.EsriJSONOptions;
olx.format.EsriJSONOptions.prototype.geometryName;
+/**
+ * @typedef {{featureClass: (function((ol.geom.Geometry|Object.)=)|
+ * function(ol.geom.GeometryType,Array.,
+ * (Array.|Array.>),Object.)|
+ * undefined),
+ * geometryName: (string|undefined),
+ * layers: (Array.|undefined),
+ * layerName: (string|undefined)}}
+ * @api
+ */
+olx.format.MVTOptions;
+
+
+/**
+ * Class for features returned by {@link ol.format.MVT#readFeatures}. Set to
+ * {@link ol.Feature} to get full editing and geometry support at the cost of
+ * decreased rendering performance. The default is {@link ol.render.Feature},
+ * which is optimized for rendering and hit detection.
+ * @type {undefined|function((ol.geom.Geometry|Object.)=)|
+ * function(ol.geom.GeometryType,Array.,
+ * (Array.|Array.>),Object.)}
+ * @api
+ */
+olx.format.MVTOptions.prototype.featureClass;
+
+
+/**
+ * Geometry name to use when creating features. Default is 'geometry'.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.geometryName;
+
+
+/**
+ * Name of the feature attribute that holds the layer name. Default is 'layer'.
+ * @type {string|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.layerName;
+
+
+/**
+ * Layers to read features from. If not provided, features will be read from all
+ * layers.
+ * @type {Array.|undefined}
+ * @api
+ */
+olx.format.MVTOptions.prototype.layers;
+
+
/**
* @typedef {{factor: (number|undefined),
* geometryLayout: (ol.geom.GeometryLayout|undefined)}}
@@ -3599,6 +3650,133 @@ olx.layer.VectorOptions.prototype.updateWhileInteracting;
olx.layer.VectorOptions.prototype.visible;
+/**
+ * @typedef {{extent: (ol.Extent|undefined),
+ * map: (ol.Map|undefined),
+ * minResolution: (number|undefined),
+ * maxResolution: (number|undefined),
+ * opacity: (number|undefined),
+ * renderBuffer: (number|undefined),
+ * renderOrder: (function(ol.Feature, ol.Feature):number|undefined),
+ * source: (ol.source.VectorTile|undefined),
+ * style: (ol.style.Style|Array.|ol.style.StyleFunction|undefined),
+ * updateWhileAnimating: (boolean|undefined),
+ * updateWhileInteracting: (boolean|undefined),
+ * visible: (boolean|undefined)}}
+ * @api
+ */
+olx.layer.VectorTileOptions;
+
+
+/**
+ * The buffer around the viewport extent used by the renderer when getting
+ * features from the vector source for the rendering or hit-detection.
+ * Recommended value: the size of the largest symbol, line width or label.
+ * Default is 100 pixels.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.renderBuffer;
+
+
+/**
+ * Render order. Function to be used when sorting features before rendering. By
+ * default features are drawn in the order that they are created.
+ * @type {function(ol.Feature, ol.Feature):number|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.renderOrder;
+
+
+/**
+ * Sets the layer as overlay on a map. The map will not manage this layer in its
+ * layers collection, and the layer will be rendered on top. This is useful for
+ * temporary layers. The standard way to add a layer to a map and have it
+ * managed by the map is to use {@link ol.Map#addLayer}.
+ * @type {ol.Map|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.map;
+
+
+/**
+ * The bounding extent for layer rendering. The layer will not be rendered
+ * outside of this extent.
+ * @type {ol.Extent|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.extent;
+
+
+/**
+ * The minimum resolution (inclusive) at which this layer will be visible.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.minResolution;
+
+
+/**
+ * The maximum resolution (exclusive) below which this layer will be visible.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.maxResolution;
+
+
+/**
+ * Opacity. 0-1. Default is `1`.
+ * @type {number|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.opacity;
+
+
+/**
+ * Source.
+ * @type {ol.source.VectorTile|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.source;
+
+
+/**
+ * Layer style. See {@link ol.style} for default style which will be used if
+ * this is not defined.
+ * @type {ol.style.Style|Array.|ol.style.StyleFunction|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.style;
+
+
+/**
+ * When set to `true`, feature batches will be recreated during animations.
+ * This means that no vectors will be shown clipped, but the setting will have a
+ * performance impact for large amounts of vector data. When set to `false`,
+ * batches will be recreated when no animation is active. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.updateWhileAnimating;
+
+
+/**
+ * When set to `true`, feature batches will be recreated during interactions.
+ * See also `updateWhileAnimating`. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.layer.VectorTileOptions.prototype.updateWhileInteracting;
+
+
+/**
+ * Visibility. Default is `true` (visible).
+ * @type {boolean|undefined}
+ * @api stable
+ */
+olx.layer.VectorTileOptions.prototype.visible;
+
+
/**
* Namespace.
* @type {Object}
@@ -3798,6 +3976,8 @@ olx.source.TileUTFGridOptions.prototype.url;
* tileLoadFunction: (ol.TileLoadFunctionType|undefined),
* tilePixelRatio: (number|undefined),
* tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ * url: (string|undefined),
+ * urls: (Array.|undefined),
* wrapX: (boolean|undefined)}}
* @api
*/
@@ -3910,6 +4090,24 @@ olx.source.TileImageOptions.prototype.tilePixelRatio;
olx.source.TileImageOptions.prototype.tileUrlFunction;
+/**
+ * URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
+ * @type {string|undefined}
+ * @api stable
+ */
+olx.source.TileImageOptions.prototype.url;
+
+
+/**
+ * An array of URL templates.
+ * @type {Array.|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.urls;
+
+
/**
* Whether to wrap the world horizontally. The default, `undefined`, is to
* request out-of-bounds tiles from the server. When set to `false`, only one
@@ -3923,33 +4121,42 @@ olx.source.TileImageOptions.prototype.wrapX;
/**
* @typedef {{attributions: (Array.|undefined),
- * format: (ol.format.Feature|undefined),
- * logo: (string|olx.LogoOptions|undefined),
- * tileGrid: ol.tilegrid.TileGrid,
- * tileUrlFunction: (ol.TileUrlFunctionType|undefined),
- * tileLoadFunction: (ol.TileVectorLoadFunctionType|undefined),
- * url: (string|undefined),
- * urls: (Array.|undefined),
- * wrapX: (boolean|undefined)}}
+ * format: (ol.format.Feature|undefined),
+ * logo: (string|olx.LogoOptions|undefined),
+ * opaque: (boolean|undefined),
+ * projection: ol.proj.ProjectionLike,
+ * state: (ol.source.State|string|undefined),
+ * tileClass: (function(new: ol.VectorTile, ol.TileCoord,
+ * ol.TileState, string, ol.format.Feature,
+ * ol.TileLoadFunctionType)|undefined),
+ * tileGrid: (ol.tilegrid.TileGrid|undefined),
+ * tileLoadFunction: (ol.TileLoadFunctionType|undefined),
+ * tilePixelRatio: (number|undefined),
+ * tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ * url: (string|undefined),
+ * urls: (Array.|undefined),
+ * wrapX: (boolean|undefined)}}
* @api
*/
-olx.source.TileVectorOptions;
+olx.source.VectorTileOptions;
+/**
/**
* Attributions.
* @type {Array.|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.attributions;
+olx.source.VectorTileOptions.prototype.attributions;
/**
- * Format. Required unless tileLoadFunction is used.
+ * Feature format for tiles. Used and required by the default
+ * `tileLoadFunction`.
* @type {ol.format.Feature|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.format;
+olx.source.VectorTileOptions.prototype.format;
/**
@@ -3957,42 +4164,86 @@ olx.source.TileVectorOptions.prototype.format;
* @type {string|olx.LogoOptions|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.logo;
+olx.source.VectorTileOptions.prototype.logo;
+
+
+/**
+ * Whether the layer is opaque.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.opaque;
+
+
+/**
+ * Projection.
+ * @type {ol.proj.ProjectionLike}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.projection;
+
+
+/**
+ * Source state.
+ * @type {ol.source.State|string|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.state;
+
+
+/**
+ * Class used to instantiate image tiles. Default is {@link ol.VectorTile}.
+ * @type {function(new: ol.VectorTile, ol.TileCoord,
+ * ol.TileState, string, ol.format.Feature,
+ * ol.TileLoadFunctionType)|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tileClass;
/**
* Tile grid.
- * @type {ol.tilegrid.TileGrid}
+ * @type {ol.tilegrid.TileGrid|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.tileGrid;
+olx.source.VectorTileOptions.prototype.tileGrid;
+
+
+/**
+ * Optional function to load a tile given a URL.
+ * @type {ol.TileLoadFunctionType|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tileLoadFunction;
+
+
+/**
+ * The pixel ratio used by the tile service. For example, if the tile
+ * service advertizes 256px by 256px tiles but actually sends 512px
+ * by 512px tiles (for retina/hidpi devices) then `tilePixelRatio`
+ * should be set to `2`. Default is `1`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.tilePixelRatio;
/**
* Optional function to get tile URL given a tile coordinate and the projection.
- * Required if url or urls are not provided.
* @type {ol.TileUrlFunctionType|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.tileUrlFunction;
-
-
-/**
- * Optional function to override the default loading and format parsing behaviour.
- * If this option is used format is ignored and the provided function will be
- * responsible for data retrieval and transformation into features.
- * @type {ol.TileVectorLoadFunctionType|undefined}
- * @api
- */
-olx.source.TileVectorOptions.prototype.tileLoadFunction;
+olx.source.VectorTileOptions.prototype.tileUrlFunction;
/**
* URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
+ * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be
+ * used instead of defining each one separately in the `urls` option.
* @type {string|undefined}
- * @api
+ * @api stable
*/
-olx.source.TileVectorOptions.prototype.url;
+olx.source.VectorTileOptions.prototype.url;
/**
@@ -4000,17 +4251,17 @@ olx.source.TileVectorOptions.prototype.url;
* @type {Array.|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.urls;
+olx.source.VectorTileOptions.prototype.urls;
/**
- * Wrap the world horizontally. Default is `true`. For vector editing across the
- * -180° and 180° meridians to work properly, this should be set to `false`. The
- * resulting geometry coordinates will then exceed the world bounds.
+ * Whether to wrap the world horizontally. When set to `false`, only one world
+ * will be rendered. When set to `true`, tiles will be wrapped horizontally to
+ * render multiple worlds. Default is `true`.
* @type {boolean|undefined}
* @api
*/
-olx.source.TileVectorOptions.prototype.wrapX;
+olx.source.VectorTileOptions.prototype.wrapX;
/**
diff --git a/package.json b/package.json
index bf323b85ae..20c1e81495 100644
--- a/package.json
+++ b/package.json
@@ -38,9 +38,11 @@
"metalsmith": "1.6.0",
"metalsmith-templates": "0.7.0",
"nomnom": "1.8.0",
+ "pbf": "1.3.5",
"pixelworks": "1.0.0",
"rbush": "1.3.5",
"temp": "0.8.1",
+ "vector-tile": "1.1.3",
"walk": "2.3.4"
},
"devDependencies": {
@@ -64,6 +66,8 @@
},
"ext": [
"rbush",
- {"module": "pixelworks", "browserify": true}
+ {"module": "pbf", "browserify": true},
+ {"module": "pixelworks", "browserify": true},
+ {"module": "vector-tile", "name": "vectortile", "browserify": true}
]
}
diff --git a/src/ol/featureloader.js b/src/ol/featureloader.js
index 0450108f19..f3659a8dc7 100644
--- a/src/ol/featureloader.js
+++ b/src/ol/featureloader.js
@@ -7,6 +7,7 @@ goog.require('goog.events');
goog.require('goog.net.EventType');
goog.require('goog.net.XhrIo');
goog.require('goog.net.XhrIo.ResponseType');
+goog.require('ol.TileState');
goog.require('ol.format.FormatType');
goog.require('ol.xml');
@@ -46,22 +47,28 @@ ol.FeatureUrlFunction;
/**
* @param {string|ol.FeatureUrlFunction} url Feature URL service.
* @param {ol.format.Feature} format Feature format.
- * @param {function(this:ol.source.Vector, Array.)} success
- * Function called with the loaded features. Called with the vector
+ * @param {function(this:ol.VectorTile, Array., ol.proj.Projection)|function(this:ol.source.Vector, Array.)} success
+ * Function called with the loaded features and optionally with the data
+ * projection. Called with the vector tile or source as `this`.
+ * @param {function(this:ol.VectorTile)|function(this:ol.source.Vector)} failure
+ * Function called when loading failed. Called with the vector tile or
* source as `this`.
* @return {ol.FeatureLoader} The feature loader.
*/
-ol.featureloader.loadFeaturesXhr = function(url, format, success) {
+ol.featureloader.loadFeaturesXhr = function(url, format, success, failure) {
return (
/**
* @param {ol.Extent} extent Extent.
* @param {number} resolution Resolution.
* @param {ol.proj.Projection} projection Projection.
- * @this {ol.source.Vector}
+ * @this {ol.source.Vector|ol.VectorTile}
*/
function(extent, resolution, projection) {
var xhrIo = new goog.net.XhrIo();
- xhrIo.setResponseType(goog.net.XhrIo.ResponseType.TEXT);
+ xhrIo.setResponseType(
+ format.getType() == ol.format.FormatType.ARRAY_BUFFER ?
+ goog.net.XhrIo.ResponseType.ARRAY_BUFFER :
+ goog.net.XhrIo.ResponseType.TEXT);
goog.events.listen(xhrIo, goog.net.EventType.COMPLETE,
/**
* @param {Event} event Event.
@@ -87,18 +94,24 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) {
if (!source) {
source = ol.xml.parse(xhrIo.getResponseText());
}
+ } else if (type == ol.format.FormatType.ARRAY_BUFFER) {
+ source = xhrIo.getResponse();
} else {
goog.asserts.fail('unexpected format type');
}
if (source) {
var features = format.readFeatures(source,
{featureProjection: projection});
- success.call(this, features);
+ if (ol.ENABLE_VECTOR_TILE && success.length == 2) {
+ success.call(this, features, format.readProjection(source));
+ } else {
+ success.call(this, features);
+ }
} else {
goog.asserts.fail('undefined or null source');
}
} else {
- // FIXME
+ failure.call(this);
}
goog.dispose(xhrIo);
}, false, this);
@@ -112,6 +125,35 @@ ol.featureloader.loadFeaturesXhr = function(url, format, success) {
};
+/**
+ * Create an XHR feature loader for a `url` and `format`. The feature loader
+ * loads features (with XHR), parses the features, and adds them to the
+ * vector tile.
+ * @param {string|ol.FeatureUrlFunction} url Feature URL service.
+ * @param {ol.format.Feature} format Feature format.
+ * @return {ol.FeatureLoader} The feature loader.
+ * @api
+ */
+ol.featureloader.tile = function(url, format) {
+ return ol.featureloader.loadFeaturesXhr(url, format,
+ /**
+ * @param {Array.} features The loaded features.
+ * @param {ol.proj.Projection} projection Data projection.
+ * @this {ol.VectorTile}
+ */
+ function(features, projection) {
+ this.setProjection(projection);
+ this.setFeatures(features);
+ },
+ /**
+ * @this {ol.VectorTile}
+ */
+ function() {
+ this.setState(ol.TileState.ERROR);
+ });
+};
+
+
/**
* Create an XHR feature loader for a `url` and `format`. The feature loader
* loads features (with XHR), parses the features, and adds them to the
@@ -129,5 +171,5 @@ ol.featureloader.xhr = function(url, format) {
*/
function(features) {
this.addFeatures(features);
- });
+ }, /* FIXME handle error */ ol.nullFunction);
};
diff --git a/src/ol/format/featureformat.js b/src/ol/format/featureformat.js
index 59d0c77943..419f3376e8 100644
--- a/src/ol/format/featureformat.js
+++ b/src/ol/format/featureformat.js
@@ -24,6 +24,7 @@ ol.format.Feature = function() {
* @type {ol.proj.Projection}
*/
this.defaultDataProjection = null;
+
};
@@ -95,7 +96,7 @@ ol.format.Feature.prototype.readFeature = goog.abstractMethod;
/**
* Read all features from a source.
*
- * @param {Document|Node|Object|string} source Source.
+ * @param {Document|Node|ArrayBuffer|Object|string} source Source.
* @param {olx.format.ReadOptions=} opt_options Read options.
* @return {Array.} Features.
*/
diff --git a/src/ol/format/format.js b/src/ol/format/format.js
index e0cca0fdae..3fa3586e3f 100644
--- a/src/ol/format/format.js
+++ b/src/ol/format/format.js
@@ -5,6 +5,7 @@ goog.provide('ol.format.FormatType');
* @enum {string}
*/
ol.format.FormatType = {
+ ARRAY_BUFFER: 'arraybuffer',
JSON: 'json',
TEXT: 'text',
XML: 'xml'
diff --git a/src/ol/format/mvtformat.js b/src/ol/format/mvtformat.js
new file mode 100644
index 0000000000..f625c0ed2b
--- /dev/null
+++ b/src/ol/format/mvtformat.js
@@ -0,0 +1,259 @@
+//FIXME Implement projection handling
+
+goog.provide('ol.format.MVT');
+
+goog.require('goog.asserts');
+goog.require('ol.Feature');
+goog.require('ol.ext.pbf');
+goog.require('ol.ext.vectortile');
+goog.require('ol.format.Feature');
+goog.require('ol.format.FormatType');
+goog.require('ol.geom.Geometry');
+goog.require('ol.geom.GeometryLayout');
+goog.require('ol.geom.GeometryType');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
+goog.require('ol.geom.MultiPoint');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
+goog.require('ol.proj');
+goog.require('ol.proj.Projection');
+goog.require('ol.proj.Units');
+goog.require('ol.render.Feature');
+
+
+
+/**
+ * @classdesc
+ * Feature format for reading data in the Mapbox MVT format.
+ *
+ * @constructor
+ * @extends {ol.format.Feature}
+ * @param {olx.format.MVTOptions=} opt_options Options.
+ * @api
+ */
+ol.format.MVT = function(opt_options) {
+
+ goog.base(this);
+
+ var options = opt_options ? opt_options : {};
+
+ /**
+ * @type {ol.proj.Projection}
+ */
+ this.defaultDataProjection = new ol.proj.Projection({
+ code: 'EPSG:3857',
+ units: ol.proj.Units.TILE_PIXELS
+ });
+
+ /**
+ * @private
+ * @type {function((ol.geom.Geometry|Object.)=)|
+ * function(ol.geom.GeometryType,Array.,
+ * (Array.|Array.>),Object.)}
+ */
+ this.featureClass_ = options.featureClass ?
+ options.featureClass : ol.render.Feature;
+
+ /**
+ * @private
+ * @type {string}
+ */
+ this.geometryName_ = options.geometryName ?
+ options.geometryName : 'geometry';
+
+ /**
+ * @private
+ * @type {string}
+ */
+ this.layerName_ = options.layerName ? options.layerName : 'layer';
+
+ /**
+ * @private
+ * @type {Array.}
+ */
+ this.layers_ = options.layers ? options.layers : null;
+
+};
+goog.inherits(ol.format.MVT, ol.format.Feature);
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.getType = function() {
+ return ol.format.FormatType.ARRAY_BUFFER;
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @param {string} layer Layer.
+ * @param {olx.format.ReadOptions=} opt_options Read options.
+ * @return {ol.Feature} Feature.
+ */
+ol.format.MVT.prototype.readFeature_ = function(
+ rawFeature, layer, opt_options) {
+ var feature = new this.featureClass_();
+ var values = rawFeature.properties;
+ values[this.layerName_] = layer;
+ var geometry = ol.format.Feature.transformWithOptions(
+ ol.format.MVT.readGeometry_(rawFeature), false,
+ this.adaptOptions(opt_options));
+ if (geometry) {
+ goog.asserts.assertInstanceof(geometry, ol.geom.Geometry);
+ values[this.geometryName_] = geometry;
+ }
+ feature.setProperties(values);
+ feature.setGeometryName(this.geometryName_);
+ return feature;
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @param {string} layer Layer.
+ * @return {ol.render.Feature} Feature.
+ */
+ol.format.MVT.prototype.readRenderFeature_ = function(rawFeature, layer) {
+ var coords = rawFeature.loadGeometry();
+ var ends = [];
+ var flatCoordinates = [];
+ ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
+
+ var type = rawFeature.type;
+ /** @type {ol.geom.GeometryType} */
+ var geometryType;
+ if (type === 1) {
+ geometryType = coords.length === 1 ?
+ ol.geom.GeometryType.POINT : ol.geom.GeometryType.MULTI_POINT;
+ } else if (type === 2) {
+ if (coords.length === 1) {
+ geometryType = ol.geom.GeometryType.LINE_STRING;
+ } else {
+ geometryType = ol.geom.GeometryType.MULTI_LINE_STRING;
+ }
+ } else if (type === 3) {
+ geometryType = ol.geom.GeometryType.POLYGON;
+ }
+
+ var values = rawFeature.properties;
+ values[this.layerName_] = layer;
+
+ return new this.featureClass_(geometryType, flatCoordinates, ends, values);
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.readFeatures = function(source, opt_options) {
+ goog.asserts.assertInstanceof(source, ArrayBuffer);
+
+ var layers = this.layers_;
+
+ var pbf = new ol.ext.pbf(source);
+ var tile = new ol.ext.vectortile.VectorTile(pbf);
+ var features = [];
+ var featureClass = this.featureClass_;
+ var layer, feature;
+ for (var name in tile.layers) {
+ if (layers && layers.indexOf(name) == -1) {
+ continue;
+ }
+ layer = tile.layers[name];
+
+ for (var i = 0, ii = layer.length; i < ii; ++i) {
+ if (featureClass === ol.render.Feature) {
+ feature = this.readRenderFeature_(layer.feature(i), name);
+ } else {
+ feature = this.readFeature_(layer.feature(i), name, opt_options);
+ }
+ features.push(feature);
+ }
+ }
+
+ return features;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.format.MVT.prototype.readProjection = function(source) {
+ return this.defaultDataProjection;
+};
+
+
+/**
+ * Sets the layers that features will be read from.
+ * @param {Array.} layers Layers.
+ * @api
+ */
+ol.format.MVT.prototype.setLayers = function(layers) {
+ this.layers_ = layers;
+};
+
+
+/**
+ * @private
+ * @param {Object} coords Raw feature coordinates.
+ * @param {Array.} flatCoordinates Flat coordinates to be populated by
+ * this function.
+ * @param {Array.} ends Ends to be populated by this function.
+ */
+ol.format.MVT.calculateFlatCoordinates_ = function(
+ coords, flatCoordinates, ends) {
+ var end = 0;
+ var line, coord;
+ for (var i = 0, ii = coords.length; i < ii; ++i) {
+ line = coords[i];
+ for (var j = 0, jj = line.length; j < jj; ++j) {
+ coord = line[j];
+ // Non-tilespace coords can be calculated here when a TileGrid and
+ // TileCoord are known.
+ flatCoordinates.push(coord.x, coord.y);
+ }
+ end += 2 * j;
+ ends.push(end);
+ }
+};
+
+
+/**
+ * @private
+ * @param {Object} rawFeature Raw Mapbox feature.
+ * @return {ol.geom.Geometry} Geometry.
+ */
+ol.format.MVT.readGeometry_ = function(rawFeature) {
+ var type = rawFeature.type;
+ if (type === 0) {
+ return null;
+ }
+
+ var coords = rawFeature.loadGeometry();
+ var ends = [];
+ var flatCoordinates = [];
+ ol.format.MVT.calculateFlatCoordinates_(coords, flatCoordinates, ends);
+
+ var geom;
+ if (type === 1) {
+ geom = coords.length === 1 ?
+ new ol.geom.Point(null) : new ol.geom.MultiPoint(null);
+ } else if (type === 2) {
+ if (coords.length === 1) {
+ geom = new ol.geom.LineString(null);
+ } else {
+ geom = new ol.geom.MultiLineString(null);
+ }
+ } else if (type === 3) {
+ geom = new ol.geom.Polygon(null);
+ }
+
+ geom.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates,
+ ends);
+
+ return geom;
+};
diff --git a/src/ol/geom/geometry.js b/src/ol/geom/geometry.js
index 70fac46257..a87cb6b853 100644
--- a/src/ol/geom/geometry.js
+++ b/src/ol/geom/geometry.js
@@ -2,10 +2,12 @@ goog.provide('ol.geom.Geometry');
goog.provide('ol.geom.GeometryLayout');
goog.provide('ol.geom.GeometryType');
+goog.require('goog.asserts');
goog.require('goog.functions');
goog.require('ol.Object');
goog.require('ol.extent');
goog.require('ol.proj');
+goog.require('ol.proj.Units');
/**
@@ -250,6 +252,10 @@ ol.geom.Geometry.prototype.translate = goog.abstractMethod;
* @api stable
*/
ol.geom.Geometry.prototype.transform = function(source, destination) {
+ goog.asserts.assert(
+ ol.proj.get(source).getUnits() !== ol.proj.Units.TILE_PIXELS &&
+ ol.proj.get(destination).getUnits() !== ol.proj.Units.TILE_PIXELS,
+ 'cannot transform geometries with TILE_PIXELS units');
this.applyTransform(ol.proj.getTransform(source, destination));
return this;
};
diff --git a/src/ol/interaction/selectinteraction.js b/src/ol/interaction/selectinteraction.js
index 447c18634e..82cb617c20 100644
--- a/src/ol/interaction/selectinteraction.js
+++ b/src/ol/interaction/selectinteraction.js
@@ -33,9 +33,11 @@ ol.interaction.SelectEventType = {
/**
- * A function that takes an {@link ol.Feature} and an {@link ol.layer.Layer}
- * and returns `true` if the feature may be selected or `false` otherwise.
- * @typedef {function(ol.Feature, ol.layer.Layer): boolean}
+ * A function that takes an {@link ol.Feature} or {@link ol.render.Feature} and
+ * an {@link ol.layer.Layer} and returns `true` if the feature may be selected
+ * or `false` otherwise.
+ * @typedef {function((ol.Feature|ol.render.Feature), ol.layer.Layer):
+ * boolean}
* @api
*/
ol.interaction.SelectFilterFunction;
@@ -210,7 +212,7 @@ goog.inherits(ol.interaction.Select, ol.interaction.Interaction);
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {ol.layer.Layer} layer Layer.
* @private
*/
@@ -234,7 +236,7 @@ ol.interaction.Select.prototype.getFeatures = function() {
/**
* Returns the associated {@link ol.layer.Vector vectorlayer} of
* the (last) selected feature.
- * @param {ol.Feature} feature Feature
+ * @param {ol.Feature|ol.render.Feature} feature Feature
* @return {ol.layer.Vector} Layer.
* @api
*/
@@ -273,7 +275,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
// the pixel.
map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {ol.layer.Layer} layer Layer.
*/
function(feature, layer) {
@@ -308,7 +310,7 @@ ol.interaction.Select.handleEvent = function(mapBrowserEvent) {
// Modify the currently selected feature(s).
map.forEachFeatureAtPixel(mapBrowserEvent.pixel,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {ol.layer.Layer} layer Layer.
*/
function(feature, layer) {
@@ -412,7 +414,7 @@ ol.interaction.Select.prototype.removeFeature_ = function(evt) {
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.interaction.Select.prototype.removeFeatureLayerAssociation_ =
diff --git a/src/ol/layer/vectortilelayer.js b/src/ol/layer/vectortilelayer.js
new file mode 100644
index 0000000000..fb158e6133
--- /dev/null
+++ b/src/ol/layer/vectortilelayer.js
@@ -0,0 +1,99 @@
+goog.provide('ol.layer.VectorTile');
+
+goog.require('goog.object');
+goog.require('ol.layer.Vector');
+
+
+/**
+ * @enum {string}
+ */
+ol.layer.VectorTileProperty = {
+ PRELOAD: 'preload',
+ USE_INTERIM_TILES_ON_ERROR: 'useInterimTilesOnError'
+};
+
+
+
+/**
+ * @classdesc
+ * Layer for vector tile data that is rendered client-side.
+ * Note that any property set in the options is set as a {@link ol.Object}
+ * property on the layer object; for example, setting `title: 'My Title'` in the
+ * options means that `title` is observable, and has get/set accessors.
+ *
+ * @constructor
+ * @extends {ol.layer.Vector}
+ * @param {olx.layer.VectorTileOptions=} opt_options Options.
+ * @api
+ */
+ol.layer.VectorTile = function(opt_options) {
+ var options = opt_options ? opt_options : {};
+
+ var baseOptions = goog.object.clone(options);
+
+ delete baseOptions.preload;
+ delete baseOptions.useInterimTilesOnError;
+ goog.base(this, /** @type {olx.layer.VectorOptions} */ (baseOptions));
+
+ this.setPreload(options.preload ? options.preload : 0);
+ this.setUseInterimTilesOnError(options.useInterimTilesOnError ?
+ options.useInterimTilesOnError : true);
+
+};
+goog.inherits(ol.layer.VectorTile, ol.layer.Vector);
+
+
+/**
+ * Return the level as number to which we will preload tiles up to.
+ * @return {number} The level to preload tiles up to.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.getPreload = function() {
+ return /** @type {number} */ (this.get(ol.layer.VectorTileProperty.PRELOAD));
+};
+
+
+/**
+ * Return the associated {@link ol.source.VectorTile source} of the layer.
+ * @function
+ * @return {ol.source.VectorTile} Source.
+ * @api
+ */
+ol.layer.VectorTile.prototype.getSource;
+
+
+/**
+ * Whether we use interim tiles on error.
+ * @return {boolean} Use interim tiles on error.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.getUseInterimTilesOnError = function() {
+ return /** @type {boolean} */ (
+ this.get(ol.layer.VectorTileProperty.USE_INTERIM_TILES_ON_ERROR));
+};
+
+
+/**
+ * Set the level as number to which we will preload tiles up to.
+ * @param {number} preload The level to preload tiles up to.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.setPreload = function(preload) {
+ this.set(ol.layer.TileProperty.PRELOAD, preload);
+};
+
+
+/**
+ * Set whether we use interim tiles on error.
+ * @param {boolean} useInterimTilesOnError Use interim tiles on error.
+ * @observable
+ * @api
+ */
+ol.layer.VectorTile.prototype.setUseInterimTilesOnError =
+ function(useInterimTilesOnError) {
+ this.set(
+ ol.layer.TileProperty.USE_INTERIM_TILES_ON_ERROR, useInterimTilesOnError);
+};
diff --git a/src/ol/map.js b/src/ol/map.js
index 15fda71a25..91f02c0481 100644
--- a/src/ol/map.js
+++ b/src/ol/map.js
@@ -594,9 +594,11 @@ ol.Map.prototype.disposeInternal = function() {
* callback with each intersecting feature. Layers included in the detection can
* be configured through `opt_layerFilter`.
* @param {ol.Pixel} pixel Pixel.
- * @param {function(this: S, ol.Feature, ol.layer.Layer): T} callback Feature
- * callback. The callback will be called with two arguments. The first
- * argument is one {@link ol.Feature feature} at the pixel, the second is
+ * @param {function(this: S, (ol.Feature|ol.render.Feature),
+ * ol.layer.Layer): T} callback Feature callback. The callback will be
+ * called with two arguments. The first argument is one
+ * {@link ol.Feature feature} or
+ * {@link ol.render.Feature render feature} at the pixel, the second is
* the {@link ol.layer.Layer layer} of the feature. To stop detection,
* callback functions can return a truthy value.
* @param {S=} opt_this Value to use as `this` when executing `callback`.
diff --git a/src/ol/ol.js b/src/ol/ol.js
index 23c754f49a..67f3cc5ddc 100644
--- a/src/ol/ol.js
+++ b/src/ol/ol.js
@@ -124,6 +124,14 @@ ol.ENABLE_TILE = true;
ol.ENABLE_VECTOR = true;
+/**
+ * @define {boolean} Enable rendering of ol.layer.VectorTile based layers.
+ * Default is `true`. Setting this to false at compile time in advanced mode
+ * removes all code supporting VectorTile layers from the build.
+ */
+ol.ENABLE_VECTOR_TILE = true;
+
+
/**
* @define {boolean} Enable the WebGL renderer. Default is `true`. Setting
* this to false at compile time in advanced mode removes all code
diff --git a/src/ol/proj/proj.js b/src/ol/proj/proj.js
index cfb7c9faa9..88e95593f8 100644
--- a/src/ol/proj/proj.js
+++ b/src/ol/proj/proj.js
@@ -23,7 +23,8 @@ ol.proj.ProjectionLike;
/**
- * Projection units: `'degrees'`, `'ft'`, `'m'`, `'pixels'`, or `'us-ft'`.
+ * Projection units: `'degrees'`, `'ft'`, `'m'`, `'pixels'`, `'tile-pixels'` or
+ * `'us-ft'`.
* @enum {string}
* @api stable
*/
@@ -32,6 +33,7 @@ ol.proj.Units = {
FEET: 'ft',
METERS: 'm',
PIXELS: 'pixels',
+ TILE_PIXELS: 'tile-pixels',
USFEET: 'us-ft'
};
@@ -676,9 +678,7 @@ ol.proj.equivalent = function(projection1, projection2) {
if (projection1 === projection2) {
return true;
} else if (projection1.getCode() === projection2.getCode()) {
- return true;
- } else if (projection1.getUnits() != projection2.getUnits()) {
- return false;
+ return projection1.getUnits() === projection2.getUnits();
} else {
var transformFn = ol.proj.getTransformFromProjections(
projection1, projection2);
diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js
index 2d90610ffe..710c49b416 100644
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -527,8 +527,8 @@ ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry =
* Render a Point geometry into the canvas. Rendering is immediate and uses
* the current style.
*
- * @param {ol.geom.Point} pointGeometry Point geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Point|ol.render.Feature} pointGeometry Point geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @api
*/
ol.render.canvas.Immediate.prototype.drawPointGeometry =
@@ -548,8 +548,9 @@ ol.render.canvas.Immediate.prototype.drawPointGeometry =
* Render a MultiPoint geometry into the canvas. Rendering is immediate and
* uses the current style.
*
- * @param {ol.geom.MultiPoint} multiPointGeometry MultiPoint geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.MultiPoint|ol.render.Feature} multiPointGeometry MultiPoint
+ * geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @api
*/
ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
@@ -569,8 +570,9 @@ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry =
* Render a LineString into the canvas. Rendering is immediate and uses
* the current style.
*
- * @param {ol.geom.LineString} lineStringGeometry Line string geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.LineString|ol.render.Feature} lineStringGeometry Line
+ * string geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @api
*/
ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
@@ -598,9 +600,9 @@ ol.render.canvas.Immediate.prototype.drawLineStringGeometry =
* Render a MultiLineString geometry into the canvas. Rendering is immediate
* and uses the current style.
*
- * @param {ol.geom.MultiLineString} multiLineStringGeometry
+ * @param {ol.geom.MultiLineString|ol.render.Feature} multiLineStringGeometry
* MultiLineString geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @api
*/
ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
@@ -635,8 +637,9 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry =
* Render a Polygon geometry into the canvas. Rendering is immediate and uses
* the current style.
*
- * @param {ol.geom.Polygon} polygonGeometry Polygon geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Polygon|ol.render.Feature} polygonGeometry Polygon
+ * geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @api
*/
ol.render.canvas.Immediate.prototype.drawPolygonGeometry =
@@ -1002,8 +1005,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
* @const
* @private
* @type {Object.}
+ * function(this: ol.render.canvas.Immediate,
+ * (ol.geom.Geometry|ol.render.Feature), Object)>}
*/
ol.render.canvas.Immediate.GEOMETRY_RENDERERS_ = {
'Point': ol.render.canvas.Immediate.prototype.drawPointGeometry,
diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js
index 3c3f091b85..e8ed38e661 100644
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -202,8 +202,8 @@ ol.render.canvas.Replay.prototype.appendFlatCoordinates =
/**
* @protected
- * @param {ol.geom.Geometry} geometry Geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) {
this.beginGeometryInstruction1_ =
@@ -224,7 +224,8 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) {
* @param {Object.} skippedFeaturesHash Ids of features
* to skip.
* @param {Array.<*>} instructions Instructions array.
- * @param {function(ol.Feature): T|undefined} featureCallback Feature callback.
+ * @param {function((ol.Feature|ol.render.Feature)): T|undefined}
+ * featureCallback Feature callback.
* @param {ol.Extent=} opt_hitExtent Only check features that intersect this
* extent.
* @return {T|undefined} Callback result.
@@ -250,13 +251,14 @@ ol.render.canvas.Replay.prototype.replay_ = function(
var d = 0; // data index
var dd; // end of per-instruction data
var localTransform = this.tmpLocalTransform_;
+ var prevX, prevY, roundX, roundY;
while (i < ii) {
var instruction = instructions[i];
var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
var feature, fill, stroke, text, x, y;
switch (type) {
case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
- feature = /** @type {ol.Feature} */ (instruction[1]);
+ feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
var featureUid = goog.getUid(feature).toString();
if (skippedFeaturesHash[featureUid] !== undefined ||
!feature.getGeometry()) {
@@ -409,7 +411,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
break;
case ol.render.canvas.Instruction.END_GEOMETRY:
if (featureCallback !== undefined) {
- feature = /** @type {ol.Feature} */ (instruction[1]);
+ feature =
+ /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
var result = featureCallback(feature);
if (result) {
return result;
@@ -428,9 +431,25 @@ ol.render.canvas.Replay.prototype.replay_ = function(
goog.asserts.assert(goog.isNumber(instruction[2]),
'3rd instruction should be a number');
dd = /** @type {number} */ (instruction[2]);
- context.moveTo(pixelCoordinates[d], pixelCoordinates[d + 1]);
+ x = pixelCoordinates[d];
+ y = pixelCoordinates[d + 1];
+ roundX = (x + 0.5) | 0;
+ roundY = (y + 0.5) | 0;
+ if (roundX !== prevX || roundY !== prevY) {
+ context.moveTo(x, y);
+ prevX = roundX;
+ prevY = roundY;
+ }
for (d += 2; d < dd; d += 2) {
- context.lineTo(pixelCoordinates[d], pixelCoordinates[d + 1]);
+ x = pixelCoordinates[d];
+ y = pixelCoordinates[d + 1];
+ roundX = (x + 0.5) | 0;
+ roundY = (y + 0.5) | 0;
+ if (roundX !== prevX || roundY !== prevY) {
+ context.lineTo(x, y);
+ prevX = roundX;
+ prevY = roundY;
+ }
}
++i;
break;
@@ -464,6 +483,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
if (ol.has.CANVAS_LINE_DASH) {
context.setLineDash(/** @type {Array.} */ (instruction[6]));
}
+ prevX = NaN;
+ prevY = NaN;
++i;
break;
case ol.render.canvas.Instruction.SET_TEXT_STYLE:
@@ -517,7 +538,8 @@ ol.render.canvas.Replay.prototype.replay = function(
* @param {number} viewRotation View rotation.
* @param {Object.} skippedFeaturesHash Ids of features
* to skip.
- * @param {function(ol.Feature): T=} opt_featureCallback Feature callback.
+ * @param {function((ol.Feature|ol.render.Feature)): T=} opt_featureCallback
+ * Feature callback.
* @param {ol.Extent=} opt_hitExtent Only check features that intersect this
* extent.
* @return {T|undefined} Callback result.
@@ -564,8 +586,8 @@ ol.render.canvas.Replay.prototype.reverseHitDetectionInstructions_ =
/**
- * @param {ol.geom.Geometry} geometry Geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.canvas.Replay.prototype.endGeometry = function(geometry, feature) {
goog.asserts.assert(this.beginGeometryInstruction1_,
@@ -1865,7 +1887,8 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() {
* @param {number} rotation Rotation.
* @param {Object.} skippedFeaturesHash Ids of features
* to skip.
- * @param {function(ol.Feature): T} callback Feature callback.
+ * @param {function((ol.Feature|ol.render.Feature)): T} callback Feature
+ * callback.
* @return {T|undefined} Callback result.
* @template T
*/
@@ -1893,7 +1916,7 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
return this.replayHitDetection_(context, transform, rotation,
skippedFeaturesHash,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
@@ -1999,7 +2022,8 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(
* @param {number} viewRotation View rotation.
* @param {Object.} skippedFeaturesHash Ids of features
* to skip.
- * @param {function(ol.Feature): T} featureCallback Feature callback.
+ * @param {function((ol.Feature|ol.render.Feature)): T} featureCallback
+ * Feature callback.
* @param {ol.Extent=} opt_hitExtent Only check features that intersect this
* extent.
* @return {T|undefined} Callback result.
diff --git a/src/ol/render/renderfeature.js b/src/ol/render/renderfeature.js
new file mode 100644
index 0000000000..00ba0eb451
--- /dev/null
+++ b/src/ol/render/renderfeature.js
@@ -0,0 +1,157 @@
+goog.provide('ol.render.Feature');
+
+
+goog.require('goog.asserts');
+goog.require('goog.functions');
+goog.require('ol.extent');
+goog.require('ol.geom.GeometryType');
+
+
+
+/**
+ * Lightweight, read-only, {@link ol.Feature} and {@link ol.geom.Geometry} like
+ * structure, optimized for rendering and styling. Geometry access through the
+ * API is limited to getting the type and extent of the geometry.
+ *
+ * @constructor
+ * @param {ol.geom.GeometryType} type Geometry type.
+ * @param {Array.} flatCoordinates Flat coordinates. These always need
+ * to be right-handed for polygons.
+ * @param {Array.|Array.>} ends Ends or Endss.
+ * @param {Object.} properties Properties.
+ */
+ol.render.Feature = function(type, flatCoordinates, ends, properties) {
+
+ /**
+ * @private
+ * @type {ol.Extent|undefined}
+ */
+ this.extent_;
+
+ goog.asserts.assert(type === ol.geom.GeometryType.POINT ||
+ type === ol.geom.GeometryType.MULTI_POINT ||
+ type === ol.geom.GeometryType.LINE_STRING ||
+ type === ol.geom.GeometryType.MULTI_LINE_STRING ||
+ type === ol.geom.GeometryType.POLYGON,
+ 'Need a Point, MultiPoint, LineString, MultiLineString or Polygon type');
+
+ /**
+ * @private
+ * @type {ol.geom.GeometryType}
+ */
+ this.type_ = type;
+
+ /**
+ * @private
+ * @type {Array.}
+ */
+ this.flatCoordinates_ = flatCoordinates;
+
+ /**
+ * @private
+ * @type {Array.|Array.>}
+ */
+ this.ends_ = ends;
+
+ /**
+ * @private
+ * @type {Object.}
+ */
+ this.properties_ = properties;
+
+};
+
+
+/**
+ * Get a feature property by its key.
+ * @param {string} key Key
+ * @return {*} Value for the requested key.
+ * @api
+ */
+ol.render.Feature.prototype.get = function(key) {
+ return this.properties_[key];
+};
+
+
+/**
+ * @return {Array.|Array.>} Ends or endss.
+ */
+ol.render.Feature.prototype.getEnds = function() {
+ return this.ends_;
+};
+
+
+/**
+ * Get the extent of this feature's geometry.
+ * @return {ol.Extent} Extent.
+ * @api
+ */
+ol.render.Feature.prototype.getExtent = function() {
+ if (!this.extent_) {
+ this.extent_ = this.type_ === ol.geom.GeometryType.POINT ?
+ ol.extent.createOrUpdateFromCoordinate(this.flatCoordinates_) :
+ ol.extent.createOrUpdateFromFlatCoordinates(
+ this.flatCoordinates_, 0, this.flatCoordinates_.length, 2);
+
+ }
+ return this.extent_;
+};
+
+
+/**
+ * @return {Array.} Flat coordinates.
+ */
+ol.render.Feature.prototype.getFlatCoordinates =
+ ol.render.Feature.prototype.getOrientedFlatCoordinates = function() {
+ return this.flatCoordinates_;
+};
+
+
+/**
+ * Get the feature for working with its geometry.
+ * @return {ol.render.Feature} Feature.
+ * @api
+ */
+ol.render.Feature.prototype.getGeometry = function() {
+ return this;
+};
+
+
+/**
+ * Get the feature properties.
+ * @return {Object.} Feature properties.
+ * @api
+ */
+ol.render.Feature.prototype.getProperties = function() {
+ return this.properties_;
+};
+
+
+/**
+ * Get the feature for working with its geometry.
+ * @return {ol.render.Feature} Feature.
+ */
+ol.render.Feature.prototype.getSimplifiedGeometry =
+ ol.render.Feature.prototype.getGeometry;
+
+
+/**
+ * @return {number} Stride.
+ */
+ol.render.Feature.prototype.getStride = goog.functions.constant(2);
+
+
+/**
+ * @return {undefined}
+ */
+ol.render.Feature.prototype.getStyleFunction = ol.nullFunction;
+
+
+/**
+ * Get the type of this feature's geometry.
+ * @return {ol.geom.GeometryType} Geometry type.
+ * @api
+ */
+ol.render.Feature.prototype.getType = function() {
+ return this.type_;
+};
diff --git a/src/ol/render/vector.js b/src/ol/render/vector.js
index 30b4d4c32e..504ed3d583 100644
--- a/src/ol/render/vector.js
+++ b/src/ol/render/vector.js
@@ -1,22 +1,15 @@
goog.provide('ol.renderer.vector');
goog.require('goog.asserts');
-goog.require('ol.geom.Circle');
-goog.require('ol.geom.GeometryCollection');
-goog.require('ol.geom.LineString');
-goog.require('ol.geom.MultiLineString');
-goog.require('ol.geom.MultiPoint');
-goog.require('ol.geom.MultiPolygon');
-goog.require('ol.geom.Point');
-goog.require('ol.geom.Polygon');
+goog.require('ol.render.Feature');
goog.require('ol.render.IReplayGroup');
goog.require('ol.style.ImageState');
goog.require('ol.style.Style');
/**
- * @param {ol.Feature} feature1 Feature 1.
- * @param {ol.Feature} feature2 Feature 2.
+ * @param {ol.Feature|ol.render.Feature} feature1 Feature 1.
+ * @param {ol.Feature|ol.render.Feature} feature2 Feature 2.
* @return {number} Order.
*/
ol.renderer.vector.defaultOrder = function(feature1, feature2) {
@@ -47,15 +40,13 @@ ol.renderer.vector.getTolerance = function(resolution, pixelRatio) {
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.Circle} geometry Geometry.
* @param {ol.style.Style} style Style.
* @param {ol.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderCircleGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.Circle,
- 'geometry should be an ol.geom.Circle');
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
if (fillStyle || strokeStyle) {
@@ -76,7 +67,7 @@ ol.renderer.vector.renderCircleGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {ol.style.Style} style Style.
* @param {number} squaredTolerance Squared tolerance.
* @param {function(this: T, goog.events.Event)} listener Listener function.
@@ -113,7 +104,7 @@ ol.renderer.vector.renderFeature = function(
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {ol.style.Style} style Style.
* @param {number} squaredTolerance Squared tolerance.
* @private
@@ -135,15 +126,13 @@ ol.renderer.vector.renderFeature_ = function(
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.GeometryCollection} geometry Geometry.
* @param {ol.style.Style} style Style.
* @param {ol.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderGeometryCollectionGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.GeometryCollection,
- 'geometry should be an ol.geom.GeometryCollection');
var geometries = geometry.getGeometriesArray();
var i, ii;
for (i = 0, ii = geometries.length; i < ii; ++i) {
@@ -158,15 +147,13 @@ ol.renderer.vector.renderGeometryCollectionGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.LineString|ol.render.Feature} geometry Geometry.
* @param {ol.style.Style} style Style.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderLineStringGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.LineString,
- 'geometry should be an ol.geom.LineString');
var strokeStyle = style.getStroke();
if (strokeStyle) {
var lineStringReplay = replayGroup.getReplay(
@@ -186,15 +173,13 @@ ol.renderer.vector.renderLineStringGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.MultiLineString|ol.render.Feature} geometry Geometry.
* @param {ol.style.Style} style Style.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderMultiLineStringGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.MultiLineString,
- 'geometry should be an ol.geom.MultiLineString');
var strokeStyle = style.getStroke();
if (strokeStyle) {
var lineStringReplay = replayGroup.getReplay(
@@ -216,15 +201,13 @@ ol.renderer.vector.renderMultiLineStringGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.MultiPolygon} geometry Geometry.
* @param {ol.style.Style} style Style.
* @param {ol.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderMultiPolygonGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon,
- 'geometry should be an ol.geom.MultiPolygon');
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
if (strokeStyle || fillStyle) {
@@ -247,15 +230,13 @@ ol.renderer.vector.renderMultiPolygonGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.Point|ol.render.Feature} geometry Geometry.
* @param {ol.style.Style} style Style.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderPointGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.Point,
- 'geometry should be an ol.geom.Point');
var imageStyle = style.getImage();
if (imageStyle) {
if (imageStyle.getImageState() != ol.style.ImageState.LOADED) {
@@ -271,22 +252,21 @@ ol.renderer.vector.renderPointGeometry_ =
var textReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.TEXT);
textReplay.setTextStyle(textStyle);
- textReplay.drawText(geometry.getCoordinates(), 0, 2, 2, geometry, feature);
+ textReplay.drawText(geometry.getFlatCoordinates(), 0, 2, 2, geometry,
+ feature);
}
};
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.MultiPoint|ol.render.Feature} geometry Geometry.
* @param {ol.style.Style} style Style.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderMultiPointGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.MultiPoint,
- 'geometry should be an ol.goem.MultiPoint');
var imageStyle = style.getImage();
if (imageStyle) {
if (imageStyle.getImageState() != ol.style.ImageState.LOADED) {
@@ -311,15 +291,13 @@ ol.renderer.vector.renderMultiPointGeometry_ =
/**
* @param {ol.render.IReplayGroup} replayGroup Replay group.
- * @param {ol.geom.Geometry} geometry Geometry.
+ * @param {ol.geom.Polygon|ol.render.Feature} geometry Geometry.
* @param {ol.style.Style} style Style.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @private
*/
ol.renderer.vector.renderPolygonGeometry_ =
function(replayGroup, geometry, style, feature) {
- goog.asserts.assertInstanceof(geometry, ol.geom.Polygon,
- 'geometry should be an ol.geom.Polygon');
var fillStyle = style.getFill();
var strokeStyle = style.getStroke();
if (fillStyle || strokeStyle) {
diff --git a/src/ol/render/vectorcontext.js b/src/ol/render/vectorcontext.js
index 5345a592a0..f643c56d5a 100644
--- a/src/ol/render/vectorcontext.js
+++ b/src/ol/render/vectorcontext.js
@@ -44,25 +44,27 @@ ol.render.VectorContext.prototype.drawGeometryCollectionGeometry =
/**
- * @param {ol.geom.LineString} lineStringGeometry Line string geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.LineString|ol.render.Feature} lineStringGeometry Line
+ * string geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawLineStringGeometry =
goog.abstractMethod;
/**
- * @param {ol.geom.MultiLineString} multiLineStringGeometry
+ * @param {ol.geom.MultiLineString|ol.render.Feature} multiLineStringGeometry
* MultiLineString geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawMultiLineStringGeometry =
goog.abstractMethod;
/**
- * @param {ol.geom.MultiPoint} multiPointGeometry MultiPoint geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.MultiPoint|ol.render.Feature} multiPointGeometry MultiPoint
+ * geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawMultiPointGeometry = goog.abstractMethod;
@@ -76,15 +78,16 @@ ol.render.VectorContext.prototype.drawMultiPolygonGeometry =
/**
- * @param {ol.geom.Point} pointGeometry Point geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Point|ol.render.Feature} pointGeometry Point geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawPointGeometry = goog.abstractMethod;
/**
- * @param {ol.geom.Polygon} polygonGeometry Polygon geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Polygon|ol.render.Feature} polygonGeometry Polygon
+ * geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawPolygonGeometry = goog.abstractMethod;
@@ -94,8 +97,8 @@ ol.render.VectorContext.prototype.drawPolygonGeometry = goog.abstractMethod;
* @param {number} offset Offset.
* @param {number} end End.
* @param {number} stride Stride.
- * @param {ol.geom.Geometry} geometry Geometry.
- * @param {ol.Feature} feature Feature.
+ * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawText = goog.abstractMethod;
diff --git a/src/ol/render/webgl/webglimmediate.js b/src/ol/render/webgl/webglimmediate.js
index a0f45b0af0..1981e67ef2 100644
--- a/src/ol/render/webgl/webglimmediate.js
+++ b/src/ol/render/webgl/webglimmediate.js
@@ -294,8 +294,8 @@ ol.render.webgl.Immediate.prototype.setTextStyle = function(textStyle) {
* @const
* @private
* @type {Object.}
+ * function(this: ol.render.webgl.Immediate,
+ * (ol.geom.Geometry|ol.render.Feature), Object)>}
*/
ol.render.webgl.Immediate.GEOMETRY_RENDERERS_ = {
'Point': ol.render.webgl.Immediate.prototype.drawPointGeometry,
diff --git a/src/ol/renderer/canvas/canvasimagelayerrenderer.js b/src/ol/renderer/canvas/canvasimagelayerrenderer.js
index 22fae30287..9346fbc8f2 100644
--- a/src/ol/renderer/canvas/canvasimagelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasimagelayerrenderer.js
@@ -65,7 +65,7 @@ ol.renderer.canvas.ImageLayer.prototype.forEachFeatureAtCoordinate =
return source.forEachFeatureAtCoordinate(
coordinate, resolution, rotation, skippedFeatureUids,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js
index 21c9f88285..447bb44bd8 100644
--- a/src/ol/renderer/canvas/canvasmaprenderer.js
+++ b/src/ol/renderer/canvas/canvasmaprenderer.js
@@ -15,6 +15,7 @@ goog.require('ol.layer.Image');
goog.require('ol.layer.Layer');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
+goog.require('ol.layer.VectorTile');
goog.require('ol.render.Event');
goog.require('ol.render.EventType');
goog.require('ol.render.canvas.Immediate');
@@ -23,6 +24,7 @@ goog.require('ol.renderer.canvas.ImageLayer');
goog.require('ol.renderer.canvas.Layer');
goog.require('ol.renderer.canvas.TileLayer');
goog.require('ol.renderer.canvas.VectorLayer');
+goog.require('ol.renderer.canvas.VectorTileLayer');
goog.require('ol.source.State');
goog.require('ol.vec.Mat4');
@@ -79,6 +81,8 @@ ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
return new ol.renderer.canvas.ImageLayer(layer);
} else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
return new ol.renderer.canvas.TileLayer(layer);
+ } else if (ol.ENABLE_VECTOR_TILE && layer instanceof ol.layer.VectorTile) {
+ return new ol.renderer.canvas.VectorTileLayer(layer);
} else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
return new ol.renderer.canvas.VectorLayer(layer);
} else {
diff --git a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js
index d0c96994cc..d4652c81ba 100644
--- a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js
@@ -168,7 +168,7 @@ ol.renderer.canvas.VectorLayer.prototype.forEachFeatureAtCoordinate =
return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution,
rotation, layerState.managed ? frameState.skippedFeatureUids : {},
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
@@ -293,7 +293,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
if (vectorLayerRenderOrder) {
/** @type {Array.} */
var features = [];
- vectorSource.forEachFeatureInExtentAtResolution(extent, resolution,
+ vectorSource.forEachFeatureInExtent(extent,
/**
* @param {ol.Feature} feature Feature.
*/
@@ -303,8 +303,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
goog.array.sort(features, vectorLayerRenderOrder);
features.forEach(renderFeature, this);
} else {
- vectorSource.forEachFeatureInExtentAtResolution(
- extent, resolution, renderFeature, this);
+ vectorSource.forEachFeatureInExtent(extent, renderFeature, this);
}
replayGroup.finish();
diff --git a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
new file mode 100644
index 0000000000..820ebd4ce7
--- /dev/null
+++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
@@ -0,0 +1,442 @@
+goog.provide('ol.renderer.canvas.VectorTileLayer');
+
+goog.require('goog.asserts');
+goog.require('goog.events');
+goog.require('goog.vec.Mat4');
+goog.require('ol.Feature');
+goog.require('ol.TileRange');
+goog.require('ol.TileState');
+goog.require('ol.VectorTile');
+goog.require('ol.ViewHint');
+goog.require('ol.dom');
+goog.require('ol.extent');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.proj.Units');
+goog.require('ol.render.EventType');
+goog.require('ol.render.canvas.ReplayGroup');
+goog.require('ol.renderer.canvas.Layer');
+goog.require('ol.renderer.vector');
+goog.require('ol.size');
+goog.require('ol.source.VectorTile');
+goog.require('ol.tilecoord');
+goog.require('ol.vec.Mat4');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.renderer.canvas.Layer}
+ * @param {ol.layer.VectorTile} layer VectorTile layer.
+ */
+ol.renderer.canvas.VectorTileLayer = function(layer) {
+
+ goog.base(this, layer);
+
+ /**
+ * @private
+ * @type {CanvasRenderingContext2D}
+ */
+ this.context_ = ol.dom.createCanvasContext2D();
+
+ /**
+ * @private
+ * @type {boolean}
+ */
+ this.dirty_ = false;
+
+ /**
+ * @private
+ * @type {Array.}
+ */
+ this.renderedTiles_ = [];
+
+ /**
+ * @private
+ * @type {ol.Extent}
+ */
+ this.tmpExtent_ = ol.extent.createEmpty();
+
+ /**
+ * @private
+ * @type {ol.Size}
+ */
+ this.tmpSize_ = [NaN, NaN];
+
+ /**
+ * @private
+ * @type {!goog.vec.Mat4.Number}
+ */
+ this.tmpTransform_ = goog.vec.Mat4.createNumber();
+
+};
+goog.inherits(ol.renderer.canvas.VectorTileLayer, ol.renderer.canvas.Layer);
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.composeFrame =
+ function(frameState, layerState, context) {
+
+ var pixelRatio = frameState.pixelRatio;
+ var skippedFeatureUids = layerState.managed ?
+ frameState.skippedFeatureUids : {};
+ var viewState = frameState.viewState;
+ var center = viewState.center;
+ var projection = viewState.projection;
+ var resolution = viewState.resolution;
+ var rotation = viewState.rotation;
+ var layer = this.getLayer();
+ var source = layer.getSource();
+ goog.asserts.assertInstanceof(source, ol.source.VectorTile,
+ 'Source is an ol.source.VectorTile');
+
+ var transform = this.getTransform(frameState, 0);
+
+ this.dispatchPreComposeEvent(context, frameState, transform);
+
+ var replayContext;
+ if (layer.hasListener(ol.render.EventType.RENDER)) {
+ // resize and clear
+ this.context_.canvas.width = context.canvas.width;
+ this.context_.canvas.height = context.canvas.height;
+ replayContext = this.context_;
+ } else {
+ replayContext = context;
+ }
+ // for performance reasons, context.save / context.restore is not used
+ // to save and restore the transformation matrix and the opacity.
+ // see http://jsperf.com/context-save-restore-versus-variable
+ var alpha = replayContext.globalAlpha;
+ replayContext.globalAlpha = layerState.opacity;
+
+ var tilesToDraw = this.renderedTiles_;
+ var tileGrid = source.getTileGrid();
+
+ var currentZ, i, ii, origin, scale, tile, tileExtent, tileSize;
+ var tilePixelRatio, tilePixelResolution, tilePixelSize, tileResolution;
+ for (i = 0, ii = tilesToDraw.length; i < ii; ++i) {
+ tile = tilesToDraw[i];
+ currentZ = tile.getTileCoord()[0];
+ tileSize = tileGrid.getTileSize(currentZ);
+ tilePixelSize = source.getTilePixelSize(currentZ, pixelRatio, projection);
+ tilePixelRatio = tilePixelSize[0] /
+ ol.size.toSize(tileSize, this.tmpSize_)[0];
+ tileResolution = tileGrid.getResolution(currentZ);
+ tilePixelResolution = tileResolution / tilePixelRatio;
+ if (tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS) {
+ origin = ol.extent.getTopLeft(tileGrid.getTileCoordExtent(
+ tile.getTileCoord(), this.tmpExtent_));
+ transform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_,
+ pixelRatio * frameState.size[0] / 2,
+ pixelRatio * frameState.size[1] / 2,
+ pixelRatio * tilePixelResolution / resolution,
+ pixelRatio * tilePixelResolution / resolution,
+ viewState.rotation,
+ (origin[0] - center[0]) / tilePixelResolution,
+ (center[1] - origin[1]) / tilePixelResolution);
+ }
+ tile.getReplayState().replayGroup.replay(replayContext, pixelRatio,
+ transform, rotation, skippedFeatureUids);
+ }
+
+ transform = this.getTransform(frameState, 0);
+
+ if (replayContext != context) {
+ this.dispatchRenderEvent(replayContext, frameState, transform);
+ context.drawImage(replayContext.canvas, 0, 0);
+ }
+ replayContext.globalAlpha = alpha;
+
+ this.dispatchPostComposeEvent(context, frameState, transform);
+};
+
+
+/**
+ * @param {ol.VectorTile} tile Tile.
+ * @param {ol.layer.VectorTile} layer Vector tile layer.
+ * @param {number} pixelRatio Pixel ratio.
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
+ layer, pixelRatio) {
+ var revision = layer.getRevision();
+ var renderOrder = layer.getRenderOrder() || null;
+
+ var replayState = tile.getReplayState();
+ if (!replayState.dirty && replayState.renderedRevision == revision &&
+ replayState.renderedRenderOrder == renderOrder) {
+ return;
+ }
+
+ // FIXME dispose of old replayGroup in post render
+ goog.dispose(replayState.replayGroup);
+ replayState.replayGroup = null;
+ replayState.dirty = false;
+
+ var source = layer.getSource();
+ goog.asserts.assertInstanceof(source, ol.source.VectorTile,
+ 'Source is an ol.source.VectorTile');
+ var tileGrid = source.getTileGrid();
+ var tileCoord = tile.getTileCoord();
+ var pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
+ var extent;
+ if (pixelSpace) {
+ var tilePixelSize = source.getTilePixelSize(tileCoord[0], pixelRatio,
+ tile.getProjection());
+ extent = [0, 0, tilePixelSize[0], tilePixelSize[1]];
+ } else {
+ extent = tileGrid.getTileCoordExtent(tileCoord);
+ }
+ var resolution = tileGrid.getResolution(tileCoord[0]);
+ var tileResolution = pixelSpace ? source.getTilePixelRatio() : resolution;
+ replayState.dirty = false;
+ var replayGroup = new ol.render.canvas.ReplayGroup(0, extent,
+ tileResolution, layer.getRenderBuffer());
+ var squaredTolerance = ol.renderer.vector.getSquaredTolerance(
+ tileResolution, pixelRatio);
+
+ /**
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ * @this {ol.renderer.canvas.VectorTileLayer}
+ */
+ function renderFeature(feature) {
+ var styles;
+ if (feature.getStyleFunction()) {
+ goog.asserts.assertInstanceof(feature, ol.Feature, 'Got an ol.Feature');
+ styles = feature.getStyleFunction().call(feature, resolution);
+ } else if (layer.getStyleFunction()) {
+ styles = layer.getStyleFunction()(feature, resolution);
+ }
+ if (styles) {
+ var dirty = this.renderFeature(feature, squaredTolerance, styles,
+ replayGroup);
+ this.dirty_ = this.dirty_ || dirty;
+ replayState.dirty = replayState.dirty || dirty;
+ }
+ }
+
+ var features = tile.getFeatures();
+ if (renderOrder && renderOrder !== replayState.renderedRenderOrder) {
+ features.sort(renderOrder);
+ }
+ features.forEach(renderFeature, this);
+
+ replayGroup.finish();
+
+ replayState.renderedRevision = revision;
+ replayState.renderedRenderOrder = renderOrder;
+ replayState.replayGroup = replayGroup;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate =
+ function(coordinate, frameState, callback, thisArg) {
+ var resolution = frameState.viewState.resolution;
+ var rotation = frameState.viewState.rotation;
+ var layer = this.getLayer();
+ var layerState = frameState.layerStates[goog.getUid(layer)];
+ /** @type {Object.} */
+ var features = {};
+
+ var replayables = this.renderedTiles_;
+ var source = layer.getSource();
+ goog.asserts.assertInstanceof(source, ol.source.VectorTile,
+ 'Source is an ol.source.VectorTile');
+ var tileGrid = source.getTileGrid();
+ var found, tileSpaceCoordinate;
+ var i, ii, origin, replayGroup;
+ var tile, tileCoord, tileExtent, tilePixelRatio, tileResolution, tileSize;
+ for (i = 0, ii = replayables.length; i < ii; ++i) {
+ tile = replayables[i];
+ tileCoord = tile.getTileCoord();
+ tileExtent = source.getTileGrid().getTileCoordExtent(tileCoord,
+ this.tmpExtent_);
+ if (!ol.extent.containsCoordinate(tileExtent, coordinate)) {
+ continue;
+ }
+ if (tile.getProjection().getUnits() === ol.proj.Units.TILE_PIXELS) {
+ origin = ol.extent.getTopLeft(tileExtent);
+ tilePixelRatio = source.getTilePixelRatio();
+ tileResolution = tileGrid.getResolution(tileCoord[0]) / tilePixelRatio;
+ tileSize = ol.size.toSize(tileGrid.getTileSize(tileCoord[0]));
+ tileSpaceCoordinate = [
+ (coordinate[0] - origin[0]) / tileResolution,
+ (origin[1] - coordinate[1]) / tileResolution
+ ];
+ resolution = tilePixelRatio;
+ } else {
+ tileSpaceCoordinate = coordinate;
+ }
+ replayGroup = tile.getReplayState().replayGroup;
+ found = found || replayGroup.forEachFeatureAtCoordinate(
+ tileSpaceCoordinate, resolution, rotation,
+ layerState.managed ? frameState.skippedFeatureUids : {},
+ /**
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ * @return {?} Callback result.
+ */
+ function(feature) {
+ goog.asserts.assert(feature, 'received a feature');
+ var key = goog.getUid(feature).toString();
+ if (!(key in features)) {
+ features[key] = true;
+ return callback.call(thisArg, feature, layer);
+ }
+ });
+ }
+ return found;
+};
+
+
+/**
+ * Handle changes in image style state.
+ * @param {goog.events.Event} event Image style change event.
+ * @private
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.handleStyleImageChange_ =
+ function(event) {
+ this.renderIfReadyAndVisible();
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.prepareFrame =
+ function(frameState, layerState) {
+ var layer = /** @type {ol.layer.Vector} */ (this.getLayer());
+ goog.asserts.assertInstanceof(layer, ol.layer.VectorTile,
+ 'layer is an instance of ol.layer.VectorTile');
+ var source = layer.getSource();
+ goog.asserts.assertInstanceof(source, ol.source.VectorTile,
+ 'Source is an ol.source.VectorTile');
+
+ this.updateAttributions(
+ frameState.attributions, source.getAttributions());
+ this.updateLogos(frameState, source);
+
+ var animating = frameState.viewHints[ol.ViewHint.ANIMATING];
+ var interacting = frameState.viewHints[ol.ViewHint.INTERACTING];
+ var updateWhileAnimating = layer.getUpdateWhileAnimating();
+ var updateWhileInteracting = layer.getUpdateWhileInteracting();
+
+ if (!this.dirty_ && (!updateWhileAnimating && animating) ||
+ (!updateWhileInteracting && interacting)) {
+ return true;
+ }
+
+ var extent = frameState.extent;
+ if (layerState.extent) {
+ extent = ol.extent.getIntersection(extent, layerState.extent);
+ }
+ if (ol.extent.isEmpty(extent)) {
+ // Return false to prevent the rendering of the layer.
+ return false;
+ }
+
+ var viewState = frameState.viewState;
+ var projection = viewState.projection;
+ var resolution = viewState.resolution;
+ var pixelRatio = frameState.pixelRatio;
+
+ var tileGrid = source.getTileGrid();
+ var resolutions = tileGrid.getResolutions();
+ var z = resolutions.length - 1;
+ while (z > 0 && resolutions[z] < resolution) {
+ --z;
+ }
+ var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
+ this.updateUsedTiles(frameState.usedTiles, source, z, tileRange);
+ this.manageTilePyramid(frameState, source, tileGrid, pixelRatio,
+ projection, extent, z, layer.getPreload());
+ this.scheduleExpireCache(frameState, source);
+
+ /**
+ * @type {Object.>}
+ */
+ var tilesToDrawByZ = {};
+ tilesToDrawByZ[z] = {};
+
+ var findLoadedTiles = this.createLoadedTileFinder(source, projection,
+ tilesToDrawByZ);
+
+ var useInterimTilesOnError = layer.getUseInterimTilesOnError();
+
+ var tmpExtent = this.tmpExtent_;
+ var tmpTileRange = new ol.TileRange(0, 0, 0, 0);
+ var childTileRange, fullyLoaded, tile, tileState, x, y;
+ for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
+ for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
+
+ tile = source.getTile(z, x, y, pixelRatio, projection);
+ goog.asserts.assertInstanceof(tile, ol.VectorTile,
+ 'Tile is an ol.VectorTile');
+ tileState = tile.getState();
+ if (tileState == ol.TileState.LOADED ||
+ tileState == ol.TileState.EMPTY ||
+ (tileState == ol.TileState.ERROR && !useInterimTilesOnError)) {
+ tilesToDrawByZ[z][ol.tilecoord.toString(tile.tileCoord)] = tile;
+ continue;
+ }
+
+ fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
+ tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
+ if (!fullyLoaded) {
+ childTileRange = tileGrid.getTileCoordChildTileRange(
+ tile.tileCoord, tmpTileRange, tmpExtent);
+ if (childTileRange) {
+ findLoadedTiles(z + 1, childTileRange);
+ }
+ }
+
+ }
+ }
+
+ this.dirty_ = false;
+
+ /** @type {Array.} */
+ var zs = Object.keys(tilesToDrawByZ).map(Number);
+ zs.sort();
+ var replayables = [];
+ var i, ii, currentZ, tileCoordKey, tilesToDraw;
+ for (i = 0, ii = zs.length; i < ii; ++i) {
+ currentZ = zs[i];
+ tilesToDraw = tilesToDrawByZ[currentZ];
+ for (tileCoordKey in tilesToDraw) {
+ tile = tilesToDraw[tileCoordKey];
+ if (tile.getState() == ol.TileState.LOADED) {
+ replayables.push(tile);
+ this.createReplayGroup(tile, layer, pixelRatio);
+ }
+ }
+ }
+
+ this.renderedTiles_ = replayables;
+
+ return true;
+};
+
+
+/**
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Array.} styles Array of styles
+ * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group.
+ * @return {boolean} `true` if an image is loading.
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.renderFeature =
+ function(feature, squaredTolerance, styles, replayGroup) {
+ if (!styles) {
+ return false;
+ }
+ var i, ii, loading = false;
+ for (i = 0, ii = styles.length; i < ii; ++i) {
+ loading = ol.renderer.vector.renderFeature(
+ replayGroup, feature, styles[i], squaredTolerance,
+ this.handleStyleImageChange_, this) || loading;
+ }
+ return loading;
+};
diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js
index 033de8614b..f60702a394 100644
--- a/src/ol/renderer/dom/domimagelayerrenderer.js
+++ b/src/ol/renderer/dom/domimagelayerrenderer.js
@@ -55,7 +55,7 @@ ol.renderer.dom.ImageLayer.prototype.forEachFeatureAtCoordinate =
return source.forEachFeatureAtCoordinate(
coordinate, resolution, rotation, skippedFeatureUids,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
diff --git a/src/ol/renderer/dom/domvectorlayerrenderer.js b/src/ol/renderer/dom/domvectorlayerrenderer.js
index 3239f82c72..e44c5f5ad6 100644
--- a/src/ol/renderer/dom/domvectorlayerrenderer.js
+++ b/src/ol/renderer/dom/domvectorlayerrenderer.js
@@ -190,7 +190,7 @@ ol.renderer.dom.VectorLayer.prototype.forEachFeatureAtCoordinate =
return this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution,
rotation, layerState.managed ? frameState.skippedFeatureUids : {},
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
@@ -301,7 +301,7 @@ ol.renderer.dom.VectorLayer.prototype.prepareFrame =
if (vectorLayerRenderOrder) {
/** @type {Array.} */
var features = [];
- vectorSource.forEachFeatureInExtentAtResolution(extent, resolution,
+ vectorSource.forEachFeatureInExtent(extent,
/**
* @param {ol.Feature} feature Feature.
*/
@@ -311,8 +311,7 @@ ol.renderer.dom.VectorLayer.prototype.prepareFrame =
goog.array.sort(features, vectorLayerRenderOrder);
features.forEach(renderFeature, this);
} else {
- vectorSource.forEachFeatureInExtentAtResolution(
- extent, resolution, renderFeature, this);
+ vectorSource.forEachFeatureInExtent(extent, renderFeature, this);
}
replayGroup.finish();
diff --git a/src/ol/renderer/layerrenderer.js b/src/ol/renderer/layerrenderer.js
index cd0dba0093..7ab15e54a2 100644
--- a/src/ol/renderer/layerrenderer.js
+++ b/src/ol/renderer/layerrenderer.js
@@ -42,8 +42,8 @@ goog.inherits(ol.renderer.Layer, ol.Observable);
/**
* @param {ol.Coordinate} coordinate Coordinate.
* @param {olx.FrameState} frameState Frame state.
- * @param {function(this: S, ol.Feature, ol.layer.Layer): T} callback Feature
- * callback.
+ * @param {function(this: S, (ol.Feature|ol.render.Feature), ol.layer.Layer): T}
+ * callback Feature callback.
* @param {S} thisArg Value to use as `this` when executing `callback`.
* @return {T|undefined} Callback result.
* @template S,T
diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js
index 7cd56f3c00..de5a49d80d 100644
--- a/src/ol/renderer/maprenderer.js
+++ b/src/ol/renderer/maprenderer.js
@@ -114,8 +114,8 @@ ol.renderer.Map.expireIconCache_ = function(map, frameState) {
/**
* @param {ol.Coordinate} coordinate Coordinate.
* @param {olx.FrameState} frameState FrameState.
- * @param {function(this: S, ol.Feature, ol.layer.Layer): T} callback Feature
- * callback.
+ * @param {function(this: S, (ol.Feature|ol.render.Feature),
+ * ol.layer.Layer): T} callback Feature callback.
* @param {S} thisArg Value to use as `this` when executing `callback`.
* @param {function(this: U, ol.layer.Layer): boolean} layerFilter Layer filter
* function, only layers which are visible and for which this function
@@ -136,7 +136,7 @@ ol.renderer.Map.prototype.forEachFeatureAtCoordinate =
var features = {};
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function forEachFeatureAtCoordinate(feature) {
diff --git a/src/ol/renderer/webgl/webglimagelayerrenderer.js b/src/ol/renderer/webgl/webglimagelayerrenderer.js
index 8aad156335..dc8d7cc51d 100644
--- a/src/ol/renderer/webgl/webglimagelayerrenderer.js
+++ b/src/ol/renderer/webgl/webglimagelayerrenderer.js
@@ -85,7 +85,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachFeatureAtCoordinate =
coordinate, resolution, rotation, skippedFeatureUids,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
diff --git a/src/ol/renderer/webgl/webglvectorlayerrenderer.js b/src/ol/renderer/webgl/webglvectorlayerrenderer.js
index 211a9f37ed..ae84186a9e 100644
--- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js
+++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js
@@ -269,7 +269,7 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame =
if (vectorLayerRenderOrder) {
/** @type {Array.} */
var features = [];
- vectorSource.forEachFeatureInExtentAtResolution(extent, resolution,
+ vectorSource.forEachFeatureInExtent(extent,
/**
* @param {ol.Feature} feature Feature.
*/
@@ -279,8 +279,7 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame =
goog.array.sort(features, vectorLayerRenderOrder);
features.forEach(renderFeature, this);
} else {
- vectorSource.forEachFeatureInExtentAtResolution(
- extent, resolution, renderFeature, this);
+ vectorSource.forEachFeatureInExtent(extent, renderFeature, this);
}
replayGroup.finish(context);
diff --git a/src/ol/source/imagevectorsource.js b/src/ol/source/imagevectorsource.js
index c940996abd..ccfddf1ffd 100644
--- a/src/ol/source/imagevectorsource.js
+++ b/src/ol/source/imagevectorsource.js
@@ -116,7 +116,7 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ =
this.source_.loadFeatures(extent, resolution, projection);
var loading = false;
- this.source_.forEachFeatureInExtentAtResolution(extent, resolution,
+ this.source_.forEachFeatureInExtent(extent,
/**
* @param {ol.Feature} feature Feature.
*/
@@ -162,7 +162,7 @@ ol.source.ImageVector.prototype.forEachFeatureAtCoordinate = function(
return this.replayGroup_.forEachFeatureAtCoordinate(
coordinate, resolution, 0, skippedFeatureUids,
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @return {?} Callback result.
*/
function(feature) {
diff --git a/src/ol/source/source.js b/src/ol/source/source.js
index 38261a0e12..84f0c6208e 100644
--- a/src/ol/source/source.js
+++ b/src/ol/source/source.js
@@ -89,7 +89,8 @@ goog.inherits(ol.source.Source, ol.Object);
* @param {number} resolution Resolution.
* @param {number} rotation Rotation.
* @param {Object.} skippedFeatureUids Skipped feature uids.
- * @param {function(ol.Feature): T} callback Feature callback.
+ * @param {function((ol.Feature|ol.render.Feature)): T} callback Feature
+ * callback.
* @return {T|undefined} Callback result.
* @template T
*/
diff --git a/src/ol/source/tilearcgisrestsource.js b/src/ol/source/tilearcgisrestsource.js
index 76ba2c336e..bd37a418d6 100644
--- a/src/ol/source/tilearcgisrestsource.js
+++ b/src/ol/source/tilearcgisrestsource.js
@@ -7,7 +7,6 @@ goog.require('goog.string');
goog.require('goog.uri.utils');
goog.require('ol');
goog.require('ol.TileCoord');
-goog.require('ol.TileUrlFunction');
goog.require('ol.extent');
goog.require('ol.proj');
goog.require('ol.size');
@@ -45,20 +44,11 @@ ol.source.TileArcGISRest = function(opt_options) {
tileGrid: options.tileGrid,
tileLoadFunction: options.tileLoadFunction,
tileUrlFunction: goog.bind(this.tileUrlFunction_, this),
+ url: options.url,
+ urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
});
- var urls = options.urls;
- if (urls === undefined && options.url !== undefined) {
- urls = ol.TileUrlFunction.expandUrl(options.url);
- }
-
- /**
- * @private
- * @type {!Array.}
- */
- this.urls_ = urls || [];
-
/**
* @private
* @type {Object}
@@ -100,7 +90,7 @@ ol.source.TileArcGISRest.prototype.getRequestUrl_ =
function(tileCoord, tileSize, tileExtent,
pixelRatio, projection, params) {
- var urls = this.urls_;
+ var urls = this.urls;
if (urls.length === 0) {
return undefined;
}
@@ -158,38 +148,6 @@ ol.source.TileArcGISRest.prototype.getTilePixelSize =
};
-/**
- * Return the URLs used for this ArcGIS source.
- * @return {!Array.} URLs.
- * @api stable
- */
-ol.source.TileArcGISRest.prototype.getUrls = function() {
- return this.urls_;
-};
-
-
-/**
- * Set the URL to use for requests.
- * @param {string|undefined} url URL.
- * @api stable
- */
-ol.source.TileArcGISRest.prototype.setUrl = function(url) {
- var urls = url !== undefined ? ol.TileUrlFunction.expandUrl(url) : null;
- this.setUrls(urls);
-};
-
-
-/**
- * Set the URLs to use for requests.
- * @param {Array.|undefined} urls URLs.
- * @api stable
- */
-ol.source.TileArcGISRest.prototype.setUrls = function(urls) {
- this.urls_ = urls || [];
- this.changed();
-};
-
-
/**
* @param {ol.TileCoord} tileCoord Tile coordinate.
* @param {number} pixelRatio Pixel ratio.
diff --git a/src/ol/source/tiledebugsource.js b/src/ol/source/tiledebugsource.js
index 3bfd917b34..32a0fad16d 100644
--- a/src/ol/source/tiledebugsource.js
+++ b/src/ol/source/tiledebugsource.js
@@ -45,7 +45,10 @@ goog.inherits(ol.DebugTile_, ol.Tile);
/**
- * @inheritDoc
+ * Get the image element for this tile.
+ * @param {Object=} opt_context Optional context. Only used by the DOM
+ * renderer.
+ * @return {HTMLCanvasElement} Image.
*/
ol.DebugTile_.prototype.getImage = function(opt_context) {
var key = opt_context !== undefined ? goog.getUid(opt_context) : -1;
diff --git a/src/ol/source/tileimagesource.js b/src/ol/source/tileimagesource.js
index 964e7d7690..6622a0b762 100644
--- a/src/ol/source/tileimagesource.js
+++ b/src/ol/source/tileimagesource.js
@@ -6,15 +6,10 @@ goog.require('goog.events.EventType');
goog.require('goog.object');
goog.require('ol.ImageTile');
goog.require('ol.TileCache');
-goog.require('ol.TileCoord');
-goog.require('ol.TileLoadFunctionType');
goog.require('ol.TileState');
-goog.require('ol.TileUrlFunction');
-goog.require('ol.TileUrlFunctionType');
goog.require('ol.proj');
goog.require('ol.reproj.Tile');
-goog.require('ol.source.Tile');
-goog.require('ol.source.TileEvent');
+goog.require('ol.source.UrlTile');
@@ -24,7 +19,7 @@ goog.require('ol.source.TileEvent');
*
* @constructor
* @fires ol.source.TileEvent
- * @extends {ol.source.Tile}
+ * @extends {ol.source.UrlTile}
* @param {olx.source.TileImageOptions} options Image tile options.
* @api
*/
@@ -39,18 +34,15 @@ ol.source.TileImage = function(options) {
state: options.state !== undefined ?
/** @type {ol.source.State} */ (options.state) : undefined,
tileGrid: options.tileGrid,
+ tileLoadFunction: options.tileLoadFunction ?
+ options.tileLoadFunction : ol.source.TileImage.defaultTileLoadFunction,
tilePixelRatio: options.tilePixelRatio,
+ tileUrlFunction: options.tileUrlFunction,
+ url: options.url,
+ urls: options.urls,
wrapX: options.wrapX
});
- /**
- * @protected
- * @type {ol.TileUrlFunctionType}
- */
- this.tileUrlFunction = options.tileUrlFunction !== undefined ?
- options.tileUrlFunction :
- ol.TileUrlFunction.nullTileUrlFunction;
-
/**
* @protected
* @type {?string}
@@ -58,13 +50,6 @@ ol.source.TileImage = function(options) {
this.crossOrigin =
options.crossOrigin !== undefined ? options.crossOrigin : null;
- /**
- * @protected
- * @type {ol.TileLoadFunctionType}
- */
- this.tileLoadFunction = options.tileLoadFunction !== undefined ?
- options.tileLoadFunction : ol.source.TileImage.defaultTileLoadFunction;
-
/**
* @protected
* @type {function(new: ol.ImageTile, ol.TileCoord, ol.TileState, string,
@@ -97,16 +82,7 @@ ol.source.TileImage = function(options) {
*/
this.renderReprojectionEdges_ = false;
};
-goog.inherits(ol.source.TileImage, ol.source.Tile);
-
-
-/**
- * @param {ol.ImageTile} imageTile Image tile.
- * @param {string} src Source.
- */
-ol.source.TileImage.defaultTileLoadFunction = function(imageTile, src) {
- imageTile.getImage().src = src;
-};
+goog.inherits(ol.source.TileImage, ol.source.UrlTile);
/**
@@ -249,7 +225,7 @@ ol.source.TileImage.prototype.getTileInternal =
this.crossOrigin,
this.tileLoadFunction);
goog.events.listen(tile, goog.events.EventType.CHANGE,
- this.handleTileChange_, false, this);
+ this.handleTileChange, false, this);
this.tileCache.set(tileCoordKey, tile);
return tile;
@@ -257,50 +233,6 @@ ol.source.TileImage.prototype.getTileInternal =
};
-/**
- * Return the tile load function of the source.
- * @return {ol.TileLoadFunctionType} TileLoadFunction
- * @api
- */
-ol.source.TileImage.prototype.getTileLoadFunction = function() {
- return this.tileLoadFunction;
-};
-
-
-/**
- * Return the tile URL function of the source.
- * @return {ol.TileUrlFunctionType} TileUrlFunction
- * @api
- */
-ol.source.TileImage.prototype.getTileUrlFunction = function() {
- return this.tileUrlFunction;
-};
-
-
-/**
- * Handle tile change events.
- * @param {goog.events.Event} event Event.
- * @private
- */
-ol.source.TileImage.prototype.handleTileChange_ = function(event) {
- var tile = /** @type {ol.Tile} */ (event.target);
- switch (tile.getState()) {
- case ol.TileState.LOADING:
- this.dispatchEvent(
- new ol.source.TileEvent(ol.source.TileEventType.TILELOADSTART, tile));
- break;
- case ol.TileState.LOADED:
- this.dispatchEvent(
- new ol.source.TileEvent(ol.source.TileEventType.TILELOADEND, tile));
- break;
- case ol.TileState.ERROR:
- this.dispatchEvent(
- new ol.source.TileEvent(ol.source.TileEventType.TILELOADERROR, tile));
- break;
- }
-};
-
-
/**
* Sets whether to render reprojection edges or not (usually for debugging).
* @param {boolean} render Render the edges.
@@ -346,41 +278,9 @@ ol.source.TileImage.prototype.setTileGridForProjection =
/**
- * Set the tile load function of the source.
- * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
- * @api
+ * @param {ol.ImageTile} imageTile Image tile.
+ * @param {string} src Source.
*/
-ol.source.TileImage.prototype.setTileLoadFunction = function(tileLoadFunction) {
- this.tileCache.clear();
- this.tileCacheForProjection = {};
- this.tileLoadFunction = tileLoadFunction;
- this.changed();
-};
-
-
-/**
- * Set the tile URL function of the source.
- * @param {ol.TileUrlFunctionType} tileUrlFunction Tile URL function.
- * @api
- */
-ol.source.TileImage.prototype.setTileUrlFunction = function(tileUrlFunction) {
- // FIXME It should be possible to be more intelligent and avoid clearing the
- // FIXME cache. The tile URL function would need to be incorporated into the
- // FIXME cache key somehow.
- this.tileCache.clear();
- this.tileCacheForProjection = {};
- this.tileUrlFunction = tileUrlFunction;
- this.changed();
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileImage.prototype.useTile = function(z, x, y, projection) {
- var tileCache = this.getTileCacheForProjection(projection);
- var tileCoordKey = this.getKeyZXY(z, x, y);
- if (tileCache && tileCache.containsKey(tileCoordKey)) {
- tileCache.get(tileCoordKey);
- }
+ol.source.TileImage.defaultTileLoadFunction = function(imageTile, src) {
+ imageTile.getImage().src = src;
};
diff --git a/src/ol/source/tilesource.js b/src/ol/source/tilesource.js
index e47afe0d3f..648a77b564 100644
--- a/src/ol/source/tilesource.js
+++ b/src/ol/source/tilesource.js
@@ -19,6 +19,7 @@ goog.require('ol.tilegrid.TileGrid');
/**
* @typedef {{attributions: (Array.|undefined),
+ * cacheSize: (number|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|olx.LogoOptions|undefined),
* opaque: (boolean|undefined),
@@ -77,7 +78,7 @@ ol.source.Tile = function(options) {
* @protected
* @type {ol.TileCache}
*/
- this.tileCache = new ol.TileCache();
+ this.tileCache = new ol.TileCache(options.cacheSize);
/**
* @protected
diff --git a/src/ol/source/tileutfgridsource.js b/src/ol/source/tileutfgridsource.js
index 8862353677..5cc861ab36 100644
--- a/src/ol/source/tileutfgridsource.js
+++ b/src/ol/source/tileutfgridsource.js
@@ -256,7 +256,10 @@ goog.inherits(ol.source.TileUTFGridTile_, ol.Tile);
/**
- * @inheritDoc
+ * Get the image element for this tile.
+ * @param {Object=} opt_context Optional context. Only used for the DOM
+ * renderer.
+ * @return {Image} Image.
*/
ol.source.TileUTFGridTile_.prototype.getImage = function(opt_context) {
return null;
diff --git a/src/ol/source/tilevectorsource.js b/src/ol/source/tilevectorsource.js
deleted file mode 100644
index 902dafb021..0000000000
--- a/src/ol/source/tilevectorsource.js
+++ /dev/null
@@ -1,353 +0,0 @@
-goog.provide('ol.source.TileVector');
-
-goog.require('goog.array');
-goog.require('goog.asserts');
-goog.require('goog.object');
-goog.require('ol.TileUrlFunction');
-goog.require('ol.featureloader');
-goog.require('ol.source.State');
-goog.require('ol.source.Vector');
-goog.require('ol.tilecoord');
-goog.require('ol.tilegrid.TileGrid');
-
-
-
-/**
- * @classdesc
- * A vector source in one of the supported formats, where the data is divided
- * into tiles in a fixed grid pattern.
- *
- * @constructor
- * @extends {ol.source.Vector}
- * @param {olx.source.TileVectorOptions} options Options.
- * @api
- */
-ol.source.TileVector = function(options) {
-
- goog.base(this, {
- attributions: options.attributions,
- logo: options.logo,
- projection: undefined,
- state: ol.source.State.READY,
- wrapX: options.wrapX
- });
-
- /**
- * @private
- * @type {ol.format.Feature|undefined}
- */
- this.format_ = options.format !== undefined ? options.format : null;
-
- /**
- * @private
- * @type {ol.tilegrid.TileGrid}
- */
- this.tileGrid_ = options.tileGrid;
-
- /**
- * @private
- * @type {ol.TileUrlFunctionType}
- */
- this.tileUrlFunction_ = ol.TileUrlFunction.nullTileUrlFunction;
-
- /**
- * @private
- * @type {?ol.TileVectorLoadFunctionType}
- */
- this.tileLoadFunction_ = options.tileLoadFunction !== undefined ?
- options.tileLoadFunction : null;
-
- goog.asserts.assert(this.format_ || this.tileLoadFunction_,
- 'Either format or tileLoadFunction are required');
-
- /**
- * @private
- * @type {Object.>}
- */
- this.tiles_ = {};
-
- if (options.tileUrlFunction !== undefined) {
- this.setTileUrlFunction(options.tileUrlFunction);
- } else if (options.urls !== undefined) {
- this.setUrls(options.urls);
- } else if (options.url !== undefined) {
- this.setUrl(options.url);
- }
-
-};
-goog.inherits(ol.source.TileVector, ol.source.Vector);
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.addFeature = goog.abstractMethod;
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.addFeatures = goog.abstractMethod;
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.clear = function() {
- goog.object.clear(this.tiles_);
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.forEachFeature = goog.abstractMethod;
-
-
-/**
- * Iterate through all features whose geometries contain the provided
- * coordinate at the provided resolution, calling the callback with each
- * feature. If the callback returns a "truthy" value, iteration will stop and
- * the function will return the same value.
- *
- * @param {ol.Coordinate} coordinate Coordinate.
- * @param {number} resolution Resolution.
- * @param {function(this: T, ol.Feature): S} callback Called with each feature
- * whose goemetry contains the provided coordinate.
- * @param {T=} opt_this The object to use as `this` in the callback.
- * @return {S|undefined} The return value from the last call to the callback.
- * @template T,S
- */
-ol.source.TileVector.prototype.forEachFeatureAtCoordinateAndResolution =
- function(coordinate, resolution, callback, opt_this) {
-
- var tileGrid = this.tileGrid_;
- var tiles = this.tiles_;
- var tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate,
- resolution);
-
- var tileKey = this.getTileKeyZXY_(tileCoord[0], tileCoord[1], tileCoord[2]);
- var features = tiles[tileKey];
- if (features !== undefined) {
- var i, ii;
- for (i = 0, ii = features.length; i < ii; ++i) {
- var feature = features[i];
- var geometry = feature.getGeometry();
- goog.asserts.assert(geometry, 'feature geometry is defined and not null');
- if (geometry.containsCoordinate(coordinate)) {
- var result = callback.call(opt_this, feature);
- if (result) {
- return result;
- }
- }
- }
- }
- return undefined;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.forEachFeatureInExtent = goog.abstractMethod;
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.forEachFeatureInExtentAtResolution =
- function(extent, resolution, f, opt_this) {
- var tileGrid = this.tileGrid_;
- var tiles = this.tiles_;
- var z = tileGrid.getZForResolution(resolution);
- var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
- var x, y;
- for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
- for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
- var tileKey = this.getTileKeyZXY_(z, x, y);
- var features = tiles[tileKey];
- if (features !== undefined) {
- var i, ii;
- for (i = 0, ii = features.length; i < ii; ++i) {
- var result = f.call(opt_this, features[i]);
- if (result) {
- return result;
- }
- }
- }
- }
- }
- return undefined;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.getClosestFeatureToCoordinate =
- goog.abstractMethod;
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.getExtent = goog.abstractMethod;
-
-
-/**
- * Return the features of the TileVector source.
- * @inheritDoc
- * @api
- */
-ol.source.TileVector.prototype.getFeatures = function() {
- var tiles = this.tiles_;
- var features = [];
- var tileKey;
- for (tileKey in tiles) {
- goog.array.extend(features, tiles[tileKey]);
- }
- return features;
-};
-
-
-/**
- * Get all features whose geometry intersects the provided coordinate for the
- * provided resolution.
- * @param {ol.Coordinate} coordinate Coordinate.
- * @param {number} resolution Resolution.
- * @return {Array.} Features.
- * @api
- */
-ol.source.TileVector.prototype.getFeaturesAtCoordinateAndResolution =
- function(coordinate, resolution) {
- var features = [];
- this.forEachFeatureAtCoordinateAndResolution(coordinate, resolution,
- /**
- * @param {ol.Feature} feature Feature.
- */
- function(feature) {
- features.push(feature);
- });
- return features;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.getFeaturesInExtent = goog.abstractMethod;
-
-
-/**
- * Handles x-axis wrapping and returns a tile coordinate transformed from the
- * internal tile scheme to the tile grid's tile scheme. When the tile coordinate
- * is outside the resolution and extent range of the tile grid, `null` will be
- * returned.
- * @param {ol.TileCoord} tileCoord Tile coordinate.
- * @param {ol.proj.Projection} projection Projection.
- * @return {ol.TileCoord} Tile coordinate to be passed to the tileUrlFunction or
- * null if no tile URL should be created for the passed `tileCoord`.
- */
-ol.source.TileVector.prototype.getTileCoordForTileUrlFunction =
- function(tileCoord, projection) {
- var tileGrid = this.tileGrid_;
- goog.asserts.assert(tileGrid, 'tile grid needed');
- if (this.getWrapX() && projection.isGlobal()) {
- tileCoord = ol.tilecoord.wrapX(tileCoord, tileGrid, projection);
- }
- return ol.tilecoord.withinExtentAndZ(tileCoord, tileGrid) ?
- tileCoord : null;
-};
-
-
-/**
- * @param {number} z Z.
- * @param {number} x X.
- * @param {number} y Y.
- * @private
- * @return {string} Tile key.
- */
-ol.source.TileVector.prototype.getTileKeyZXY_ = function(z, x, y) {
- return z + '/' + x + '/' + y;
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.loadFeatures =
- function(extent, resolution, projection) {
- var tileGrid = this.tileGrid_;
- var tileUrlFunction = this.tileUrlFunction_;
- var tiles = this.tiles_;
- var z = tileGrid.getZForResolution(resolution);
- var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
- var tileCoord = [z, 0, 0];
- var x, y;
- /**
- * @param {string} tileKey Tile key.
- * @param {Array.} features Features.
- * @this {ol.source.TileVector}
- */
- function success(tileKey, features) {
- tiles[tileKey] = features;
- this.changed();
- }
- for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
- for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
- var tileKey = this.getTileKeyZXY_(z, x, y);
- if (!(tileKey in tiles)) {
- tileCoord[1] = x;
- tileCoord[2] = y;
- var urlTileCoord = this.getTileCoordForTileUrlFunction(
- tileCoord, projection);
- var url = !urlTileCoord ? undefined :
- tileUrlFunction(urlTileCoord, 1, projection);
- if (url !== undefined) {
- tiles[tileKey] = [];
- var tileSuccess = goog.partial(success, tileKey);
- if (this.tileLoadFunction_) {
- this.tileLoadFunction_(url, goog.bind(tileSuccess, this));
- } else {
- var loader = ol.featureloader.loadFeaturesXhr(url,
- /** @type {ol.format.Feature} */ (this.format_), tileSuccess);
- loader.call(this, extent, resolution, projection);
- }
- }
- }
- }
- }
-};
-
-
-/**
- * @inheritDoc
- */
-ol.source.TileVector.prototype.removeFeature = goog.abstractMethod;
-
-
-/**
- * @param {ol.TileUrlFunctionType} tileUrlFunction Tile URL function.
- */
-ol.source.TileVector.prototype.setTileUrlFunction = function(tileUrlFunction) {
- this.tileUrlFunction_ = tileUrlFunction;
- this.changed();
-};
-
-
-/**
- * @param {string} url URL.
- */
-ol.source.TileVector.prototype.setUrl = function(url) {
- this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
- ol.TileUrlFunction.expandUrl(url), this.tileGrid_));
-};
-
-
-/**
- * @param {Array.} urls URLs.
- */
-ol.source.TileVector.prototype.setUrls = function(urls) {
- this.setTileUrlFunction(
- ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid_));
-};
diff --git a/src/ol/source/tilewmssource.js b/src/ol/source/tilewmssource.js
index 265b607a2d..f17caee76a 100644
--- a/src/ol/source/tilewmssource.js
+++ b/src/ol/source/tilewmssource.js
@@ -11,7 +11,6 @@ goog.require('goog.string');
goog.require('goog.uri.utils');
goog.require('ol');
goog.require('ol.TileCoord');
-goog.require('ol.TileUrlFunction');
goog.require('ol.extent');
goog.require('ol.proj');
goog.require('ol.size');
@@ -49,20 +48,11 @@ ol.source.TileWMS = function(opt_options) {
tileGrid: options.tileGrid,
tileLoadFunction: options.tileLoadFunction,
tileUrlFunction: goog.bind(this.tileUrlFunction_, this),
+ url: options.url,
+ urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
});
- var urls = options.urls;
- if (urls === undefined && options.url !== undefined) {
- urls = ol.TileUrlFunction.expandUrl(options.url);
- }
-
- /**
- * @private
- * @type {!Array.}
- */
- this.urls_ = urls || [];
-
/**
* @private
* @type {number}
@@ -221,7 +211,7 @@ ol.source.TileWMS.prototype.getRequestUrl_ =
function(tileCoord, tileSize, tileExtent,
pixelRatio, projection, params) {
- var urls = this.urls_;
+ var urls = this.urls;
if (urls.length === 0) {
return undefined;
}
@@ -301,16 +291,6 @@ ol.source.TileWMS.prototype.getTilePixelSize =
};
-/**
- * Return the URLs used for this WMS source.
- * @return {!Array.} URLs.
- * @api stable
- */
-ol.source.TileWMS.prototype.getUrls = function() {
- return this.urls_;
-};
-
-
/**
* @private
*/
@@ -319,8 +299,8 @@ ol.source.TileWMS.prototype.resetCoordKeyPrefix_ = function() {
var res = [];
var j, jj;
- for (j = 0, jj = this.urls_.length; j < jj; ++j) {
- res[i++] = this.urls_[j];
+ for (j = 0, jj = this.urls.length; j < jj; ++j) {
+ res[i++] = this.urls[j];
}
var key;
@@ -332,29 +312,6 @@ ol.source.TileWMS.prototype.resetCoordKeyPrefix_ = function() {
};
-/**
- * Set the URL to use for requests.
- * @param {string|undefined} url URL.
- * @api stable
- */
-ol.source.TileWMS.prototype.setUrl = function(url) {
- var urls = url !== undefined ? ol.TileUrlFunction.expandUrl(url) : null;
- this.setUrls(urls);
-};
-
-
-/**
- * Set the URLs to use for requests.
- * @param {Array.|undefined} urls URLs.
- * @api stable
- */
-ol.source.TileWMS.prototype.setUrls = function(urls) {
- this.urls_ = urls || [];
- this.resetCoordKeyPrefix_();
- this.changed();
-};
-
-
/**
* @param {ol.TileCoord} tileCoord Tile coordinate.
* @param {number} pixelRatio Pixel ratio.
diff --git a/src/ol/source/urltilesource.js b/src/ol/source/urltilesource.js
new file mode 100644
index 0000000000..0f0b70b7f5
--- /dev/null
+++ b/src/ol/source/urltilesource.js
@@ -0,0 +1,209 @@
+goog.provide('ol.source.UrlTile');
+
+goog.require('goog.events');
+goog.require('ol.TileLoadFunctionType');
+goog.require('ol.TileState');
+goog.require('ol.TileUrlFunction');
+goog.require('ol.TileUrlFunctionType');
+goog.require('ol.proj');
+goog.require('ol.source.Tile');
+goog.require('ol.source.TileEvent');
+
+
+/**
+ * @typedef {{attributions: (Array.|undefined),
+ * extent: (ol.Extent|undefined),
+ * logo: (string|olx.LogoOptions|undefined),
+ * opaque: (boolean|undefined),
+ * projection: ol.proj.ProjectionLike,
+ * state: (ol.source.State|string|undefined),
+ * tileGrid: (ol.tilegrid.TileGrid|undefined),
+ * tileLoadFunction: ol.TileLoadFunctionType,
+ * tilePixelRatio: (number|undefined),
+ * tileUrlFunction: (ol.TileUrlFunctionType|undefined),
+ * url: (string|undefined),
+ * urls: (Array.|undefined),
+ * wrapX: (boolean|undefined)}}
+ */
+ol.source.UrlTileOptions;
+
+
+
+/**
+ * @classdesc
+ * Base class for sources providing tiles divided into a tile grid over http.
+ *
+ * @constructor
+ * @fires ol.source.TileEvent
+ * @extends {ol.source.Tile}
+ * @param {ol.source.UrlTileOptions} options Image tile options.
+ */
+ol.source.UrlTile = function(options) {
+
+ goog.base(this, {
+ attributions: options.attributions,
+ cacheSize: options.cacheSize,
+ extent: options.extent,
+ logo: options.logo,
+ opaque: options.opaque,
+ projection: options.projection,
+ state: options.state ?
+ /** @type {ol.source.State} */ (options.state) : undefined,
+ tileGrid: options.tileGrid,
+ tilePixelRatio: options.tilePixelRatio,
+ wrapX: options.wrapX
+ });
+
+ /**
+ * @protected
+ * @type {ol.TileLoadFunctionType}
+ */
+ this.tileLoadFunction = options.tileLoadFunction;
+
+ /**
+ * @protected
+ * @type {ol.TileUrlFunctionType}
+ */
+ this.tileUrlFunction = options.tileUrlFunction ?
+ options.tileUrlFunction :
+ ol.TileUrlFunction.nullTileUrlFunction;
+
+ /**
+ * @protected
+ * @type {!Array.|null}
+ */
+ this.urls = null;
+
+ if (options.urls) {
+ if (options.tileUrlFunction) {
+ this.urls = options.urls;
+ } else {
+ this.setUrls(options.urls);
+ }
+ } else if (options.url) {
+ this.setUrl(options.url);
+ }
+ if (options.tileUrlFunction) {
+ this.setTileUrlFunction(options.tileUrlFunction);
+ }
+
+};
+goog.inherits(ol.source.UrlTile, ol.source.Tile);
+
+
+/**
+ * Return the tile load function of the source.
+ * @return {ol.TileLoadFunctionType} TileLoadFunction
+ * @api
+ */
+ol.source.UrlTile.prototype.getTileLoadFunction = function() {
+ return this.tileLoadFunction;
+};
+
+
+/**
+ * Return the tile URL function of the source.
+ * @return {ol.TileUrlFunctionType} TileUrlFunction
+ * @api
+ */
+ol.source.UrlTile.prototype.getTileUrlFunction = function() {
+ return this.tileUrlFunction;
+};
+
+
+/**
+ * Return the URLs used for this source.
+ * When a tileUrlFunction is used instead of url or urls,
+ * null will be returned.
+ * @return {!Array.|null} URLs.
+ * @api
+ */
+ol.source.UrlTile.prototype.getUrls = function() {
+ return this.urls;
+};
+
+
+/**
+ * Handle tile change events.
+ * @param {goog.events.Event} event Event.
+ * @protected
+ */
+ol.source.UrlTile.prototype.handleTileChange = function(event) {
+ var tile = /** @type {ol.Tile} */ (event.target);
+ switch (tile.getState()) {
+ case ol.TileState.LOADING:
+ this.dispatchEvent(
+ new ol.source.TileEvent(ol.source.TileEventType.TILELOADSTART, tile));
+ break;
+ case ol.TileState.LOADED:
+ this.dispatchEvent(
+ new ol.source.TileEvent(ol.source.TileEventType.TILELOADEND, tile));
+ break;
+ case ol.TileState.ERROR:
+ this.dispatchEvent(
+ new ol.source.TileEvent(ol.source.TileEventType.TILELOADERROR, tile));
+ break;
+ }
+};
+
+
+/**
+ * Set the tile load function of the source.
+ * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
+ * @api
+ */
+ol.source.UrlTile.prototype.setTileLoadFunction = function(tileLoadFunction) {
+ this.tileCache.clear();
+ this.tileLoadFunction = tileLoadFunction;
+ this.changed();
+};
+
+
+/**
+ * Set the tile URL function of the source.
+ * @param {ol.TileUrlFunctionType} tileUrlFunction Tile URL function.
+ * @api
+ */
+ol.source.UrlTile.prototype.setTileUrlFunction = function(tileUrlFunction) {
+ // FIXME It should be possible to be more intelligent and avoid clearing the
+ // FIXME cache. The tile URL function would need to be incorporated into the
+ // FIXME cache key somehow.
+ this.tileCache.clear();
+ this.tileUrlFunction = tileUrlFunction;
+ this.changed();
+};
+
+
+/**
+ * Set the URL to use for requests.
+ * @param {string} url URL.
+ * @api stable
+ */
+ol.source.UrlTile.prototype.setUrl = function(url) {
+ this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
+ ol.TileUrlFunction.expandUrl(url), this.tileGrid));
+ this.urls = [url];
+};
+
+
+/**
+ * Set the URLs to use for requests.
+ * @param {Array.} urls URLs.
+ * @api stable
+ */
+ol.source.UrlTile.prototype.setUrls = function(urls) {
+ this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
+ urls, this.tileGrid));
+ this.urls = urls;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.source.UrlTile.prototype.useTile = function(z, x, y) {
+ var tileCoordKey = this.getKeyZXY(z, x, y);
+ if (this.tileCache.containsKey(tileCoordKey)) {
+ this.tileCache.get(tileCoordKey);
+ }
+};
diff --git a/src/ol/source/vectorsource.js b/src/ol/source/vectorsource.js
index d36696c86f..f17d5ebd74 100644
--- a/src/ol/source/vectorsource.js
+++ b/src/ol/source/vectorsource.js
@@ -66,7 +66,9 @@ ol.source.VectorEventType = {
/**
* @classdesc
- * Provides a source of features for vector layers.
+ * Provides a source of features for vector layers. Vector features provided
+ * by this source are suitable for editing. See {@link ol.source.VectorTile} for
+ * vector data that is optimized for rendering.
*
* @constructor
* @extends {ol.source.Source}
@@ -491,20 +493,6 @@ ol.source.Vector.prototype.forEachFeatureInExtent =
};
-/**
- * @param {ol.Extent} extent Extent.
- * @param {number} resolution Resolution.
- * @param {function(this: T, ol.Feature): S} f Callback.
- * @param {T=} opt_this The object to use as `this` in `f`.
- * @return {S|undefined}
- * @template T,S
- */
-ol.source.Vector.prototype.forEachFeatureInExtentAtResolution =
- function(extent, resolution, f, opt_this) {
- return this.forEachFeatureInExtent(extent, f, opt_this);
-};
-
-
/**
* Iterate through all features whose geometry intersects the provided extent,
* calling the callback with each feature. If the callback returns a "truthy"
diff --git a/src/ol/source/vectortilesource.js b/src/ol/source/vectortilesource.js
new file mode 100644
index 0000000000..5fb8ae4435
--- /dev/null
+++ b/src/ol/source/vectortilesource.js
@@ -0,0 +1,103 @@
+goog.provide('ol.source.VectorTile');
+
+goog.require('goog.asserts');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.TileState');
+goog.require('ol.VectorTile');
+goog.require('ol.featureloader');
+goog.require('ol.source.UrlTile');
+
+
+
+/**
+ * @classdesc
+ * Class for layer sources providing vector data divided into a tile grid, to be
+ * used with {@link ol.layer.VectorTile}. Although this source receives tiles
+ * with vector features from the server, it is not meant for feature editing.
+ * Features are optimized for rendering, their geometries are clipped at or near
+ * tile boundaries and simplified for a view resolution. See
+ * {@link ol.source.Vector} for vector sources that are suitable for feature
+ * editing.
+ *
+ * @constructor
+ * @fires ol.source.TileEvent
+ * @extends {ol.source.UrlTile}
+ * @param {olx.source.VectorTileOptions} options Vector tile options.
+ * @api
+ */
+ol.source.VectorTile = function(options) {
+
+ goog.base(this, {
+ attributions: options.attributions,
+ cacheSize: ol.DEFAULT_TILE_CACHE_HIGH_WATER_MARK / 16,
+ extent: options.extent,
+ logo: options.logo,
+ opaque: options.opaque,
+ projection: options.projection,
+ state: options.state ?
+ /** @type {ol.source.State} */ (options.state) : undefined,
+ tileGrid: options.tileGrid,
+ tileLoadFunction: options.tileLoadFunction ?
+ options.tileLoadFunction : ol.source.VectorTile.defaultTileLoadFunction,
+ tileUrlFunction: options.tileUrlFunction,
+ tilePixelRatio: options.tilePixelRatio,
+ url: options.url,
+ urls: options.urls,
+ wrapX: options.wrapX === undefined ? true : options.wrapX
+ });
+
+ /**
+ * @private
+ * @type {ol.format.Feature}
+ */
+ this.format_ = options.format ? options.format : null;
+
+ /**
+ * @protected
+ * @type {function(new: ol.VectorTile, ol.TileCoord, ol.TileState, string,
+ * ol.format.Feature, ol.TileLoadFunctionType)}
+ */
+ this.tileClass = options.tileClass ? options.tileClass : ol.VectorTile;
+
+};
+goog.inherits(ol.source.VectorTile, ol.source.UrlTile);
+
+
+/**
+ * @inheritDoc
+ */
+ol.source.VectorTile.prototype.getTile =
+ function(z, x, y, pixelRatio, projection) {
+ var tileCoordKey = this.getKeyZXY(z, x, y);
+ if (this.tileCache.containsKey(tileCoordKey)) {
+ return /** @type {!ol.Tile} */ (this.tileCache.get(tileCoordKey));
+ } else {
+ goog.asserts.assert(projection, 'argument projection is truthy');
+ var tileCoord = [z, x, y];
+ var urlTileCoord = this.getTileCoordForTileUrlFunction(
+ tileCoord, projection);
+ var tileUrl = urlTileCoord ?
+ this.tileUrlFunction(urlTileCoord, pixelRatio, projection) : undefined;
+ var tile = new this.tileClass(
+ tileCoord,
+ tileUrl !== undefined ? ol.TileState.IDLE : ol.TileState.EMPTY,
+ tileUrl !== undefined ? tileUrl : '',
+ this.format_,
+ this.tileLoadFunction);
+ goog.events.listen(tile, goog.events.EventType.CHANGE,
+ this.handleTileChange, false, this);
+
+ this.tileCache.set(tileCoordKey, tile);
+ return tile;
+ }
+};
+
+
+/**
+ * @param {ol.VectorTile} vectorTile Vector tile.
+ * @param {string} url URL.
+ */
+ol.source.VectorTile.defaultTileLoadFunction = function(vectorTile, url) {
+ vectorTile.setLoader(ol.featureloader.tile(url, vectorTile.getFormat()));
+};
diff --git a/src/ol/source/wmtssource.js b/src/ol/source/wmtssource.js
index b9fd7c0d8e..14483b02d5 100644
--- a/src/ol/source/wmtssource.js
+++ b/src/ol/source/wmtssource.js
@@ -87,12 +87,6 @@ ol.source.WMTS = function(options) {
urls = ol.TileUrlFunction.expandUrl(options.url);
}
- /**
- * @private
- * @type {!Array.}
- */
- this.urls_ = urls || [];
-
// FIXME: should we guess this requestEncoding from options.url(s)
// structure? that would mean KVP only if a template is not provided.
@@ -175,9 +169,9 @@ ol.source.WMTS = function(options) {
});
}
- var tileUrlFunction = this.urls_.length > 0 ?
+ var tileUrlFunction = (urls && urls.length > 0) ?
ol.TileUrlFunction.createFromTileUrlFunctions(
- this.urls_.map(createFromWMTSTemplate)) :
+ urls.map(createFromWMTSTemplate)) :
ol.TileUrlFunction.nullTileUrlFunction;
goog.base(this, {
@@ -191,6 +185,7 @@ ol.source.WMTS = function(options) {
tileLoadFunction: options.tileLoadFunction,
tilePixelRatio: options.tilePixelRatio,
tileUrlFunction: tileUrlFunction,
+ urls: urls,
wrapX: options.wrapX !== undefined ? options.wrapX : false
});
@@ -268,16 +263,6 @@ ol.source.WMTS.prototype.getStyle = function() {
};
-/**
- * Return the URLs used for this WMTS source.
- * @return {!Array.} URLs.
- * @api
- */
-ol.source.WMTS.prototype.getUrls = function() {
- return this.urls_;
-};
-
-
/**
* Return the version of the WMTS source.
* @return {string} Version.
diff --git a/src/ol/source/xyzsource.js b/src/ol/source/xyzsource.js
index 17c1f46ed7..0ca9c13cba 100644
--- a/src/ol/source/xyzsource.js
+++ b/src/ol/source/xyzsource.js
@@ -1,6 +1,5 @@
goog.provide('ol.source.XYZ');
-goog.require('ol.TileUrlFunction');
goog.require('ol.source.TileImage');
@@ -38,12 +37,6 @@ ol.source.XYZ = function(options) {
tileSize: options.tileSize
});
- /**
- * @private
- * @type {!Array.|null}
- */
- this.urls_ = null;
-
goog.base(this, {
attributions: options.attributions,
crossOrigin: options.crossOrigin,
@@ -53,52 +46,11 @@ ol.source.XYZ = function(options) {
tileGrid: tileGrid,
tileLoadFunction: options.tileLoadFunction,
tilePixelRatio: options.tilePixelRatio,
- tileUrlFunction: ol.TileUrlFunction.nullTileUrlFunction,
+ tileUrlFunction: options.tileUrlFunction,
+ url: options.url,
+ urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
});
- if (options.tileUrlFunction !== undefined) {
- this.setTileUrlFunction(options.tileUrlFunction);
- } else if (options.urls !== undefined) {
- this.setUrls(options.urls);
- } else if (options.url !== undefined) {
- this.setUrl(options.url);
- }
-
};
goog.inherits(ol.source.XYZ, ol.source.TileImage);
-
-
-/**
- * Return the URLs used for this XYZ source.
- * When a tileUrlFunction is used instead of url or urls,
- * null will be returned.
- * @return {!Array.|null} URLs.
- * @api
- */
-ol.source.XYZ.prototype.getUrls = function() {
- return this.urls_;
-};
-
-
-/**
- * Set the URL to use for requests.
- * @param {string} url URL.
- * @api stable
- */
-ol.source.XYZ.prototype.setUrl = function(url) {
- this.setTileUrlFunction(ol.TileUrlFunction.createFromTemplates(
- ol.TileUrlFunction.expandUrl(url), this.tileGrid));
- this.urls_ = [url];
-};
-
-
-/**
- * Set the URLs to use for requests.
- * @param {Array.} urls URLs.
- */
-ol.source.XYZ.prototype.setUrls = function(urls) {
- this.setTileUrlFunction(
- ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid));
- this.urls_ = urls;
-};
diff --git a/src/ol/style/style.js b/src/ol/style/style.js
index 3e4c1d46eb..5adb92755e 100644
--- a/src/ol/style/style.js
+++ b/src/ol/style/style.js
@@ -198,7 +198,8 @@ ol.style.Style.prototype.setZIndex = function(zIndex) {
* the view's resolution. The function should return an array of
* {@link ol.style.Style}. This way e.g. a vector layer can be styled.
*
- * @typedef {function(ol.Feature, number): Array.}
+ * @typedef {function((ol.Feature|ol.render.Feature), number):
+ * Array.}
* @api
*/
ol.style.StyleFunction;
@@ -245,7 +246,7 @@ ol.style.defaultStyle_ = null;
/**
- * @param {ol.Feature} feature Feature.
+ * @param {ol.Feature|ol.render.Feature} feature Feature.
* @param {number} resolution Resolution.
* @return {Array.} Style.
*/
@@ -354,7 +355,8 @@ ol.style.createDefaultEditingStyles = function() {
* A function that takes an {@link ol.Feature} as argument and returns an
* {@link ol.geom.Geometry} that will be rendered and styled for the feature.
*
- * @typedef {function(ol.Feature): (ol.geom.Geometry|undefined)}
+ * @typedef {function((ol.Feature|ol.render.Feature)):
+ * (ol.geom.Geometry|ol.render.Feature|undefined)}
* @api
*/
ol.style.GeometryFunction;
@@ -362,8 +364,9 @@ ol.style.GeometryFunction;
/**
* Function that is called with a feature and returns its default geometry.
- * @param {ol.Feature} feature Feature to get the geometry for.
- * @return {ol.geom.Geometry|undefined} Geometry to render.
+ * @param {ol.Feature|ol.render.Feature} feature Feature to get the geometry
+ * for.
+ * @return {ol.geom.Geometry|ol.render.Feature|undefined} Geometry to render.
*/
ol.style.defaultGeometryFunction = function(feature) {
goog.asserts.assert(feature, 'feature must not be null');
diff --git a/src/ol/tileloadfunction.js b/src/ol/tileloadfunction.js
index e459a73eb8..37f3e0d8f5 100644
--- a/src/ol/tileloadfunction.js
+++ b/src/ol/tileloadfunction.js
@@ -3,10 +3,10 @@ goog.provide('ol.TileVectorLoadFunctionType');
/**
- * A function that takes an {@link ol.ImageTile} for the image tile and a
- * `{string}` for the src as arguments.
+ * A function that takes an {@link ol.Tile} for the tile and a
+ * `{string}` for the url as arguments.
*
- * @typedef {function(ol.ImageTile, string)}
+ * @typedef {function(ol.Tile, string)}
* @api
*/
ol.TileLoadFunctionType;
diff --git a/src/ol/vectortile.js b/src/ol/vectortile.js
new file mode 100644
index 0000000000..a533a1c92a
--- /dev/null
+++ b/src/ol/vectortile.js
@@ -0,0 +1,179 @@
+goog.provide('ol.VectorTile');
+
+goog.require('ol.Tile');
+goog.require('ol.TileCoord');
+goog.require('ol.TileLoadFunctionType');
+goog.require('ol.TileState');
+
+
+/**
+ * @typedef {{
+ * dirty: boolean,
+ * renderedRenderOrder: (null|function(ol.Feature, ol.Feature):number),
+ * renderedRevision: number,
+ * replayGroup: ol.render.IReplayGroup}}
+ */
+ol.TileReplayState;
+
+
+
+/**
+ * @constructor
+ * @extends {ol.Tile}
+ * @param {ol.TileCoord} tileCoord Tile coordinate.
+ * @param {ol.TileState} state State.
+ * @param {string} src Data source url.
+ * @param {ol.format.Feature} format Feature format.
+ * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
+ */
+ol.VectorTile = function(tileCoord, state, src, format, tileLoadFunction) {
+
+ goog.base(this, tileCoord, state);
+
+ /**
+ * @private
+ * @type {ol.format.Feature}
+ */
+ this.format_ = format;
+
+ /**
+ * @private
+ * @type {Array.}
+ */
+ this.features_ = null;
+
+ /**
+ * @private
+ * @type {ol.FeatureLoader}
+ */
+ this.loader_;
+
+ /**
+ * @private
+ * @type {ol.proj.Projection}
+ */
+ this.projection_ = null;
+
+ /**
+ * @private
+ * @type {ol.TileReplayState}
+ */
+ this.replayState_ = {
+ dirty: false,
+ renderedRenderOrder: null,
+ renderedRevision: -1,
+ replayGroup: null
+ };
+
+ /**
+ * @private
+ * @type {ol.TileLoadFunctionType}
+ */
+ this.tileLoadFunction_ = tileLoadFunction;
+
+ /**
+ * @private
+ * @type {string}
+ */
+ this.url_ = src;
+
+};
+goog.inherits(ol.VectorTile, ol.Tile);
+
+
+/**
+ * @inheritDoc
+ */
+ol.VectorTile.prototype.disposeInternal = function() {
+ goog.base(this, 'disposeInternal');
+};
+
+
+/**
+ * Get the feature format assigned for reading this tile's features.
+ * @return {ol.format.Feature} Feature format.
+ * @api
+ */
+ol.VectorTile.prototype.getFormat = function() {
+ return this.format_;
+};
+
+
+/**
+ * @return {Array.} Features.
+ */
+ol.VectorTile.prototype.getFeatures = function() {
+ return this.features_;
+};
+
+
+/**
+ * @return {ol.TileReplayState}
+ */
+ol.VectorTile.prototype.getReplayState = function() {
+ return this.replayState_;
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.VectorTile.prototype.getKey = function() {
+ return this.url_;
+};
+
+
+/**
+ * @return {ol.proj.Projection} Projection.
+ */
+ol.VectorTile.prototype.getProjection = function() {
+ return this.projection_;
+};
+
+
+/**
+ * Load the tile.
+ */
+ol.VectorTile.prototype.load = function() {
+ if (this.state == ol.TileState.IDLE) {
+ this.setState(ol.TileState.LOADING);
+ this.tileLoadFunction_(this, this.url_);
+ this.loader_(null, NaN, null);
+ }
+};
+
+
+/**
+ * @param {Array.} features Features.
+ */
+ol.VectorTile.prototype.setFeatures = function(features) {
+ this.features_ = features;
+ this.setState(ol.TileState.LOADED);
+};
+
+
+/**
+ * @param {ol.proj.Projection} projection Projection.
+ */
+ol.VectorTile.prototype.setProjection = function(projection) {
+ this.projection_ = projection;
+};
+
+
+/**
+ * @param {ol.TileState} tileState Tile state.
+ */
+ol.VectorTile.prototype.setState = function(tileState) {
+ this.state = tileState;
+ this.changed();
+};
+
+
+/**
+ * Set the feature loader for reading this tile's features.
+ * @param {ol.FeatureLoader} loader Feature loader.
+ * @api
+ */
+ol.VectorTile.prototype.setLoader = function(loader) {
+ this.loader_ = loader;
+};
diff --git a/test/spec/ol/data/14-8938-5680.vector.pbf b/test/spec/ol/data/14-8938-5680.vector.pbf
new file mode 100644
index 0000000000..0ed0c1ee24
Binary files /dev/null and b/test/spec/ol/data/14-8938-5680.vector.pbf differ
diff --git a/test/spec/ol/format/mvtformat.test.js b/test/spec/ol/format/mvtformat.test.js
new file mode 100644
index 0000000000..2e722746a8
--- /dev/null
+++ b/test/spec/ol/format/mvtformat.test.js
@@ -0,0 +1,78 @@
+goog.provide('ol.test.format.MVT');
+
+
+describe('ol.format.MVT', function() {
+
+ var data;
+ beforeEach(function(done) {
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', 'spec/ol/data/14-8938-5680.vector.pbf');
+ xhr.responseType = 'arraybuffer';
+ xhr.onload = function() {
+ data = xhr.response;
+ done();
+ };
+ xhr.send();
+ });
+
+ describe('#readFeatures', function() {
+
+ it('uses ol.render.Feature as feature class by default', function() {
+ var format = new ol.format.MVT({layers: ['water']});
+ var features = format.readFeatures(data);
+ expect(features[0]).to.be.a(ol.render.Feature);
+ });
+
+ it('parses only specified layers', function() {
+ var format = new ol.format.MVT({layers: ['water']});
+ var features = format.readFeatures(data);
+ expect(features.length).to.be(10);
+ });
+
+ it('parses geometries correctly', function() {
+ var format = new ol.format.MVT({
+ featureClass: ol.Feature,
+ layers: ['poi_label']
+ });
+ var pbf = new ol.ext.pbf(data);
+ var tile = new ol.ext.vectortile.VectorTile(pbf);
+ var geometry, rawGeometry;
+
+ rawGeometry = tile.layers['poi_label'].feature(0).loadGeometry();
+ geometry = format.readFeatures(data)[0]
+ .getGeometry();
+ expect(geometry.getType()).to.be('Point');
+ expect(geometry.getCoordinates())
+ .to.eql([rawGeometry[0][0].x, rawGeometry[0][0].y]);
+
+ rawGeometry = tile.layers['water'].feature(0).loadGeometry();
+ format.setLayers(['water']);
+ geometry = format.readFeatures(data)[0]
+ .getGeometry();
+ expect(geometry.getType()).to.be('Polygon');
+ expect(rawGeometry[0].length)
+ .to.equal(geometry.getCoordinates()[0].length);
+ expect(geometry.getCoordinates()[0][0])
+ .to.eql([rawGeometry[0][0].x, rawGeometry[0][0].y]);
+
+ rawGeometry = tile.layers['barrier_line'].feature(0).loadGeometry();
+ format.setLayers(['barrier_line']);
+ geometry = format.readFeatures(data)[0]
+ .getGeometry();
+ expect(geometry.getType()).to.be('MultiLineString');
+ expect(rawGeometry[1].length)
+ .to.equal(geometry.getCoordinates()[1].length);
+ expect(geometry.getCoordinates()[1][0])
+ .to.eql([rawGeometry[1][0].x, rawGeometry[1][0].y]);
+ });
+
+ });
+
+});
+
+
+goog.require('ol.Feature');
+goog.require('ol.ext.pbf');
+goog.require('ol.ext.vectortile');
+goog.require('ol.format.MVT');
+goog.require('ol.render.Feature');
diff --git a/test/spec/ol/interaction/modifyinteraction.test.js b/test/spec/ol/interaction/modifyinteraction.test.js
index e1692e4be2..511eee9ec5 100644
--- a/test/spec/ol/interaction/modifyinteraction.test.js
+++ b/test/spec/ol/interaction/modifyinteraction.test.js
@@ -150,19 +150,21 @@ describe('ol.interaction.Modify', function() {
it('works when clicking on a shared vertex', function() {
features.push(features[0].clone());
+ var first = features[0];
+ var firstRevision = first.getGeometry().getRevision();
+ var second = features[1];
+ var secondRevision = second.getGeometry().getRevision();
+
var modify = new ol.interaction.Modify({
features: new ol.Collection(features)
});
map.addInteraction(modify);
- var first = features[0];
- var second = features[1];
-
events = trackEvents(first, modify);
- expect(first.getGeometry().getRevision()).to.equal(1);
+ expect(first.getGeometry().getRevision()).to.equal(firstRevision);
expect(first.getGeometry().getCoordinates()[0]).to.have.length(5);
- expect(second.getGeometry().getRevision()).to.equal(2);
+ expect(second.getGeometry().getRevision()).to.equal(secondRevision);
expect(second.getGeometry().getCoordinates()[0]).to.have.length(5);
simulateEvent('pointerdown', 10, -20, false, 0);
@@ -170,9 +172,9 @@ describe('ol.interaction.Modify', function() {
simulateEvent('click', 10, -20, false, 0);
simulateEvent('singleclick', 10, -20, false, 0);
- expect(first.getGeometry().getRevision()).to.equal(2);
+ expect(first.getGeometry().getRevision()).to.equal(firstRevision + 1);
expect(first.getGeometry().getCoordinates()[0]).to.have.length(4);
- expect(second.getGeometry().getRevision()).to.equal(3);
+ expect(second.getGeometry().getRevision()).to.equal(secondRevision + 1);
expect(second.getGeometry().getCoordinates()[0]).to.have.length(4);
validateEvents(events, features);
diff --git a/test/spec/ol/layer/vectortilelayer.test.js b/test/spec/ol/layer/vectortilelayer.test.js
new file mode 100644
index 0000000000..4ced5c282e
--- /dev/null
+++ b/test/spec/ol/layer/vectortilelayer.test.js
@@ -0,0 +1,37 @@
+goog.provide('ol.test.layer.VectorTile');
+
+describe('ol.layer.VectorTile', function() {
+
+ describe('constructor (defaults)', function() {
+
+ var layer;
+
+ beforeEach(function() {
+ layer = new ol.layer.VectorTile({
+ source: new ol.source.VectorTile({})
+ });
+ });
+
+ afterEach(function() {
+ goog.dispose(layer);
+ });
+
+ it('creates an instance', function() {
+ expect(layer).to.be.a(ol.layer.VectorTile);
+ });
+
+ it('provides default preload', function() {
+ expect(layer.getPreload()).to.be(0);
+ });
+
+ it('provides default useInterimTilesOnError', function() {
+ expect(layer.getUseInterimTilesOnError()).to.be(true);
+ });
+
+ });
+
+});
+
+goog.require('goog.dispose');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');
diff --git a/test/spec/ol/proj/proj.test.js b/test/spec/ol/proj/proj.test.js
index a7dfe204ee..d792b4b07a 100644
--- a/test/spec/ol/proj/proj.test.js
+++ b/test/spec/ol/proj/proj.test.js
@@ -56,6 +56,19 @@ describe('ol.proj', function() {
'EPSG:4326'
]);
});
+
+ it('requires code and units to be equal for projection evquivalence',
+ function() {
+ var proj1 = new ol.proj.Projection({
+ code: 'EPSG:3857',
+ units: 'm'
+ });
+ var proj2 = new ol.proj.Projection({
+ code: 'EPSG:3857',
+ units: 'tile-pixels'
+ });
+ expect(ol.proj.equivalent(proj1, proj2)).to.not.be.ok();
+ });
});
describe('identify transform', function() {
diff --git a/test/spec/ol/render/renderfeature.test.js b/test/spec/ol/render/renderfeature.test.js
new file mode 100644
index 0000000000..622cfaddc4
--- /dev/null
+++ b/test/spec/ol/render/renderfeature.test.js
@@ -0,0 +1,90 @@
+goog.provide('ol.test.render.Feature');
+
+describe('ol.render.Feature', function() {
+
+ var renderFeature;
+ var type = 'Point';
+ var flatCoordinates = [0, 0];
+ var ends = null;
+ var properties = {foo: 'bar'};
+
+ describe('Constructor', function() {
+ it('creates an instance', function() {
+ renderFeature =
+ new ol.render.Feature(type, flatCoordinates, ends, properties);
+ expect(renderFeature).to.be.a(ol.render.Feature);
+ });
+ });
+
+ describe('#get()', function() {
+ it('returns a single property', function() {
+ expect(renderFeature.get('foo')).to.be('bar');
+ });
+ });
+
+ describe('#getEnds()', function() {
+ it('returns the ends it was created with', function() {
+ expect(renderFeature.getEnds()).to.equal(ends);
+ });
+ });
+
+ describe('#getExtent()', function() {
+ it('returns the correct extent for a point', function() {
+ expect(renderFeature.getExtent()).to.eql([0, 0, 0, 0]);
+ });
+ it('caches the extent', function() {
+ expect(renderFeature.getExtent()).to.equal(renderFeature.extent_);
+ });
+ it('returns the correct extent for a linestring', function() {
+ var feature =
+ new ol.render.Feature('LineString', [-1, -2, 2, 1], null, {});
+ expect(feature.getExtent()).to.eql([-1, -2, 2, 1]);
+ });
+ });
+
+ describe('#getFlatCoordinates()', function() {
+ it('returns the flat coordinates it was created with', function() {
+ expect(renderFeature.getFlatCoordinates()).to.equal(flatCoordinates);
+ });
+ });
+
+ describe('#getGeometry()', function() {
+ it('returns itself as geometry', function() {
+ expect(renderFeature.getGeometry()).to.equal(renderFeature);
+ });
+ });
+
+ describe('#getProperties()', function() {
+ it('returns the properties it was created with', function() {
+ expect(renderFeature.getProperties()).to.equal(properties);
+ });
+ });
+
+ describe('#getSimplifiedGeometry()', function() {
+ it('returns itself as simplified geometry', function() {
+ expect(renderFeature.getSimplifiedGeometry()).to.equal(renderFeature);
+ });
+ });
+
+ describe('#getStride()', function() {
+ it('returns 2', function() {
+ expect(renderFeature.getStride()).to.be(2);
+ });
+ });
+
+ describe('#getStyleFunction()', function() {
+ it('returns undefined', function() {
+ expect(renderFeature.getStyleFunction()).to.be(undefined);
+ });
+ });
+
+ describe('#getType()', function() {
+ it('returns the type it was created with', function() {
+ expect(renderFeature.getType()).to.equal(type);
+ });
+ });
+
+});
+
+
+goog.require('ol.render.Feature');
diff --git a/test/spec/ol/renderer/canvas/canvasvectortilelayerrenderer.test.js b/test/spec/ol/renderer/canvas/canvasvectortilelayerrenderer.test.js
new file mode 100644
index 0000000000..da228a61c0
--- /dev/null
+++ b/test/spec/ol/renderer/canvas/canvasvectortilelayerrenderer.test.js
@@ -0,0 +1,128 @@
+goog.provide('ol.test.renderer.canvas.VectorTileLayer');
+
+describe('ol.renderer.canvas.VectorTileLayer', function() {
+
+ describe('constructor', function() {
+
+ it('creates a new instance', function() {
+ var layer = new ol.layer.VectorTile({
+ source: new ol.source.VectorTile({})
+ });
+ var renderer = new ol.renderer.canvas.VectorTileLayer(layer);
+ expect(renderer).to.be.a(ol.renderer.canvas.VectorTileLayer);
+ });
+
+ it('gives precedence to feature styles over layer styles', function() {
+ var target = document.createElement('div');
+ target.style.width = '256px';
+ target.style.height = '256px';
+ document.body.appendChild(target);
+ var map = new ol.Map({
+ view: new ol.View({
+ center: [0, 0],
+ zoom: 0
+ }),
+ target: target
+ });
+ var layerStyle = [new ol.style.Style({
+ text: new ol.style.Text({
+ text: 'layer'
+ })
+ })];
+ var featureStyle = [new ol.style.Style({
+ text: new ol.style.Text({
+ text: 'feature'
+ })
+ })];
+ var feature1 = new ol.Feature(new ol.geom.Point([0, 0]));
+ var feature2 = new ol.Feature(new ol.geom.Point([0, 0]));
+ feature2.setStyle(featureStyle);
+ var TileClass = function() {
+ ol.VectorTile.apply(this, arguments);
+ this.setState('loaded');
+ this.setFeatures([feature1, feature2]);
+ this.setProjection(ol.proj.get('EPSG:3857'));
+ };
+ ol.inherits(TileClass, ol.VectorTile);
+ var source = new ol.source.VectorTile({
+ format: new ol.format.MVT(),
+ tileClass: TileClass,
+ tileGrid: ol.tilegrid.createXYZ()
+ });
+ var layer = new ol.layer.VectorTile({
+ source: source,
+ style: layerStyle
+ });
+ map.addLayer(layer);
+ var spy = sinon.spy(map.getRenderer().getLayerRenderer(layer),
+ 'renderFeature');
+ map.renderSync();
+ expect(spy.getCall(0).args[2]).to.be(layerStyle);
+ expect(spy.getCall(1).args[2]).to.be(featureStyle);
+ document.body.removeChild(target);
+ });
+
+ });
+
+ describe('#forEachFeatureAtCoordinate', function() {
+ var layer, renderer, replayGroup;
+ var TileClass = function() {
+ ol.VectorTile.apply(this, arguments);
+ this.setState('loaded');
+ this.setProjection(ol.proj.get('EPSG:3857'));
+ this.replayState_.replayGroup = replayGroup;
+ };
+ ol.inherits(TileClass, ol.VectorTile);
+
+ beforeEach(function() {
+ replayGroup = {};
+ layer = new ol.layer.VectorTile({
+ source: new ol.source.VectorTile({
+ tileClass: TileClass,
+ tileGrid: ol.tilegrid.createXYZ()
+ })
+ });
+ renderer = new ol.renderer.canvas.VectorTileLayer(layer);
+ replayGroup.forEachFeatureAtCoordinate = function(coordinate,
+ resolution, rotation, skippedFeaturesUids, callback) {
+ var feature = new ol.Feature();
+ callback(feature);
+ callback(feature);
+ };
+ });
+
+ it('calls callback once per feature with a layer as 2nd arg', function() {
+ var spy = sinon.spy();
+ var coordinate = [0, 0];
+ var frameState = {
+ layerStates: {},
+ skippedFeatureUids: {},
+ viewState: {
+ resolution: 1,
+ rotation: 0
+ }
+ };
+ frameState.layerStates[goog.getUid(layer)] = {};
+ renderer.renderedTiles_ = [new TileClass([0, 0, -1])];
+ renderer.forEachFeatureAtCoordinate(
+ coordinate, frameState, spy, undefined);
+ expect(spy.callCount).to.be(1);
+ expect(spy.getCall(0).args[1]).to.equal(layer);
+ });
+ });
+
+});
+
+
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.VectorTile');
+goog.require('ol.View');
+goog.require('ol.format.MVT');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.proj');
+goog.require('ol.renderer.canvas.VectorTileLayer');
+goog.require('ol.source.VectorTile');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
diff --git a/test/spec/ol/source/tilevectorsource.test.js b/test/spec/ol/source/tilevectorsource.test.js
deleted file mode 100644
index a2329642ee..0000000000
--- a/test/spec/ol/source/tilevectorsource.test.js
+++ /dev/null
@@ -1,105 +0,0 @@
-goog.provide('ol.test.source.TileVector');
-
-
-describe('ol.source.TileVector', function() {
-
- describe('#loadFeatures()', function() {
-
- it('calls tileUrlFunction with correct tile coords', function() {
- var tileCoords = [];
- var source = new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- tileUrlFunction: function(tileCoord) {
- tileCoords.push(tileCoord.slice());
- return null;
- }
- });
- var projection = ol.proj.get('EPSG:3857');
- source.loadFeatures(
- [-8238854, 4969777, -8237854, 4970777], 4.8, projection);
- expect(tileCoords[0]).to.eql([15, 9647, -12321]);
- expect(tileCoords[1]).to.eql([15, 9647, -12320]);
- expect(tileCoords[2]).to.eql([15, 9648, -12321]);
- expect(tileCoords[3]).to.eql([15, 9648, -12320]);
- });
-
- });
-
- describe('#getTileCoordForTileUrlFunction()', function() {
-
- it('returns the expected tile coordinate - {wrapX: true}', function() {
- var tileSource = new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- wrapX: true
- });
- var projection = ol.proj.get('EPSG:3857');
-
- var tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, -31, -23], projection);
- expect(tileCoord).to.eql([6, 33, -23]);
-
- tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, 33, -23], projection);
- expect(tileCoord).to.eql([6, 33, -23]);
-
- tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, 97, -23], projection);
- expect(tileCoord).to.eql([6, 33, -23]);
- });
-
- it('returns the expected tile coordinate - {wrapX: false}', function() {
- var tileSource = new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- wrapX: false
- });
- var projection = ol.proj.get('EPSG:3857');
-
- var tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, -31, -23], projection);
- expect(tileCoord).to.eql(null);
-
- tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, 33, -23], projection);
- expect(tileCoord).to.eql([6, 33, -23]);
-
- tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, 97, -23], projection);
- expect(tileCoord).to.eql(null);
- });
-
- it('works with wrapX and custom projection without extent', function() {
- var tileSource = new ol.source.TileVector({
- format: new ol.format.TopoJSON(),
- tileGrid: ol.tilegrid.createXYZ({
- maxZoom: 19
- }),
- wrapX: true
- });
- var projection = new ol.proj.Projection({
- code: 'foo',
- global: true,
- units: 'm'
- });
-
- var tileCoord = tileSource.getTileCoordForTileUrlFunction(
- [6, -31, -23], projection);
- expect(tileCoord).to.eql([6, 33, -23]);
- });
- });
-
-});
-
-
-goog.require('ol.format.TopoJSON');
-goog.require('ol.proj');
-goog.require('ol.proj.Projection');
-goog.require('ol.source.TileVector');
diff --git a/test/spec/ol/source/urltilesource.test.js b/test/spec/ol/source/urltilesource.test.js
new file mode 100644
index 0000000000..8273b5956a
--- /dev/null
+++ b/test/spec/ol/source/urltilesource.test.js
@@ -0,0 +1,162 @@
+goog.provide('ol.test.source.UrlTile');
+
+
+describe('ol.source.UrlTile', function() {
+
+ describe('tileUrlFunction', function() {
+
+ var tileSource, tileGrid;
+
+ beforeEach(function() {
+ tileSource = new ol.source.UrlTile({
+ projection: 'EPSG:3857',
+ tileGrid: ol.tilegrid.createXYZ({maxZoom: 6}),
+ url: '{z}/{x}/{y}',
+ wrapX: true
+ });
+ tileGrid = tileSource.getTileGrid();
+ });
+
+ it('returns the expected URL', function() {
+
+ var coordinate = [829330.2064098881, 5933916.615134273];
+ var tileUrl;
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 0));
+ expect(tileUrl).to.eql('0/0/0');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 1));
+ expect(tileUrl).to.eql('1/1/0');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 2));
+ expect(tileUrl).to.eql('2/2/1');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 3));
+ expect(tileUrl).to.eql('3/4/2');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 4));
+ expect(tileUrl).to.eql('4/8/5');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 5));
+ expect(tileUrl).to.eql('5/16/11');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileGrid.getTileCoordForCoordAndZ(coordinate, 6));
+ expect(tileUrl).to.eql('6/33/22');
+
+ });
+
+ describe('wrap x', function() {
+
+ it('returns the expected URL', function() {
+ var projection = tileSource.getProjection();
+ var tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, -31, -23], projection));
+ expect(tileUrl).to.eql('6/33/22');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, 33, -23], projection));
+ expect(tileUrl).to.eql('6/33/22');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, 97, -23], projection));
+ expect(tileUrl).to.eql('6/33/22');
+ });
+
+ });
+
+ describe('crop y', function() {
+
+ it('returns the expected URL', function() {
+ var projection = tileSource.getProjection();
+ var tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, 33, 0], projection));
+ expect(tileUrl).to.be(undefined);
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, 33, -23], projection));
+ expect(tileUrl).to.eql('6/33/22');
+
+ tileUrl = tileSource.tileUrlFunction(
+ tileSource.getTileCoordForTileUrlFunction(
+ [6, 33, -65], projection));
+ expect(tileUrl).to.be(undefined);
+ });
+
+ });
+
+ });
+
+ describe('#getUrls', function() {
+
+ var sourceOptions;
+ var source;
+ var url = 'http://geo.nls.uk/maps/towns/glasgow1857/{z}/{x}/{-y}.png';
+
+ beforeEach(function() {
+ sourceOptions = {
+ tileGrid: ol.tilegrid.createXYZ({
+ extent: ol.proj.get('EPSG:4326').getExtent()
+ })
+ };
+ });
+
+ describe('using a "url" option', function() {
+ beforeEach(function() {
+ sourceOptions.url = url;
+ source = new ol.source.UrlTile(sourceOptions);
+ });
+
+ it('returns the XYZ URL', function() {
+ var urls = source.getUrls();
+ expect(urls).to.be.eql([url]);
+ });
+
+ });
+
+ describe('using a "urls" option', function() {
+ beforeEach(function() {
+ sourceOptions.urls = ['some_xyz_url1', 'some_xyz_url2'];
+ source = new ol.source.UrlTile(sourceOptions);
+ });
+
+ it('returns the XYZ URLs', function() {
+ var urls = source.getUrls();
+ expect(urls).to.be.eql(['some_xyz_url1', 'some_xyz_url2']);
+ });
+
+ });
+
+ describe('using a "tileUrlFunction"', function() {
+ beforeEach(function() {
+ sourceOptions.tileUrlFunction = function() {
+ return 'some_xyz_url';
+ };
+ source = new ol.source.UrlTile(sourceOptions);
+ });
+
+ it('returns null', function() {
+ var urls = source.getUrls();
+ expect(urls).to.be(null);
+ });
+
+ });
+
+ });
+
+});
+
+goog.require('ol.TileCoord');
+goog.require('ol.proj');
+goog.require('ol.source.UrlTile');
diff --git a/test/spec/ol/source/vectorsource.test.js b/test/spec/ol/source/vectorsource.test.js
index d3f7a5382a..2d0ca9cca8 100644
--- a/test/spec/ol/source/vectorsource.test.js
+++ b/test/spec/ol/source/vectorsource.test.js
@@ -62,6 +62,17 @@ describe('ol.source.Vector', function() {
expect(listener).to.be.called();
});
+ it('adds same id features only once', function() {
+ var source = new ol.source.Vector();
+ var feature1 = new ol.Feature();
+ feature1.setId('1');
+ var feature2 = new ol.Feature();
+ feature2.setId('1');
+ source.addFeature(feature1);
+ source.addFeature(feature2);
+ expect(source.getFeatures().length).to.be(1);
+ });
+
});
});
diff --git a/test/spec/ol/source/vectortilesource.test.js b/test/spec/ol/source/vectortilesource.test.js
new file mode 100644
index 0000000000..441c4f382d
--- /dev/null
+++ b/test/spec/ol/source/vectortilesource.test.js
@@ -0,0 +1,43 @@
+goog.provide('ol.test.source.VectorTile');
+
+
+describe('ol.source.VectorTile', function() {
+
+ var format = new ol.format.MVT();
+ var source = new ol.source.VectorTile({
+ format: format,
+ tileGrid: ol.tilegrid.createXYZ(),
+ url: '{z}/{x}/{y}.pbf'
+ });
+ var tile;
+
+ describe('constructor', function() {
+ it('sets the format on the instance', function() {
+ expect(source.format_).to.equal(format);
+ });
+ it('uses ol.VectorTile as default tileClass', function() {
+ expect(source.tileClass).to.equal(ol.VectorTile);
+ });
+ });
+
+ describe('#getTile()', function() {
+ it('creates a tile with the correct tile class', function() {
+ tile = source.getTile(0, 0, 0, 1, ol.proj.get('EPSG:3857'));
+ expect(tile).to.be.a(ol.VectorTile);
+ });
+ it('sets the correct tileCoord on the created tile', function() {
+ expect(tile.getTileCoord()).to.eql([0, 0, 0]);
+ });
+ it('fetches tile from cache when requested again', function() {
+ expect(source.getTile(0, 0, 0, 1, ol.proj.get('EPSG:3857')))
+ .to.equal(tile);
+ });
+ });
+
+});
+
+
+goog.require('ol.VectorTile');
+goog.require('ol.format.MVT');
+goog.require('ol.proj');
+goog.require('ol.source.VectorTile');
diff --git a/test_rendering/spec/ol/data/tiles/mvt/14-8938-5680.vector.pbf b/test_rendering/spec/ol/data/tiles/mvt/14-8938-5680.vector.pbf
new file mode 100644
index 0000000000..0ed0c1ee24
Binary files /dev/null and b/test_rendering/spec/ol/data/tiles/mvt/14-8938-5680.vector.pbf differ
diff --git a/test_rendering/spec/ol/layer/expected/vectortile-canvas.png b/test_rendering/spec/ol/layer/expected/vectortile-canvas.png
new file mode 100644
index 0000000000..8b6ddf8536
Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/vectortile-canvas.png differ
diff --git a/test_rendering/spec/ol/layer/vectortile.test.js b/test_rendering/spec/ol/layer/vectortile.test.js
new file mode 100644
index 0000000000..44b9eeadba
--- /dev/null
+++ b/test_rendering/spec/ol/layer/vectortile.test.js
@@ -0,0 +1,82 @@
+goog.provide('ol.test.rendering.layer.VectorTile');
+
+describe('ol.rendering.layer.VectorTile', function() {
+
+ var target, map;
+
+ function createMap(renderer) {
+ target = createMapDiv(50, 50);
+
+ map = new ol.Map({
+ target: target,
+ renderer: renderer,
+ view: new ol.View({
+ center: [1825927.7316762917, 6143091.089223046],
+ zoom: 14
+ })
+ });
+ return map;
+ }
+
+ function waitForTiles(source, layerOptions, onTileLoaded) {
+ var tilesLoading = 0;
+ var tileLoaded = 0;
+
+ var update = function() {
+ if (tilesLoading === tileLoaded) {
+ onTileLoaded();
+ }
+ };
+
+ source.on('tileloadstart', function(event) {
+ tilesLoading++;
+ });
+ source.on('tileloadend', function(event) {
+ tileLoaded++;
+ update();
+ });
+ source.on('tileloaderror', function(event) {
+ expect().fail('Tile failed to load');
+ });
+
+ var options = {
+ source: source
+ };
+ goog.object.extend(options, layerOptions);
+ map.addLayer(new ol.layer.VectorTile(options));
+ }
+
+ describe('vector tile layer', function() {
+ var source;
+
+ beforeEach(function() {
+ source = new ol.source.VectorTile({
+ format: new ol.format.MVT(),
+ tileGrid: ol.tilegrid.createXYZ(),
+ tilePixelRatio: 16,
+ url: 'spec/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf'
+ });
+ });
+
+ afterEach(function() {
+ disposeMap(map);
+ });
+
+ it('renders correctly with the canvas renderer', function(done) {
+ map = createMap('canvas');
+ waitForTiles(source, {}, function() {
+ expectResemble(map, 'spec/ol/layer/expected/vectortile-canvas.png',
+ IMAGE_TOLERANCE, done);
+ });
+ });
+
+ });
+
+});
+
+goog.require('goog.object');
+goog.require('ol.format.MVT');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.VectorTile');
+goog.require('ol.source.VectorTile');