diff --git a/examples/tile-vector.html b/examples/tile-vector.html new file mode 100644 index 0000000000..86c5d6a579 --- /dev/null +++ b/examples/tile-vector.html @@ -0,0 +1,51 @@ + + + + + + + + + + + Tile vector example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Tile vector example

+

Example of vector tiles.

+
+

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

+
+
tile-vector, openstreetmap
+
+ +
+ +
+ + + + + + + diff --git a/examples/tile-vector.js b/examples/tile-vector.js new file mode 100644 index 0000000000..d80fef1e31 --- /dev/null +++ b/examples/tile-vector.js @@ -0,0 +1,42 @@ +goog.require('ol.Map'); +goog.require('ol.View2D'); +goog.require('ol.format.GeoJSON'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.proj'); +goog.require('ol.source.Stamen'); +goog.require('ol.source.TileVector'); +goog.require('ol.tilegrid.XYZ'); + +var vectorSource = new ol.source.TileVector({ + format: new ol.format.GeoJSON({ + defaultProjection: 'EPSG:4326' + }), + projection: 'EPSG:3857', + tileGrid: new ol.tilegrid.XYZ({ + maxZoom: 19 + }), + url: 'http://www.somebits.com:8001/rivers/{z}/{x}/{y}.json', + z: 11 +}); + +var vector = new ol.layer.Vector({ + source: vectorSource +}); + +var raster = new ol.layer.Tile({ + source: new ol.source.Stamen({ + layer: 'terrain' + }) +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: 'canvas', + target: document.getElementById('map'), + view: new ol.View2D({ + center: ol.proj.transform([-120.976, 37.958], 'EPSG:4326', 'EPSG:3857'), + maxZoom: 19, + zoom: 11 + }) +});