Merge pull request #1480 from elemoine/vector-api-features-overlay

[vector-api] Add ol.FeaturesOverlay#addFeature and #removeFeature

examples/vector-layer.html

@@ -36,7 +36,7 @@
           <div id="docs">
             <p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">vector, geojson, style</div>
+          <div id="tags">vector, geojson, style, features overlay</div>
         </div>
         <div class="span4 offset4">
           <div id="info" class="alert alert-success">

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

src/ol/render/featuresoverlay.exports

@@ -1,5 +1,7 @@
 @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
 @exportProperty ol.render.FeaturesOverlay.prototype.setStyleFunction
+@exportProperty ol.render.FeaturesOverlay.prototype.removeFeature

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)) {
@@ -77,6 +79,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.
  */
@@ -144,6 +154,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
  */