Question

我在pointerMove工作和突出显示功能上有工作功能选择交互我想要的另一件事是在所选特征上显示要素属性。
我想在新的HTML元素或弹出窗口上找到该特定功能的地图在http://openlayers.org/en/latest/examples/select-features.html处完成示例
任何帮助或想法更多欢迎:)

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

    });
}

Answer 1

上述解决方案：

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

OpenLayers在选择交互的地图上显示要素属性

1 个答案: