From 0b4970ae4661e11292594fb536f8a1dde37dcd92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 7 Jan 2014 14:09:46 +0100 Subject: [PATCH 1/4] Add ol.FeaturesOverlay#addFeature --- src/ol/render/featuresoverlay.exports | 1 + src/ol/render/featuresoverlay.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/ol/render/featuresoverlay.exports b/src/ol/render/featuresoverlay.exports index 38cf3f5d98..27f4be1e71 100644 --- a/src/ol/render/featuresoverlay.exports +++ b/src/ol/render/featuresoverlay.exports @@ -1,4 +1,5 @@ @exportSymbol ol.render.FeaturesOverlay +@exportProperty ol.render.FeaturesOverlay.prototype.addFeature @exportProperty ol.render.FeaturesOverlay.prototype.getFeatures @exportProperty ol.render.FeaturesOverlay.prototype.setFeatures @exportProperty ol.render.FeaturesOverlay.prototype.setMap diff --git a/src/ol/render/featuresoverlay.js b/src/ol/render/featuresoverlay.js index 2166e25164..4c386dd4e7 100644 --- a/src/ol/render/featuresoverlay.js +++ b/src/ol/render/featuresoverlay.js @@ -77,6 +77,14 @@ ol.render.FeaturesOverlay = function(opt_options) { }; +/** + * @param {ol.Feature} feature Feature. + */ +ol.render.FeaturesOverlay.prototype.addFeature = function(feature) { + this.features_.push(feature); +}; + + /** * @return {ol.Collection} Features collection. */ From 8c0406b390d67261b3c8b78b82f924e95e5a86ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 7 Jan 2014 14:09:57 +0100 Subject: [PATCH 2/4] Add ol.FeaturesOverlay#removeFeature --- src/ol/render/featuresoverlay.exports | 1 + src/ol/render/featuresoverlay.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/src/ol/render/featuresoverlay.exports b/src/ol/render/featuresoverlay.exports index 27f4be1e71..b613b77c0b 100644 --- a/src/ol/render/featuresoverlay.exports +++ b/src/ol/render/featuresoverlay.exports @@ -4,3 +4,4 @@ @exportProperty ol.render.FeaturesOverlay.prototype.setFeatures @exportProperty ol.render.FeaturesOverlay.prototype.setMap @exportProperty ol.render.FeaturesOverlay.prototype.setStyleFunction +@exportProperty ol.render.FeaturesOverlay.prototype.removeFeature diff --git a/src/ol/render/featuresoverlay.js b/src/ol/render/featuresoverlay.js index 4c386dd4e7..a7dd07b67b 100644 --- a/src/ol/render/featuresoverlay.js +++ b/src/ol/render/featuresoverlay.js @@ -152,6 +152,14 @@ ol.render.FeaturesOverlay.prototype.handleMapPostCompose_ = function(event) { }; +/** + * @param {ol.Feature} feature Feature. + */ +ol.render.FeaturesOverlay.prototype.removeFeature = function(feature) { + this.features_.remove(feature); +}; + + /** * @private */ From 6556726541b5166406be23afc8ff1b49eb81114c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 7 Jan 2014 14:10:51 +0100 Subject: [PATCH 3/4] ol.FeaturesOverlay creates a features collection ol.FeaturesOverlay creates an empty collection of features if the features option is not specified. --- src/ol/render/featuresoverlay.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ol/render/featuresoverlay.js b/src/ol/render/featuresoverlay.js index a7dd07b67b..494444b9ec 100644 --- a/src/ol/render/featuresoverlay.js +++ b/src/ol/render/featuresoverlay.js @@ -64,6 +64,8 @@ ol.render.FeaturesOverlay = function(opt_options) { goog.asserts.assertInstanceof(options.features, ol.Collection); this.setFeatures(options.features); } + } else { + this.setFeatures(new ol.Collection()); } if (goog.isDef(options.styleFunction)) { From 643c981074b8b63fc8ddc13220b7af92a54d0168 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 7 Jan 2014 14:11:54 +0100 Subject: [PATCH 4/4] Use FeaturesOverlay in vector-layer example This demonstrates how to use ol.FeaturesOverlay for feature highlighting. --- examples/vector-layer.html | 2 +- examples/vector-layer.js | 49 +++++++++++++++++++++----------------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/examples/vector-layer.html b/examples/vector-layer.html index 038a1b9eea..49608db4d4 100644 --- a/examples/vector-layer.html +++ b/examples/vector-layer.html @@ -36,7 +36,7 @@

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

-
vector, geojson, style
+
vector, geojson, style, features overlay
diff --git a/examples/vector-layer.js b/examples/vector-layer.js index adda211076..413837f406 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -3,6 +3,7 @@ goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); +goog.require('ol.render.FeaturesOverlay'); goog.require('ol.source.GeoJSON'); goog.require('ol.source.MapQuestOpenAerial'); goog.require('ol.style.Fill'); @@ -44,9 +45,25 @@ var map = new ol.Map({ }) }); +var highlightStyleArray = [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#f00', + width: 1 + }), + fill: new ol.style.Fill({ + color: 'rgba(255,0,0,0.1)' + }) +})]; + +var featuresOverlay = new ol.render.FeaturesOverlay({ + map: map, + styleFunction: function(feature, resolution) { + return highlightStyleArray; + } +}); + var highlight; var displayFeatureInfo = function(pixel) { - var oldHighlight = highlight; var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; @@ -59,11 +76,16 @@ var displayFeatureInfo = function(pixel) { info.innerHTML = ' '; } - highlight = feature; - - if (highlight !== oldHighlight) { - map.requestRenderFrame(); + if (feature !== highlight) { + if (highlight) { + featuresOverlay.removeFeature(highlight); + } + if (feature) { + featuresOverlay.addFeature(feature); + } + highlight = feature; } + }; $(map.getViewport()).on('mousemove', function(evt) { @@ -75,20 +97,3 @@ map.on('singleclick', function(evt) { var pixel = evt.getPixel(); displayFeatureInfo(pixel); }); - -var highlightStyle = new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: '#f00', - width: 1 - }), - fill: new ol.style.Fill({ - color: 'rgba(255,0,0,0.1)' - }) -}); - -map.on('postcompose', function(evt) { - if (highlight) { - var render = evt.getRender(); - render.drawFeature(highlight, highlightStyle); - } -});