ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4219 from ahocevar/vectortile

Browse Source 
Support tiled vector data and Mapbox vector tiles
This commit is contained in:
Andreas Hocevar
2015-10-28 10:43:55 +01:00
parent 05dfc226b7 80b78b8b5a
commit 2f06d214f5
71 changed files with 3118 additions and 1123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
changelog/upgrade-notes.md
View File

@@ -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

3
examples/mapbox-vector-tiles-advanced.css Normal file
View File

@@ -0,0 +1,3 @@
.map {
background: #f8f4f0;
}

17
examples/mapbox-vector-tiles-advanced.html Normal file
View File

@@ -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
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

73
examples/mapbox-vector-tiles-advanced.js Normal file
View File

@@ -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: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>'
})],
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()

3
examples/mapbox-vector-tiles.css Normal file
View File

@@ -0,0 +1,3 @@
.map {
background: #f8f4f0;
}

17
examples/mapbox-vector-tiles.html Normal file
View File

@@ -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
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

42
examples/mapbox-vector-tiles.js Normal file
View File

@@ -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: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>'
})],
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()

311
examples/resources/mapbox-streets-v6-style.js Normal file
View File

@@ -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;
};
}

4
examples/tile-vector.css
View File

@@ -1,4 +0,0 @@
#map {
max-width: 600px;
margin: 0 auto;
}

23
examples/tile-vector.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map" style="background: white;"></div>
</div>
</div>
<div class="alert">
<strong>Warning</strong> Map is becoming unresponsive with too many layers.
</div>
<fieldset>
<legend>Layers</legend>
<label class="checkbox"><input type="checkbox" id="landuse"/> Landuse</label>
<label class="checkbox"><input type="checkbox" id="buildings"/> Buildings</label>
<label class="checkbox"><input type="checkbox" id="water" checked/> Water</label>
<label class="checkbox"><input type="checkbox" id="roads" checked/> Roads</label>
</fieldset>

168
examples/tile-vector.js
View File

@@ -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());
});

7
externs/example.js
View File

@@ -9,3 +9,10 @@ var common;
* @return {string} Renderer type.
*/
common.getRendererFromQueryString = function() {};
/**
* @return {function((ol.Feature|ol.render.Feature), number):
* Array.<ol.style.Style>}
*/
var createMapboxStreetsV6Style = function() {};

319
externs/olx.js
View File

@@ -1685,6 +1685,57 @@ olx.format.EsriJSONOptions;
olx.format.EsriJSONOptions.prototype.geometryName;
/**
* @typedef {{featureClass: (function((ol.geom.Geometry|Object.<string, *>)=)|
* function(ol.geom.GeometryType,Array.<number>,
* (Array.<number>|Array.<Array.<number>>),Object.<string, *>)|
* undefined),
* geometryName: (string|undefined),
* layers: (Array.<string>|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.<string, *>)=)|
* function(ol.geom.GeometryType,Array.<number>,
* (Array.<number>|Array.<Array.<number>>),Object.<string, *>)}
* @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.<string>|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.Style>|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.Style>|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.<string>|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.<string>|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.<ol.Attribution>|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.<string>|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.<string>|undefined),
* wrapX: (boolean|undefined)}}
* @api
*/
olx.source.TileVectorOptions;
olx.source.VectorTileOptions;
/**
/**
* Attributions.
* @type {Array.<ol.Attribution>|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.<string>|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;
/**

6
package.json
View File

@@ -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}
]
}

58
src/ol/featureloader.js
View File

@@ -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.<ol.Feature>)} success
* Function called with the loaded features. Called with the vector
* @param {function(this:ol.VectorTile, Array.<ol.Feature>, ol.proj.Projection)|function(this:ol.source.Vector, Array.<ol.Feature>)} 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.<ol.Feature>} 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);
};

3
src/ol/format/featureformat.js
View File

@@ -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.<ol.Feature>} Features.
*/

1
src/ol/format/format.js
View File

@@ -5,6 +5,7 @@ goog.provide('ol.format.FormatType');
* @enum {string}
*/
ol.format.FormatType = {
ARRAY_BUFFER: 'arraybuffer',
JSON: 'json',
TEXT: 'text',
XML: 'xml'

259
src/ol/format/mvtformat.js Normal file
View File

@@ -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.<string, *>)=)|
* function(ol.geom.GeometryType,Array.<number>,
* (Array.<number>|Array.<Array.<number>>),Object.<string, *>)}
*/
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.<string>}
*/
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.<string>} layers Layers.
* @api
*/
ol.format.MVT.prototype.setLayers = function(layers) {
this.layers_ = layers;
};
/**
* @private
* @param {Object} coords Raw feature coordinates.
* @param {Array.<number>} flatCoordinates Flat coordinates to be populated by
* this function.
* @param {Array.<number>} 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;
};

6
src/ol/geom/geometry.js
View File

@@ -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;
};

18
src/ol/interaction/selectinteraction.js
View File

@@ -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_ =

99
src/ol/layer/vectortilelayer.js Normal file
View File

@@ -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);
};

8
src/ol/map.js
View File

@@ -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`.

8
src/ol/ol.js
View File

@@ -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

8
src/ol/proj/proj.js
View File

@@ -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);

27
src/ol/render/canvas/canvasimmediate.js
View File

@@ -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.<ol.geom.GeometryType,
* function(this: ol.render.canvas.Immediate, ol.geom.Geometry,
* 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,

50
src/ol/render/canvas/canvasreplay.js
View File

@@ -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.<string, boolean>} 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.<number>} */ (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.<string, boolean>} 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.<string, boolean>} 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.<string, boolean>} 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.

157
src/ol/render/renderfeature.js Normal file
View File

@@ -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.<number>} flatCoordinates Flat coordinates. These always need
* to be right-handed for polygons.
* @param {Array.<number>|Array.<Array.<number>>} ends Ends or Endss.
* @param {Object.<string, *>} 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.<number>}
*/
this.flatCoordinates_ = flatCoordinates;
/**
* @private
* @type {Array.<number>|Array.<Array.<number>>}
*/
this.ends_ = ends;
/**
* @private
* @type {Object.<string, *>}
*/
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.<number>|Array.<Array.<number>>} 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.<number>} 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.<string, *>} 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_;
};

62
src/ol/render/vector.js
View File

@@ -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) {

27
src/ol/render/vectorcontext.js
View File

@@ -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;

4
src/ol/render/webgl/webglimmediate.js
View File

@@ -294,8 +294,8 @@ ol.render.webgl.Immediate.prototype.setTextStyle = function(textStyle) {
* @const
* @private
* @type {Object.<ol.geom.GeometryType,
* function(this: ol.render.webgl.Immediate, ol.geom.Geometry,
* 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,

2
src/ol/renderer/canvas/canvasimagelayerrenderer.js
View File

@@ -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) {

4
src/ol/renderer/canvas/canvasmaprenderer.js
View File

@@ -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 {

7
src/ol/renderer/canvas/canvasvectorlayerrenderer.js
View File

@@ -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.<ol.Feature>} */
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();

442
src/ol/renderer/canvas/canvasvectortilelayerrenderer.js Normal file
View File

@@ -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.<ol.VectorTile>}
*/
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.<string, boolean>} */
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.<number, Object.<string, ol.VectorTile>>}
*/
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.<number>} */
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.<ol.style.Style>} 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;
};

2
src/ol/renderer/dom/domimagelayerrenderer.js
View File

@@ -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) {

7
src/ol/renderer/dom/domvectorlayerrenderer.js
View File

@@ -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.<ol.Feature>} */
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();

4
src/ol/renderer/layerrenderer.js
View File

@@ -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

6
src/ol/renderer/maprenderer.js
View File

@@ -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) {

2
src/ol/renderer/webgl/webglimagelayerrenderer.js
View File

@@ -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) {

5
src/ol/renderer/webgl/webglvectorlayerrenderer.js
View File

@@ -269,7 +269,7 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame =
if (vectorLayerRenderOrder) {
/** @type {Array.<ol.Feature>} */
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);

4
src/ol/source/imagevectorsource.js
View File

@@ -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) {

3
src/ol/source/source.js
View File

@@ -89,7 +89,8 @@ goog.inherits(ol.source.Source, ol.Object);
* @param {number} resolution Resolution.
* @param {number} rotation Rotation.
* @param {Object.<string, boolean>} 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
*/

48
src/ol/source/tilearcgisrestsource.js
View File

@@ -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.<string>}
*/
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.<string>} 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.<string>|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.

5
src/ol/source/tiledebugsource.js
View File

@@ -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;

126
src/ol/source/tileimagesource.js
View File

@@ -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;
};

3
src/ol/source/tilesource.js
View File

@@ -19,6 +19,7 @@ goog.require('ol.tilegrid.TileGrid');
/**
* @typedef {{attributions: (Array.<ol.Attribution>|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

5
src/ol/source/tileutfgridsource.js
View File

@@ -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;

353
src/ol/source/tilevectorsource.js
View File

@@ -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.<string, Array.<ol.Feature>>}
*/
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.<ol.Feature>} 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.<ol.Feature>} 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.<string>} urls URLs.
*/
ol.source.TileVector.prototype.setUrls = function(urls) {
this.setTileUrlFunction(
ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid_));
};

53
src/ol/source/tilewmssource.js
View File

@@ -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.<string>}
*/
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.<string>} 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.<string>|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.

209
src/ol/source/urltilesource.js Normal file
View File

@@ -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.<ol.Attribution>|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.<string>|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.<string>|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.<string>|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.<string>} 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);
}
};

18
src/ol/source/vectorsource.js
View File

@@ -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"

103
src/ol/source/vectortilesource.js Normal file
View File

@@ -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()));
};

21
src/ol/source/wmtssource.js
View File

@@ -87,12 +87,6 @@ ol.source.WMTS = function(options) {
urls = ol.TileUrlFunction.expandUrl(options.url);
}
/**
* @private
* @type {!Array.<string>}
*/
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.<string>} URLs.
* @api
*/
ol.source.WMTS.prototype.getUrls = function() {
return this.urls_;
};
/**
* Return the version of the WMTS source.
* @return {string} Version.

54
src/ol/source/xyzsource.js
View File

@@ -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.<string>|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.<string>|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.<string>} urls URLs.
*/
ol.source.XYZ.prototype.setUrls = function(urls) {
this.setTileUrlFunction(
ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid));
this.urls_ = urls;
};

13
src/ol/style/style.js
View File

@@ -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.<ol.style.Style>}
* @typedef {function((ol.Feature|ol.render.Feature), number):
* Array.<ol.style.Style>}
* @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.<ol.style.Style>} 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');

6
src/ol/tileloadfunction.js
View File

@@ -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;

179
src/ol/vectortile.js Normal file
View File

@@ -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.<ol.Feature>}
*/
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.<ol.Feature>} 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.<ol.Feature>} 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;
};

BIN
test/spec/ol/data/14-8938-5680.vector.pbf Normal file
View File

Binary file not shown.

78
test/spec/ol/format/mvtformat.test.js Normal file
View File

@@ -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');

16
test/spec/ol/interaction/modifyinteraction.test.js
View File

@@ -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);

37
test/spec/ol/layer/vectortilelayer.test.js Normal file
View File

@@ -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');

13
test/spec/ol/proj/proj.test.js
View File

@@ -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() {

90
test/spec/ol/render/renderfeature.test.js Normal file
View File

@@ -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');

128
test/spec/ol/renderer/canvas/canvasvectortilelayerrenderer.test.js Normal file
View File

@@ -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');

105
test/spec/ol/source/tilevectorsource.test.js
View File

@@ -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');

162
test/spec/ol/source/urltilesource.test.js Normal file
View File

@@ -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');

11
test/spec/ol/source/vectorsource.test.js
View File

@@ -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);
});
});
});

43
test/spec/ol/source/vectortilesource.test.js Normal file
View File

@@ -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');

BIN
test_rendering/spec/ol/data/tiles/mvt/14-8938-5680.vector.pbf Normal file
View File

Binary file not shown.

BIN
test_rendering/spec/ol/layer/expected/vectortile-canvas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

82
test_rendering/spec/ol/layer/vectortile.test.js Normal file
View File

@@ -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');