Openlayers 3突出显示功能

我正在查看ol.FeatureOverlay的文档

并以ol.FeatureOverlay为例进行了介绍

像这样

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

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

    };

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

但是我收到了错误“TypeError:ol.FeatureOverlay不是构造函数”

---

我在OL33.16上。非常感谢在这件事上给予的任何帮助

看起来这已经改变了，现在需要一个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];
        }
    });

为了进一步了解答案，你需要在地图上添加动作， 在我的例子中，我使用onClick，所以它是这样的

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

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

    };

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

但如果你想突出显示悬停，它会像这样

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

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

    };

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