Почему при рисовании объекта на карте срабатывает функция выбора?

Question

Я создаю функциональность выделения и рисования на карте.

Вот как я создаю функциональность выделения:

var SelectFeature = /*@__PURE__*/(function (Select) {
    function SelectFeature() {

        Select.call(this, {
            condition: ol.events.condition.click
        });

        this.on = Select.prototype.on; 
        this.on('select', function (e) {
            debugger;

            var feature = e.selected[0];
            var center = ol.extent.getCenter(feature.values_.geometry.getExtent());
            //attach popup dynamically
            document.getElementById("popupFeat-content").querySelector("input").value = feature.values_.attributes.Description;
            map.getOverlayById("popupFeat").setPosition(center);
            editableFeature = feature.values_.attributes;
            editableFeatureObject = feature;
        });

    }

    $("#featureEditButton").click(function () {
        initFeatureEditor();
    });


    if (Select) SelectFeature.__proto__ = Select;
    SelectFeature.prototype = Object.create(Select && Select.prototype);
    SelectFeature.prototype.constructor = Select;

    return SelectFeature;
}(ol.interaction.Select));

Класс SelectFeature предназначен для добавления взаимодействий карты в определение карты:

    map = new ol.Map({
        interactions: ol.interaction.defaults().extend([
            new SelectFeature()
        ]),
        layers: layers,
        target: 'map',
        view: view,
        overlays: [overlay]
    });

Вот как я создаю функциональность выделения:

function handleMapDrawing() {

    var vector = new ol.layer.Vector({
        source: new ol.source.Vector()
    });

    var val = $(this).data("value");

    var draw = new ol.interaction.Draw({
        source: vector.getSource(),
        type: val
    });

    map.addInteraction(draw);
}

И handleMapDrawing запускается, когда фигура выбирается в DOM:

    document.querySelector("#popupShapes ul li a").addEventListener('click', handleMapDrawing, false);

Но после выбора фигуры в DOM, когда я нажимаю на карту SelectFeature класс уволен.

Мой вопрос состоит в том, как предотвратить запуск SelectFeature при рисовании объектов?

Answer 1

Это типичная проблема взаимодействия столкновения или перекрытия. Обычно способ обработки - когда новое взаимодействие активируется, взаимодействия, которые были в активном состоянии и которые сталкиваются с новым взаимодействием, деактивируются.

В вашем случае, когда пользователь нажимает на фигуру для рисования вас должен удалить выбор взаимодействия с карты. И если выбор по умолчанию активен, вы должны добавить его снова на карту, когда пользователь прекратит рисовать.

Вы можете использовать ol.Map addInteraction и removeInteraction, чтобы добиться активации / деактивации.

В OL вы также можете поиграть с порядком взаимодействия в коллекции взаимодействий карты (они выполняются в обратном порядке) и с остановкой распространения события. Но я думаю, что другое решение проще.