2017-02-21 59 views
0

我在pointerMove工作和突出顯示功能上工作特徵選擇交互。
我想獲得的另一件事是在選定的功能上顯示功能屬性。
我想獲得在地圖上的特定功能,沒有制定出例如新的HTML元素或彈出
上在http://openlayers.org/en/latest/examples/select-features.html
任何幫助或想法更多的歡迎:)

OpenLayers在選擇交互的地圖上顯示功能屬性

roomsLayerEventMouserOver(layer) { 
    if(this.select){ 
     this.map.removeInteraction(this.select); 
    } 

    this.select = new ol.interaction.Select({ 
     condition: ol.events.condition.pointerMove, 
     layers: [ 
      layer 
     ], 
     style: this.getStyle('pink', 'red'), 
    }); 

    this.map.addInteraction(this.select); 
    this.select.on('select', (e) => { 
     let features = e.target.getFeatures(); 
     features.forEach((feature) => { 
      console.log(feature.getProperties().name); 
      // THIS IS PROBABLY THE PLACE I NEED SOMETHING 
     }); 

    }); 
} 

回答

0

以上解決方案:

roomsLayerEventMouserOver(layer) { 
    if(this.select){ 
     this.map.removeInteraction(this.select); 
    } 

    this.select = new ol.interaction.Select({ 
     condition: ol.events.condition.pointerMove, 
     layers: [ 
      layer 
     ], 
     style: (feature) => { return this.roomsSelectedFeatureStyle(feature); } 

    }); 

    this.map.addInteraction(this.select); 
} 


roomsSelectedFeatureStyle(feature) { 
    let roomNumber = feature.getProperties().name ? feature.getProperties().name : " "; 
    let style; 

    style = new ol.style.Style({ 
     text: new ol.style.Text({ 
      text: roomNumber 
     }), 
     stroke: new ol.style.Stroke({ 
      color: LAYER_ROOM_HIGHLIGTH_COLOR_BORDER, 
      width: 1 
     }), 
     fill: new ol.style.Fill({ 
      color: LAYER_ROOM_HIGHLIGTH_COLOR_FILL 
     }) 

    }); 

    return style; 
}