Openlayers 3 高亮功能

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

但我收到错误消息“类型错误：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 = '&nbsp;';
        }

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

Openlayers 3 高亮功能

Openlayers 3 Highlight feature

openlayers

openlayers-3