I'm currently implementing a dragBox to select multiple vectors at once. Since the dragBox object requires a "condition:" and in the official example it is a keyPress, "shift" I think, I have set up a singleton boolean variable in Angular that will set the condition to "ol.events.condition.always" or "ol.events.condition.never" which the object accepts and works fine on a computer...however does not work on mobile, I thought this might work on mobile something like drawing a circle but does not.
Is there a way to make this work on mobile?
Here's my code.
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 = [];
});
}
};
The ability to "Drag" on a mobile device doesn't exist in OpenLayers 3...the closest thing to it using the "Draw" feature to draw a square and then get everything that intersects with that square.
if (selectionToolsSelection == "Box") {
var geometryFunction = ol.interaction.Draw.createBox();
drawObj = new ol.interaction.Draw({
features: features,
type: "Circle",
geometryFunction: geometryFunction
});
mapObj.addInteraction(drawObj);
}
Then you can catch the "drawend" event and do what you need to ...
drawObj.on('drawend', function (e) {Do magic stuff here});