Знакомство с reactiveUtils в ArcGIS JSAPI


Реактивный по своей сути

Если вы еще не знаете, ArcGIS API for JavaScript по своей сути является реактивным. С момента его выпуска у вас есть возможность следить за изменениями свойств. Это дает разработчикам гораздо больше гибкости в отслеживании изменений, которые их волнуют. Вместо того чтобы полагаться на множество событий, вы можете просто следить за изменением определенных свойств.

С момента выпуска четвертой версии API существует утилита watchUtils, с помощью которой можно следить за изменениями. Недостатком является то, что в зависимости от того, что вас интересует, вы можете использовать утилиту для проверки того, когда свойство было определено, изменено или является булевым значением true/false. Эти watchUtils устаревают в пользу reactiveUtils, так что нет времени обновляться, как сегодня!

Гибкость

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

Давайте вкратце рассмотрим reactiveUtils и то, для чего они используются.

Это более старый пример того, как можно выполнить глубокий просмотр свойств по сравнению с тем, как можно использовать reactiveUtils.

// old watchUtils
watch(view, 'map.basemap.title', (title) => console.log(title));

// reactiveUtils
watch(
    () => view.map?.basemap?.title,
    (title) => console.log(title)
);
Вход в полноэкранный режим Выход из полноэкранного режима

Этот пример не слишком интересен, но он дает представление о том, чего можно достичь.

Невероятно полезным свойством для отслеживания является view.updating. Это свойство будет true, когда происходит выборка данных и рендеринг карты, и станет false, когда рендеринг будет завершен. Полезно знать, когда вид в 2d или 3d завершил отрисовку.

when(
    () => !view.updating,
    (updating) => /** take screenshot, notify user, etc **/
);
Вход в полноэкранный режим Выход из полноэкранного режима

Вы также можете следить за изменением нескольких свойств. Возможно, вас интересует проверка, когда изменяется zoom или scale карты, но не когда вы панорамируете карту. Для этого необходимо отследить предыдущее значение масштаба для сравнения.

let prevZoom;

// wait for view to be ready
whenOnce(() => view.ready).then(() => {
  // save the initial value
  prevZoom = view.zoom;
  watch(
    () => [view.zoom, view.stationary],
    ([zoom, stationary]) => {
      // do not execute if values are the same
      if (zoom === prevZoom) return;
      // make sure view is stationary
      if (stationary) {
        // update tracked value
        prevZoom = zoom;
        // do something when the value is updated as expected
        console.log(zoom);
      }
    }
  );
});
Вход в полноэкранный режим Выход из полноэкранного режима

В этом примере, в качестве бонуса, мы можем рассмотреть альтернативу view.when() для проверки истинности свойства view.ready с помощью whenOnce.

Вы можете быть настолько подробными или конкретными в том, как вы следите за изменениями свойств, насколько это необходимо. В документации есть отличный пример, который вы можете посмотреть, с некоторыми хорошими примерами использования.

События

Альтернативой target.on() является использование on() для прослушивания событий.

on(
    () => view.popup,
    "trigger-action",
    (event) => handleTriggerAction(event)
);
Вход в полноэкранный режим Выход из полноэкранного режима

Вы даже можете прослушивать несколько событий.

on(
    () => view,
    ["click", "double-click"],
    (event) => handleViewEvents(event)
);
Вход в полноэкранный режим Выход из полноэкранного режима

Это может быть полезно, если вы хотите обрабатывать несколько событий одинаково для компонента или элемента.

Резюме

Это было лишь краткое введение в reactiveUtils в ArcGIS API for JavaScript. Существует множество различных вариантов использования этой утилиты в ваших приложениях. В reactiveUtils меньше методов, чем в watchUtils, но теперь у вас есть больше гибкости в том, как компоновать то, за чем следят, когда обрабатывать эти обновления и другие побочные эффекты в вашем приложении. Если вы научитесь использовать reactiveUtils в ArcGIS API for JavaScript, вы сможете поднять свой опыт разработки на новый уровень!

Более подробную информацию вы можете увидеть в видео ниже!

Оцените статью
Procodings.ru
Добавить комментарий