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中，您可以将其基于标签，这样您将获得类似的信息

"Updating the path 'products.$[product].quantity' would create a conflict at 'products'"

您可能还需要设置https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.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选项

在打开层旁边添加文本

1 个答案: