Merge pull request #7423 from tschaub/get-wrapped-features

Get rendered features by coordinate when wrapping

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;
+}

examples/vector-tile-info.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: Vector Tile Info
+shortdesc: Getting feature information from vector tiles.
+docs: >
+  <p>Move your pointer over rendered features to display feature properties.</p>
+tags: "vector tiles"
+---
+<div id="map" class="map">
+  <pre id="info"/>
+</div>

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;
+}

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)) {

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);