为每个绘制点设置新名称 Open Layer

Question

我在地图上添加了点。对于每个点，我都想添加新名称，例如 'Point 1'、'Point 2' 等。问题是当我将 function(){} 添加到 style 时，它会更改 indexPoint 每一步自动移动，数字变大。请参阅下面的代码和照片

var indexPoint = 0;
$('#MarkPoint').on('click', function(){
    map.removeLayer(vector);
    removeInteractions();
    source = new ol.source.Vector();
    indexPoint = 0;

    vector = new ol.layer.Vector({
        source: source,
        style: function(){ 
            return new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                }),               
                text:  textPoint().text              
            })              
        }
    });

    draw = new ol.interaction.Draw({
        source: source,
        type: 'Point'
    });
    map.addInteraction(draw);
    map.addLayer(vector);     

})

var textPoint = function() {
    indexPoint += 1
    var zoom = map.getView().getZoom();
    //var resolution = map.getView().getResolution();
    var font = ( zoom + 1 )
    return {
        text: new ol.style.Text({
            font: '12 px Arial',
            fill: new ol.style.Fill({
                color: '#ffd300'
            }),
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 3
            }),
            offsetX: 20,
            offsetY: -12,
            overflow: true,
            text: 'Ponto ' + indexPoint.toString()

        })   
    }
}

Answer 1

如果你将一个函数传递给层的'style'-属性，它被称为样式函数。每次渲染图层时都会调用样式函数。在您的示例中，全局变量 indexPoint 在每次平移、每次缩放等时更新它的值。

我想你有两个选择：

方案一：设置每个点的编号为属性，让styleFunction读取那个属性。您可以访问样式函数中的特征属性因为它可以将特征和分辨率作为参数，它看起来像这样：

  style: function(feature, resolution) {
    return new Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        color: '#ffcc33'
        })
      }), 
      text: new Text({
        text: feature.get('number'),
        fill: new Fill({color: '#ffcc33'}),
      });
    });
  }

可以在用户画点的时候设置'number'属性，这个可以做到this way。

选项 2：不在图层上设置样式函数，而是在创建每个要素时单独设置样式

为每个绘制点设置新名称 Open Layer

Set new name for each drawn point Open Layer

openlayers