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

Additional tests, documentation and example

Browse Source
This commit is contained in:
Andreas Hocevar
2015-09-27 20:36:07 +02:00
parent 0e8e104a2d
commit 8e9b20db51
14 changed files with 560 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
examples/mapbox-vector-tiles.js
View File

@@ -13,21 +13,36 @@ goog.require('ol.style.Text');
goog.require('ol.tilegrid.TileGrid');
// Mapbox access token - request your own at http://mabobox.com
// Mapbox access token - request your own at http://mapbox.com
var accessToken =
'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
// For how many zoom levels do we want to use the same vector tile?
// 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 from web mercator zoom level 0
var zOffset = 1;
// 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 = zOffset / reuseZoomLevels; z <= 22 / reuseZoomLevels; ++z) {
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=' + accessToken)
.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({
var map = new ol.Map({
layers: [
new ol.layer.VectorTile({
preload: Infinity,
@@ -37,22 +52,13 @@ var map = new ol.Map({
'© <a href="http://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>'
})],
rightHandedPolygons: true,
format: new ol.format.MVT(),
tileGrid: new ol.tilegrid.TileGrid({
extent: ol.proj.get('EPSG:3857').getExtent(),
resolutions: resolutions
}),
tilePixelRatio: 16,
tileUrlFunction: function(tileCoord) {
return ('http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + accessToken)
.replace('{z}', String(tileCoord[0] * reuseZoomLevels + zOffset))
.replace('{x}', String(tileCoord[1]))
.replace('{y}', String(-tileCoord[2] - 1))
.replace('{a-d}', 'abcd'.substr(
((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
}
tileUrlFunction: tileUrlFunction
}),
style: createMapboxStreetsV6Style()
})
@@ -64,3 +70,6 @@ var map = new ol.Map({
zoom: 3
})
});
// ol.style.Fill, ol.style.Icon, ol.style.Stroke, ol.style.Style and
// ol.style.Text are required for createMapboxStreetsV6Style()