diff --git a/examples/tile-vector.html b/examples/tile-vector.html index 02784c351c..5fb1416079 100644 --- a/examples/tile-vector.html +++ b/examples/tile-vector.html @@ -9,6 +9,12 @@ Tile vector example + @@ -36,6 +42,16 @@

See the tile-vector.js source to see how this is done.

+
+ Warning Map is becoming unresponsive with too many layers. +
+
+ Layers + + + + +
tile-vector, openstreetmap
diff --git a/examples/tile-vector.js b/examples/tile-vector.js index eb73c81f75..48737131e2 100644 --- a/examples/tile-vector.js +++ b/examples/tile-vector.js @@ -73,13 +73,101 @@ var roadLayer = new ol.layer.Vector({ } }); +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: new ol.tilegrid.XYZ({ + 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: new ol.tilegrid.XYZ({ + 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: [waterLayer, roadLayer], + layers: [landuseLayer, buildingLayer, waterLayer, roadLayer], renderer: 'canvas', target: document.getElementById('map'), view: new ol.View({ center: ol.proj.transform([-74.0064, 40.7142], 'EPSG:4326', 'EPSG:3857'), maxZoom: 19, - zoom: 14 + 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()); +});