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

但我收到错误＆＃34; TypeError：ol.FeatureOverlay不是构造函数＆＃34;

我在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突出显示功能

1 个答案: