Как добавить векторные объекты на карту OpenLayers 3 (с изображениями)

Оглавление:

Как добавить векторные объекты на карту OpenLayers 3 (с изображениями)
Как добавить векторные объекты на карту OpenLayers 3 (с изображениями)

Видео: Как добавить векторные объекты на карту OpenLayers 3 (с изображениями)

Видео: Как добавить векторные объекты на карту OpenLayers 3 (с изображениями)
Видео: Как использовать журнал событий в Windows 2024, Марш
Anonim

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

Обратите внимание, что для работы с этой статьей вам необходимо установить на веб-страницу работающую карту OpenLayers. Если у вас его нет, см. Как создать карту с помощью OpenLayers 3.

Шаги

Часть 1 из 3: Добавление объектов точек и линий

Шаг 1. Создайте точечный объект

Просто скопируйте следующую строку кода в свой

элемент:

var point_feature = новый ol. Feature ({});

Шаг 2. Задайте геометрию точки

Чтобы сообщить OpenLayers, где разместить точку, вам нужно создать геометрию и дать ей набор координат, который представляет собой массив в форме [долгота (E-W), широта (N-S)]. Следующий код создает это и задает геометрию точки:

var point_geom = новый ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);

Шаг 3. Создайте линейно-струнный объект

Строки линий - это прямые линии, разбитые на сегменты. Мы создаем их так же, как точки, но предоставляем пару координат для каждой точки строки строки:

var linestring_feature = новый ol. Feature ({геометрия: новый ol.geom. LineString (

Шаг 4. Добавьте объекты в векторный слой

Чтобы добавить объекты на карту, вам необходимо добавить их в источник, который вы добавляете в векторный слой, который затем можно добавить на карту:

var vector_layer = новый ol.layer. Vector ({источник: новый ol.source. Vector ({функции: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);

Часть 2 из 3. Преобразование геометрии объектов для использования координат

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

Шаг 1. Поместите объекты в массив

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

var features = [point_feature, linestring_feature];

Шаг 2. Напишите функцию преобразования

В OpenLayers мы можем использовать функцию transform () для геометрического объекта каждой функции. Поместите этот код преобразования в функцию, которую мы можем вызвать позже:

функция transform_geometry (element) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). transform (текущая_проекция, новая_проекция);); }

Шаг 3. Вызовите функцию преобразования для пространственных объектов

Теперь просто выполните итерацию по массиву.

features.forEach (transform_geometry);

Часть 3 из 3: Настройка стиля векторного слоя

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

Шаг 1. Создайте заливку и топку

Создайте объект стиля заливки, полупрозрачный красный цвет и стиль обводки (линии), представляющий собой сплошную красную линию:

var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({цвет: [180, 0, 0, 1], ширина: 1});

Шаг 2. Создайте стиль и примените его к слою

Объект стиля OpenLayers довольно мощный, но пока мы собираемся установить только заливку и обводку:

var style = new ol.style. Style ({изображение: новый ol.style. Circle ({заливка: заливка, обводка: обводка, радиус: 8}), заливка: заливка, обводка: обводка}); vector_layer.setStyle (стиль);

Рекомендуемые: