diff --git a/examples/vector-tile-info.css b/examples/vector-tile-info.css new file mode 100644 index 0000000000..9d778d829b --- /dev/null +++ b/examples/vector-tile-info.css @@ -0,0 +1,16 @@ +#map { + position: relative; +} + +#info { + z-index: 1; + opacity: 0; + position: absolute; + bottom: 0; + left: 0; + margin: 0; + background: rgba(0,60,136,0.7); + color: white; + border: 0; + transition: opacity 100ms ease-in; +} diff --git a/examples/vector-tile-info.html b/examples/vector-tile-info.html new file mode 100644 index 0000000000..160b4319be --- /dev/null +++ b/examples/vector-tile-info.html @@ -0,0 +1,11 @@ +--- +layout: example.html +title: Vector Tile Info +shortdesc: Getting feature information from vector tiles. +docs: > +

Move your pointer over rendered features to display feature properties.

+tags: "vector tiles" +--- +
+
+
diff --git a/examples/vector-tile-info.js b/examples/vector-tile-info.js new file mode 100644 index 0000000000..2ee277516a --- /dev/null +++ b/examples/vector-tile-info.js @@ -0,0 +1,34 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.format.MVT'); +goog.require('ol.layer.VectorTile'); +goog.require('ol.source.VectorTile'); + +var map = new ol.Map({ + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }), + layers: [new ol.layer.VectorTile({ + source: new ol.source.VectorTile({ + format: new ol.format.MVT(), + url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf' + }) + })] +}); + +map.on('pointermove', showInfo); + +var info = document.getElementById('info'); +function showInfo(event) { + var features = map.getFeaturesAtPixel(event.pixel); + if (!features) { + info.innerText = ''; + info.style.opacity = 0; + return; + } + var properties = features[0].getProperties(); + info.innerText = JSON.stringify(properties, null, 2); + info.style.opacity = 1; +} diff --git a/src/ol/renderer/canvas/vectortilelayer.js b/src/ol/renderer/canvas/vectortilelayer.js index 3f5e6fc1ff..9e724e2c86 100644 --- a/src/ol/renderer/canvas/vectortilelayer.js +++ b/src/ol/renderer/canvas/vectortilelayer.js @@ -284,7 +284,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi var tile, tileCoord, tileExtent; for (i = 0, ii = renderedTiles.length; i < ii; ++i) { tile = renderedTiles[i]; - tileCoord = tile.tileCoord; + tileCoord = tile.wrappedTileCoord; tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent); bufferedExtent = ol.extent.buffer(tileExtent, hitTolerance * resolution, bufferedExtent); if (!ol.extent.containsCoordinate(bufferedExtent, coordinate)) { diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js index fcb87f6a9e..6a686ff24e 100644 --- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js +++ b/test/spec/ol/renderer/canvas/vectortilelayer.test.js @@ -1,5 +1,3 @@ - - goog.require('ol'); goog.require('ol.obj'); goog.require('ol.Feature'); @@ -305,6 +303,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() { this.tileKeys = [key]; this.sourceTiles_ = {}; this.sourceTiles_[key] = sourceTile; + this.wrappedTileCoord = arguments[0]; }; ol.inherits(TileClass, ol.VectorImageTile);