OpenLayers 3 dragBox на мобильных устройствах

В настоящее время я реализую dragBox для одновременного выбора нескольких векторов. Поскольку для объекта dragBox требуется «условие:», а в официальном примере это keyPress, «shift», я думаю, я установил в Angular одноэлементную логическую переменную, которая установит условие на «ol.events.condition.always " или "ol.events.condition.never", который объект принимает и отлично работает на компьютере... однако не работает на мобильных устройствах, я думал, что это может работать на мобильных устройствах, например, рисовать круг, но это не так.

Есть ли способ заставить это работать на мобильном телефоне?

Вот мой код.

 mapFeature.addDragBox = function () {

            webMapValues.dragBox = new ol.interaction.DragBox({
                /* dragbox interaction is active only if "multi select" 
check box is checked is pressed */
                condition: ((webMapValues.multiSelect == true) ? 
ol.events.condition.always : ol.events.condition.never),
                /* style the box */
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: [0, 0, 255, 1]
                    })
                })
            });
            /* add the DragBox interaction to the map */
            webMapValues.mapObj.addInteraction(webMapValues.dragBox);

            if (webMapValues.multiSelect == true) {
                webMapValues.vectorMultiSelect = new 
ol.interaction.Select();

webMapValues.mapObj.addInteraction(webMapValues.vectorMultiSelect);

                webMapValues.multiSelectFeatures = 
webMapValues.vectorMultiSelect.getFeatures();
                webMapValues.dragBox.on('boxend', function () {
                    // features that intersect the box are added to the 
collection of
                    // selected features
                    webMapValues.clickedCoordinates = 
webMapValues.dragBox.getGeometry().getCoordinates();
                    var extent = 
webMapValues.dragBox.getGeometry().getExtent();
                    var layer = rcisMapService.getLayer("vector");
                    angular.forEach(layer, function (Layer, key) {
                        var source = Layer.getSource();
                        source.forEachFeatureIntersectingExtent(extent, 
function (feature) {

webMapValues.multiSelectedFeatures.push(vector);
                        });
                    });
                    mapFeature.Highlight();

                });

                webMapValues.dragBox.on('boxstart', function () {
                    webMapValues.popup.setPosition(undefined);
                    webMapValues.multiSelectedFeatures = [];
                });
            }

        };

openlayers angular-openlayers openlayers-3
person Funn_Bobby    schedule 15.12.2017    source источник
comment
В документе API говорится, что это взаимодействие поддерживается только для устройств с мышью, поэтому нет, это невозможно. Я предполагаю, что проблема в том, что не хватает жестов, чтобы различать перемещение карты, масштабирование и рисование одновременно. (см. openlayers.org/en/latest/apidoc/ol.interaction. DragBox.html)   -  person dube    schedule 18.12.2017

Ответы (2)


arrow_upward
0
arrow_downward

В OpenLayers 3 нет возможности «перетаскивания» на мобильном устройстве... ближе всего к этому используется функция «рисование», чтобы нарисовать квадрат, а затем получить все, что пересекается с этим квадратом.

 if (selectionToolsSelection == "Box") {
                var geometryFunction = ol.interaction.Draw.createBox();
                drawObj = new ol.interaction.Draw({
                    features: features,
                    type: "Circle",
                    geometryFunction: geometryFunction
                });
                mapObj.addInteraction(drawObj);

            }

Затем вы можете поймать событие "drawend" и сделать то, что вам нужно...

  drawObj.on('drawend', function (e) {Do magic stuff here});
person Funn_Bobby    schedule 20.03.2018

arrow_upward
0
arrow_downward

Сенсорные устройства поддерживаются для перетаскивания, если для параметра условия установлено значение mouseActionButton (см.: Запрос на извлечение: поддержка сенсорных событий за DragBox взаимодействие)

import {mouseActionButton} from 'ol/events/condition';

const dragBox = new DragBox({
  condition: mouseActionButton,
});
person SartoffelKalat    schedule 11.12.2020