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

Add layerName and layers options to ol.source.TopoJSON

Browse Source
This commit is contained in:
Andreas Hocevar
2017-05-16 16:19:33 +02:00
parent 342c49f0bb
commit 7ecb2c0185
6 changed files with 154 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
examples/osm-vector-tiles.js
View File

@@ -1,4 +1,3 @@
goog.require('ol.Attribution');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.format.TopoJSON');
@@ -13,11 +12,6 @@ goog.require('ol.tilegrid');
var key = 'vector-tiles-5eJz6JX';
var attribution = [new ol.Attribution({
html: '© OpenStreetMap contributors, Who’s On First, Natural Earth, and openstreetmapdata.com'
})];
var format = new ol.format.TopoJSON();
var tileGrid = ol.tilegrid.createXYZ({maxZoom: 19});
var roadStyleCache = {};
var roadColor = {
'major_road': '#776',
@@ -34,65 +28,58 @@ var buildingStyle = new ol.style.Style({
width: 1
})
});
var waterStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: '#9db9e8'
})
});
var roadStyle = function(feature) {
var kind = feature.get('kind');
var railway = feature.get('railway');
var sort_key = feature.get('sort_key');
var styleKey = kind + '/' + railway + '/' + sort_key;
var style = roadStyleCache[styleKey];
if (!style) {
var color, width;
if (railway) {
color = '#7de';
width = 1;
} else {
color = roadColor[kind];
width = kind == 'highway' ? 1.5 : 1;
}
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: width
}),
zIndex: sort_key
});
roadStyleCache[styleKey] = style;
}
return style;
};
var map = new ol.Map({
layers: [
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: attribution,
format: format,
tileGrid: tileGrid,
url: 'https://tile.mapzen.com/mapzen/vector/v1/water/{z}/{x}/{y}.topojson?api_key=' + key
attributions: '© OpenStreetMap contributors, Who’s On First, ' +
'Natural Earth, and openstreetmapdata.com',
format: new ol.format.TopoJSON({
layerName: 'layer',
layers: ['water', 'roads', 'buildings']
}),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#9db9e8'
})
})
}),
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: attribution,
format: format,
tileGrid: tileGrid,
url: 'https://tile.mapzen.com/mapzen/vector/v1/roads/{z}/{x}/{y}.topojson?api_key=' + key
}),
style: function(feature) {
var kind = feature.get('kind');
var railway = feature.get('railway');
var sort_key = feature.get('sort_key');
var styleKey = kind + '/' + railway + '/' + sort_key;
var style = roadStyleCache[styleKey];
if (!style) {
var color, width;
if (railway) {
color = '#7de';
width = 1;
} else {
color = roadColor[kind];
width = kind == 'highway' ? 1.5 : 1;
}
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: width
}),
zIndex: sort_key
});
roadStyleCache[styleKey] = style;
style: function(feature, resolution) {
switch (feature.get('layer')) {
case 'water': return waterStyle;
case 'roads': return roadStyle(feature);
case 'buildings': return (resolution < 10) ? buildingStyle : null;
default: return null;
}
return style;
}
}),
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
attributions: attribution,
format: format,
tileGrid: tileGrid,
url: 'https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=' + key
}),
style: function(f, resolution) {
return (resolution < 10) ? buildingStyle : null;
}
})
],