Interacción de demora de Openlayers 6

Quiero implementar un DragBox y un DragPan características en el mapa para pantallas táctiles, limito la condición DragPan con dos dedos, y el DragBox con un dedo. Sin embargo, el DragBox todavía aparecerá cuando los usuarios usan dos dedos en la pantalla. Me gustaría establecer un retraso en el evento DragBox para que pueda detectar correctamente el número de dedos en la pantalla. ¿Es posible?

  this.dragPanOptions = {
        condition: function (event) {
            return this.getPointerCount() === 2 || platformModifierKeyOnly(event);
        },
    };
    this.dragBoxOptions = {
        condition: function (event) {
            return this.getPointerCount() === 1 && noModifierKeys (event);
        },
    };

Traté de extender la clase DragBox para implementar mi propia función handleDownEvent con retraso, pero parece que no puedo acceder a los miembros privados.

Otra manera es volver a implementar toda la clase DragBox con una opción de retraso, pero alguna clase como RenderBox no existe. Pero no quiero descargar toda la biblioteca de Github.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por compilerhero

2 Respuestas:

  • Para agregar un retraso en el evento DragBox de OpenLayers 6, puedes implementar una solución personalizada que te permita detectar correctamente el número de dedos en la pantalla antes de activar el DragBox. Aquí te muestro un ejemplo de cómo podrías lograrlo:

    javascript
// Crear una clase extendida de DragBox
class CustomDragBox extends ol.interaction.DragBox {
    constructor(options) {
        super(options);
        this.delay = 300; // Milisegundos de retraso
        this.pointerCount = 0;
        this.delayedAction = null;
    }

    handleEvent(event) {
        if (event.type === 'pointerdown' && !this.delayedAction) {
            this.pointerCount++;
            if (this.pointerCount > 1) {
                return false; // Evitar que se active DragBox con dos dedos
            }
            this.delayedAction = setTimeout(() => {
                this.pointerCount = 0;
                this.delayedAction = null;
            }, this.delay);
        }
        return super.handleEvent(event);
    }
}

// Crear instancia de CustomDragBox con tus opciones personalizadas
const dragBox = new CustomDragBox({
    condition: function (event) {
        return event.pointerType === 'touch';
    },
});

    En este código, creamos una clase extendida CustomDragBox que extiende la funcionalidad de ol.interaction.DragBox y agrega un retraso para detectar correctamente el número de dedos en la pantalla. La propiedad delay define el tiempo de retraso en milisegundos antes de que se active el DragBox.

    Puedes utilizar esta clase personalizada en lugar de la clase DragBox estándar en tu código para lograr el comportamiento deseado. Espero que esta solución te ayude a resolver tu problema de interacción de demora en OpenLayers 6.

    Respondida el Dec 19, 2020 a las 06:54 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución utilizando la clase DragBox extendida:

    • Crea una nueva clase que extienda `DragBox`.
    • Sobrescribe el método `handleDownEvent` en tu clase extendida para incluir un retraso.
    • Utiliza tu clase extendida en lugar de `DragBox` en tu código.

    Ejemplo:

    
import { DragBox } from 'ol/interaction';

class DelayedDragBox extends DragBox {
  handleDownEvent(event) {
    // Implementa un retraso aquí
    setTimeout(() => {
      super.handleDownEvent(event);
    }, DELAY_TIME);
  }
}

const dragBoxOptions = {
  condition: function (event) {
    return this.getPointerCount() === 1 && noModifierKeys(event);
  },
};

const delayedDragBox = new DelayedDragBox(dragBoxOptions);
map.addInteraction(delayedDragBox);

    Solución utilizando un control personalizado:

    Si no puedes acceder a los miembros privados de DragBox, puedes crear un control personalizado que implemente la funcionalidad DragBox con un retraso.

    Ejemplo:

    
import { Control } from 'ol/control';

class DragBoxControl extends Control {
  constructor(options) {
    super(options);
    this.delayTime = options.delayTime || 0;
  }

  handleDownEvent(event) {
    // Implementa un retraso aquí
    setTimeout(() => {
      // Implementa la funcionalidad de DragBox aquí
    }, this.delayTime);
  }
}

const dragBoxControlOptions = {
  delayTime: 100 // Ajusta el tiempo de retraso en milisegundos
};

const dragBoxControl = new DragBoxControl(dragBoxControlOptions);
map.addControl(dragBoxControl);

    Recuerda que debes importar las bibliotecas necesarias y ajustar las opciones de retraso según tus necesidades.

    Respondida el Dec 19, 2020 a las 07:05 - por Gemini

    Votos positivos: 0 | Votos negativos: 0