OpenLayers 3 функция Highlight

Question

Я ищу в документации для ol.FeatureOverlay here

и используя пример ol.FeatureOverlay представил here

как это ...

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

но Я получаю ошибку "ТипError: ol.FeatureOverlay не является конструктором"

Я на OL3 3.16. Любая помощь в этом вопросе очень ценится !!

Answer 1

Похоже, это изменилось, и теперь нуждается в ol.layer.Vector

Так что код теперь выглядит следующим образом для художественного наложения ...

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

и добавление и удаление это выглядит это ...

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

    }; 

и принять ответ немного дальше, вы должны добавить действие на карту, в моем случае я использую OnClick так Лоос, как это ...

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

    }) 

, но если вы хотите, чтобы выделить на парении это будет выглядеть так ...

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