Просмотр отступов в ArcGIS API для JavaScript

Просмотр отступов

ArcGIS API for JavaScript предоставляет несколько способов помочь разработчикам в создании пользовательского интерфейса.
Он предоставляет множество готовых виджетов, стилизованных с помощью Calcite Design System. Каждый вид предоставляет элемент пользовательского интерфейса (UI), который пользователи могут использовать для определения макетов вокруг своей карты. Вы можете добавлять виджеты или свои собственные элементы HTML. Иногда это может привести к странным вариантам использования, если вы хотите сохранить фокус вашего приложения на карте. Вот тут-то и приходит на помощь view padding!

Код для этого блога доступен на github.

View padding позволяет смещать центр карты в пользовательском интерфейсе. Это не намного сложнее. Это полезно, если вы хотите отобразить боковую панель или некоторые виджеты с одной стороны карты, но при этом сохранить фокус на карте. Вы можете применить некоторую прокладку вида, чтобы выровнять все по линии. По мере изменения прокладки меняется и фокусная центральная точка карты.
Хорошо, это прекрасно, но как быть, если это динамическая боковая панель с анимацией? И вы хотите динамически регулировать подкладку?

Давайте немного повеселимся!

Электрический слайд

Прежде чем мы погрузимся в код, давайте поговорим о том, чего вы хотите добиться.

1. Показать инструменты в боковой панели.
2. Анимировать ящик боковой панели.
3. Динамически регулировать прокладку вида с помощью анимации ящика.

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

Математика не является одной из моих сильных сторон, по крайней мере, когда речь идет о таких вещах, как функции смягчения, поэтому я уверен, что большую часть этой функции анимации я нашел через Google и StackOverflow.

const margin = -280;

const identity = ((a: any) => a);
const duration = 500;
function animate(options = {
  easing: identity,
  onProgress: identity,
  onComplete: identity,
  from: {},
  to: {}
}) {
  const {
    easing,
    onProgress,
    onComplete,
    from,
    to
  } = options;

  const startTime = Date.now();

  function update() {
    let deltaTime = Date.now() - startTime;
    let progress = Math.min(deltaTime / duration, 1);
    let factor = easing(progress);
    let values = {};

    for (let k in from) {
      if (k) {
        values[k] = from[k] + (to[k] - from[k]) * factor;
      }
    }

    onProgress(values);

    if (progress === 1) {
      onComplete(deltaTime);
    }
    else {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

Эта функция позволяет получить время начала анимации, чтобы вы могли проследить ее ход до завершения. По мере продвижения анимации вы можете использовать requestAnimationFrame для создания плавной анимации на JavaScript.

Вот некоторые вспомогательные методы и функция смягчения.

// easing function
function inSine(t: number) {
    return -Math.cos(t * Math.PI / 2) + 1;
}

// update the view padding object
function updatePadding(value: number) {
    return {
        left: value - margin + defaultPadding
    }
}

// expand the view padding
function expand() {
    animate({
        easing: inSine,
        onProgress({ a }: { a: number; }) {
            slider.style.marginLeft = `${a}px`;
            view.padding = updatePadding(a);
        },
        onComplete() {
            btnExpand?.removeEventListener('click', expand);
            btnExpand?.addEventListener('click', collapse);
        },
        from: {
            a: margin
        },
        to: {
            a: 0
        }
    });
}

// collapse the view padding
function collapse() {
    animate({
        easing: inSine,
        onProgress({ a }: { a: number }) {
            slider.style.marginLeft = `${a}px`;
            view.padding = updatePadding(a);
        },
        onComplete() {
            btnExpand?.removeEventListener('click', collapse);
            btnExpand?.addEventListener('click', expand);
        },
        from: {
            a: 0
        },
        to: {
            a: margin
        }
    })
}

btnExpand?.addEventListener('click', expand);

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

Резюме

Настройка прокладки вида может быть очень удобной в случаях, когда вы хотите добавить заголовок к виду карты, возможно, в пользовательских компонентах, которые имеют раздвижные панели и могут динамически менять свои размеры во время использования. Повеселитесь с этим, вы никогда не знаете, что вы можете найти.

Вы можете посмотреть пример этого приложения в видео ниже!