Openlayers 在点开放图层旁边添加文字

我正在地图上设置我在一个数组中的一些点

coords

    var iconFeatures=[];
        coords.forEach((elem, ind, arr) => {
            coord = elem.split(',')   

            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([parseFloat(coord[0]), parseFloat(coord[1])], 'EPSG:4326',     
                'EPSG:3857')),
                name: 'Point' + (ind + 1),
            })
            iconFeatures.push(iconFeature);

        });

        var vectorSource = new ol.source.Vector({
            features: iconFeatures 
        });

        var iconStyle = new ol.style.Style({
            image:  new ol.style.Circle({
                radius: 6,
                stroke: new ol.style.Stroke({
                    color: '#fff'
                }),
                fill: new ol.style.Fill({
                    color: '#3399CC'
                })
            }),

        });

        vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: iconStyle
        });

        map.addLayer(vectorLayer);

我想在每个点旁边添加文本，即

iconFeature

（点1，点2，…）的名称

我不知道在哪里设置这个来获取地图上的信息

---

提前感谢您的帮助。

您可以基于本例中的标签，这样您就可以

   var iconStyle = new ol.style.Style({
        image:  new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: '#fff'
            }),
            fill: new ol.style.Fill({
                color: '#3399CC'
            })
        })
    });
    var labelStyle = new ol.style.Style({
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            overflow: true,
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    });
    var style = [iconStyle, labelStyle];

    vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: function(feature) {
          labelStyle.getText().setText(feature.get('name'));
          return style;
        }
    });

---

您可能还需要从

中设置

textAlign

、

offsetX

和

offsetY

选项。您可以根据本例中的标签进行设置，以便

   var iconStyle = new ol.style.Style({
        image:  new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: '#fff'
            }),
            fill: new ol.style.Fill({
                color: '#3399CC'
            })
        })
    });
    var labelStyle = new ol.style.Style({
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            overflow: true,
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    });
    var style = [iconStyle, labelStyle];

    vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: function(feature) {
          labelStyle.getText().setText(feature.get('name'));
          return style;
        }
    });

您可能还需要从中设置

textAlign

、

offsetX

和

offsetY

选项