The use of a tile grid removes the need to implement a loader function; so, there is less work involved in setting it up. Let's see how easy it is to use the TileVector source:
Starting from the previous example, add the following after the
serverVectorlayer is defined:var tiledSource = 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-water-areas/{z}/{x}/{y}.topojson' });Now, add create a vector layer using this source:
var tiledVector = new ol.layer.vector({ source: tiledSource, style: vectorStyle });And finally, change the map to load the
tiledVectorlayer instead of theserverVectorlayer:var map = new ol.Map({ renderer: 'canvas', target: 'map', layers: [tiledRaster, tiledVector], view: view });