在点旁边添加文字 Open Layer

Question

我在地图上设置数组中的一些点 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，...）的名称。

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

提前感谢您的帮助。

Answer 1

你可以根据这个例子中的标签https://openlayers.org/en/v4.6.5/examples/vector-label-decluttering.html，所以你会得到类似

的东西

   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 选项 https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

在点旁边添加文字 Open Layer

Add a Text next to the point Open Layer

openlayers