2017-02-21 5 views
0

私は働く機能を選択しています。
もう1つは、選択したフィーチャーにフィーチャー・プロパティーを表示することです。
私はhttp://openlayers.org/en/latest/examples/select-features.html
で例のうち、勤務新しい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; 
} 
関連する問題