Openlayers 3 Highlight-Funktion

Question

ich in der Dokumentation bin für ol.FeatureOverlay here

und am Beispiel für ol.FeatureOverlay here präsentiert

so ...

 var featureOverlay = new ol.FeatureOverlay({ 
     map: map, 
     style: function (feature, resolution) { 
      var style; 
      var geom = feature.getGeometry(); 
      if (geom.getType() == 'Point') { 
       var text = feature.get('text'); 
       baseTextStyle.text = text; 
       // this is inefficient as it could create new style objects for the 
       // same text. 
       // A good exercise to see if you understand would be to add caching 
       // of this text style 
       var isoCode = feature.get('isoCode').toLowerCase(); 
       style = new ol.style.Style({ 
        text: new ol.style.Text(baseTextStyle), 
        image: new ol.style.Icon({ 
         src: '../assets/img/flags/' + isoCode + '.png' 
        }), 
        zIndex: 2 
       }); 
      } else { 
       style = highlightStyle; 
      } 

      return [style]; 
     } 
    }); 

aber Ich erhalte den Fehler "TypeError: ol.FeatureOverlay ist kein Konstruktor"

Ich bin auf OL3 3.16. Jede Hilfe in dieser Angelegenheit wird sehr geschätzt !!

Answer 1

Sieht aus wie dies geändert hat braucht und jetzt ein ol.layer.Vector

wie dies also nun der Code für ein Feature-Overlay sieht ...

var highlightStyleCache = {}; 
var featureOverlay = new ol.layer.Vector({ 
     source: new ol.source.Vector(), 
     map: map, 
     style: function (feature, resolution) { 
      var text = resolution * 100000 < 10 ? feature.get('text') : ''; 
      if (!highlightStyleCache[text]) { 
       highlightStyleCache[text] = new ol.style.Style({ 
        stroke: new ol.style.Stroke({ 
         color: '#000066', 
         width: 2 
        }), 
        fill: new ol.style.Fill({ 
         color: 'rgba(192,192,192,0.7)' 
        }), 
        text: new ol.style.Text({ 
         font: '12px Calibri,sans-serif', 
         text: text, 
         fill: new ol.style.Fill({ 
          color: '#000' 
         }), 
         stroke: new ol.style.Stroke({ 
          color: '#f00', 
          width: 3 
         }) 
        }) 
       }); 
      } 
      return highlightStyleCache[text]; 
     } 
    }); 

und das Hinzufügen und Entfernen es sieht aus wie diese ...

var highlight; 
    var displayFeatureInfo = function (pixel) { 

     var feature = map.forEachFeatureAtPixel(pixel, function (feature) { 
      return feature; 
     }); 

     var info = document.getElementById('info'); 
     if (feature) { 
      info.innerHTML = feature.getId() + ': ' + feature.get('name'); 
     } else { 
      info.innerHTML = ' '; 
     } 

     if (feature !== highlight) { 
      if (highlight) { 
       featureOverlay.getSource().removeFeature(highlight); 
      } 
      if (feature) { 
       featureOverlay.getSource().addFeature(feature); 
      } 
      highlight = feature; 
     } 

    }; 

und die Antwort ein bisschen weiter nehmen Sie die Aktion der Karte hinzufügen müssen, in meinem Fall habe ich onClick bin mit so es so loos ...

map.on('click', function (evt) { 
     var pixel = map.getEventPixel(evt.originalEvent); 
     displayFeatureInfo(evt.pixel); 

    }) 

aber wenn Sie auf schweben markieren es so aussehen würde ...

map.on('pointermove', function(evt) { 
    if (evt.dragging) { 
     return; 
    } 
    var pixel = map.getEventPixel(evt.originalEvent); 
    displayFeatureInfo(pixel); 
    });