Question

我正在尝试使用Openlayers 5 Typescript库中的“选择”对象并将功能添加到高光叠加层，但该功能未显示。

我已经在地图上添加了高亮叠加矢量图层（“ mapValues”是我存储全局值和对象的单例）

public static addHighlightOverlay(){
let highlightStyleCache = {}; 

mapValues.highlightOverlay = new olLayerVector({
source: new olSourceVector(),
map: mapValues.map,
style: function(feature,resolution){
  let text = resolution * 100000 < 10 ? feature.get('text') : '';
  if(!highlightStyleCache[text]){
    highlightStyleCache[text] = new Style({
      stroke: new Stroke({color: '#ffcc33', width:2}),
      fill: new Fill({color: 'rgba(255,255,255,0.2'}),
      text: new Text({
        font: '12px Calibri,sans-serif',
        text: text,
        fill: new Fill({
          color: '#000'
        }),
        stroke: new Stroke({
          color: '#f00',
          width: 3
        }),
        zIndex: 10000})
    })
  }
  return highlightStyleCache[text]

}

})
mapValues.highlightOverlay.setMap(mapValues.map);
}

我创建一个新的“选择”，然后将互动添加到地图中。

let selectClick = new Select({
condition: click
});
mapValues.map.addInteraction(selectClick);

然后在“选择”上将功能添加到高光覆盖

selectClick.on('select', function(e) {
mapValues.currSelectedFeature = e.selected[0];    mapValues.highlightOverlay.getSource().addFeature(mapValues.currSelectedFeature);    

});

我希望看到该功能添加到HighlightOverlay周围，并带有黄色笔触，但是什么也看不到？

非常感谢您的帮助！

OpenLayers 5 Typescript高亮功能

0 个答案: