Добавление элементов управления на карту

Статья
11/08/2024

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

Добавление элемента управления масштабом

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

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Добавление элемента управления наклоном

Элемент управления наклоном добавляет кнопки для угла наклона карты относительно горизонта. В следующем примере кода создается экземпляр класса PitchControl. Он добавляет PitchControl в правый верхний угол карты.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Добавление элемента управления расстоянием

Элемент управления компасом добавляет кнопку для поворота карты. В следующем примере кода создается экземпляр класса CompassControl. Он добавляется в левый нижний угол карты.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Добавление элемента управления масштабированием

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

//Construct a scale control and add it to the map.
map.controls.add(new atlas.control.ScaleControl(), {
    position: 'bottom-left'
});

Добавление полноэкранного элемента управления

Полноэкранный элемент управления добавляет кнопку для переключения карты или указанного HTML-элемента между полноэкранным и обычным представлением. Следующий пример кода создает экземпляр класса FullscreenControl и добавляет его в правый верхний угол карты.

//Construct a fullscreen control and add it to the map.
map.controls.add(new atlas.control.FullscreenControl(), {
    position: 'top-right'
});

Карта со всеми элементами управления

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

map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.PitchControl(),
    new atlas.control.CompassControl(),
    new atlas.control.StyleControl(),
    new atlas.control.FullscreenControl(),
    new atlas.control.ScaleControl(),
  ],
  {
    position: 'top-right',
  }
);

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

Элемент управления для выбора стиля определяется классом StyleControl. Дополнительные сведения об использовании элемента управления для выбора стиля см. в статье Выбор стиля карты.

Настройка элементов управления

Пример параметров управления навигацией — это средство для тестирования различных параметров настройки элементов управления. Исходный код этого примера см . в разделе "Параметры управления навигацией" в исходном коде.

Пример параметров полноэкранного управления предоставляет средство для тестирования параметров настройки полноэкранного элемента управления. Исходный код для этого примера см . в разделе "Параметры полноэкранного управления" исходного кода.

Если вам нужно создать настраиваемые элементы управления навигацией, создайте класс как расширение класса atlas.Control, или создайте HTML-элемент и поместите его над элементом div карты. Этот элемент пользовательского интерфейса вызывает функцию setCamera для перемещения карты.