Инверсное колесо мышиZoom

Есть проект, который использует openlayers и React. Столкнулся с необходимостью инвертировать направление колеса мыши при масштабировании. Точнее даже иметь возможность переключаться со стандартного режима на инвертированный и обратно.

Я пробовал использовать код из этого вопроса, но все равно получаю прыжки по карте. (github) Возможно, есть более простой способ?

Я также попробовал этот вариант:

let mouseWheelInt = new MouseWheelZoom({
  constrainResolution: true,
  onFocusOnly: true,
  useAnchor: true
});

map.addInteraction(mouseWheelInt);
mouseWheelInt.setActive(false);

window.addEventListener('wheel', (event) => {
  event.stopImmediatePropagation();

  let delta = 0;
  if (wheel_orient === "Inverse") {
    delta = event.deltaY > 0 ? 1 : -1;
  } else {
    delta = event.deltaY < 0 ? 1 : -1;
  }

  let view = map.getView();

  const currentZoom = Math.round(view.getZoom());
  if (currentZoom === undefined) {
    return;
  }

  const newZoom = view.getConstrainedZoom(currentZoom + delta);
  if (newZoom == currentZoom) {
    return;
  }

  if (view.getAnimating()) {
    view.cancelAnimations();
  }

  const coordinates = view.getCenter();

  view.animate({
    zoom: newZoom,
    anchor: coordinates,
    duration: 250,
    easing: easeOut
  });
}, false);

javascript reactjs openlayers

12.07.2024 10:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете исправить код взаимодействия https://github.com/openlayers/openlayers/blob/main/src/ol/interaction/MouseWheelZoom.js#L260 (или создать подкласс), чтобы разумно обрабатывать отрицательное значение maxDelta. вариант

handleWheelZoom_(map) {
  const view = map.getView();
  if (view.getAnimating()) {
    view.cancelAnimations();
  }
  let delta =
    ((this.maxDelta_ > 0 ? -1 : 1) *
      clamp(
        this.totalDelta_,
        -Math.abs(this.maxDelta_) * this.deltaPerZoom_,
        Math.abs(this.maxDelta_) * this.deltaPerZoom_,
      )) /
    this.deltaPerZoom_;
  if (view.getConstrainResolution() || this.constrainResolution_) {
    // view has a zoom constraint, zoom by 1
    delta = delta ? (delta > 0 ? 1 : -1) : 0;
  }
  zoomByDelta(view, delta, this.lastAnchor_, this.duration_);

  this.mode_ = undefined;
  this.totalDelta_ = 0;
  this.lastAnchor_ = null;
  this.startTime_ = undefined;
  this.timeoutId_ = undefined;
};

Рабочий пример https://stackblitz.com/edit/js-behq56?file=package.json,index.html,index.js

Майк, привет! Вы мне еще раз помогли, спасибо :)

— 15.07.2024 09:05

13.07.2024 12:51