移动设备上的 OpenLayers 3 拖动框答案

【问题标题】：OpenLayers 3 dragBox on mobile移动设备上的 OpenLayers 3 拖动框
【发布时间】：2017-12-15 20:58:18
【问题描述】：

我目前正在实现一个拖动框来一次选择多个向量。由于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 = [];
                });
            }

        };

【问题讨论】：

API 文档说“此交互仅支持鼠标设备。”，所以不，这是不可能的。我想问题是没有足够的手势来同时区分地图移动、缩放和绘制。（见openlayers.org/en/latest/apidoc/ol.interaction.DragBox.html）

标签： openlayers openlayers-3 angular-openlayers

【解决方案1】：

在移动设备上“拖动”的功能在 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});

【讨论】：

【解决方案2】：

通过将条件选项设置为mouseActionButton，拖动框支持触摸设备（请参阅：Pull Request: Support touch events for DragBox interaction）

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

const dragBox = new DragBox({
  condition: mouseActionButton,
});

【讨论】：