OpenLayers3。如何为线条和标记添加标签

Question

我正在创建一个Openlayers3地图。与给出的示例不同，我必须在知道功能之前为每个图层创建样式。我使用以下序列：

1. 初始化地图。
2. 为每个组/ ol.layer.vector
设置样式

示例：

paypal.Button.render

1. 在地图上绘制要素。

示例：

    this.addGroup('testPackages', {
            normalStyle: new ol.style.Style({
                stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
                fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.1)' })
            }),
            hoverStyle: new ol.style.Style({
                stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
                fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
            }),
            selectedStyle: new ol.style.Style({
                stroke: new ol.style.Stroke({ color: '#c407d3', width: 3 }),
                fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
            })

        });

    this.addGroup('cabinets', {
            normalStyle: new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: 0.25,
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    opacity: 1,
                    src: '/images/olMaps/house.png'
                }))
            }),
            hoverStyle: new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: 0.25,
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    opacity: 1,
                    src: '/images/olMaps/house.png'
                }))
            }),
            selectedStyle: new ol.style.Style({
                image: new ol.style.Icon(({
                    scale: 0.25,
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    opacity: 1,
                    src: '/images/olMaps/house.png'
                }))
            })

        })

//这是将文本添加到样式

的新功能

    drawLine(geoShape: any, assetId: string, group: IAssetGroup) { // vectorLine: ol.source.Vector, style?: ol.style.Style) {

        // Transform the geometry for a map line-string.
        const transformedGeometry = this.transformCoordinates(geoShape);
        const lineString = new ol.geom.LineString(<any>transformedGeometry);

        // Create the line-string feature.
        const feature = new ol.Feature({
            geometry: lineString,
            id: assetId,
            group: group
        });

        // Set the style on the feature?
        if (!!group.normalStyle)
            feature.setStyle(group.normalStyle);

        // new lines

        var myStyle = group.normalStyle;
        myStyle = this.styleFunction(myStyle, feature);
        feature.setStyle(myStyle);

        // end


        // Add the feature to the vector-set.
        group.vector.addFeature(feature);

        // Add to list of all features.
        this.allFeatures.push(feature);
        this.lookupFeatures[assetId] = feature;

    }

//结束

    styleFunction(myStyle: ol.style.Style, feature: ol.Feature) {
        return [
            new ol.style.Style({
                fill: myStyle.getFill(),
                stroke: myStyle.getStroke(),
                text: new ol.style.Text({
                    font: '12px Calibri,sans-serif',
                    fill: new ol.style.Fill({ color: '#000' }),
                    stroke: new ol.style.Stroke({
                        color: '#fff', width: 2
                    }),
                    // get the text from the feature - `this` is ol.Feature
                    // and show only under certain resolution
                    text: this.olMap.getView().getZoom() > 12 ? feature.get('name'): ''
                })
            })
        ];
    }

如何为每个功能添加标签名称？