在 Open Layer 点旁边添加文本 [英] Add a Text next to the point Open Layer

问题描述

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

I am setting on map some points which I have in an array 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，...).

I would like to add the Text next to each point, which would be the name of iconFeature (Point 1, Point 2, ...).

我不确定在哪里设置它以获取地图上的信息.

I am not sure where to set this to get info on the map.

提前感谢您的帮助.

推荐答案

你可以基于这个例子中的标签 https://openlayers.org/en/v4.6.5/examples/vector-label-decluttering.html 所以你会有类似

You could base it on the labels in this example https://openlayers.org/en/v4.6.5/examples/vector-label-decluttering.html so you would have something like

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

您可能还需要从 https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

You might also need to set textAlign, offsetX and offsetY options from https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

这篇关于在 Open Layer 点旁边添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！