Добавить текст рядом с точкой Открыть слой

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