Установите новое имя для каждой нарисованной точки 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' слоя, она называется Style-function.Функция Style вызывается каждый раз, когда слой отображается.В вашем примере глобальная переменная indexPoint обновляет свое значение на каждом панораме, каждом увеличении и т. Д.

Я думаю, что у вас есть 2 варианта:

Вариант 1: Установите номер каждой точки каксвойство, и пусть styleFunction прочитает это свойство.У вас есть доступ к свойству features в style-функции, потому что он может принимать функцию и разрешение в качестве параметров, это может выглядеть примерно так:

  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' правильно, когдапользователь рисует точку, это может быть сделано таким образом .

Вариант 2: не устанавливайте функцию стиля на слое, а скорее устанавливайте стиль каждого объекта отдельно при его создании