- PVSM.RU - https://www.pvsm.ru -

Модуль, упрощающий работу с OpenLayers и системами мониторинга

Привет!

После недолгого времени разработки систем спутникового мониторинга на базе OpenLayers я пришел к выводу: «Надоело мне постоянно создавать нужные объекты, та еще и кучу объектов. Хранить это все в разных переменных и много еще чего.». Поэтому я решил написать легковесный модуль, который упростит немного разработку подобного рода систем.

А именно он упрощает работу с такими вещами, как управление маркерами на карте, построения треков, сохранений геометрий в WKT для последующего сохранения в базу данных и т.п. вещи.

Статья будет короткая. Вкратце опишу что к чему и зачем.

Реализовано было всего 6 классов и один класс, который предоставляет единый интерфейс доступа к ним. Все это дело было сжато Grunt'ом в один минифицированный файл.

  • BaseFunc — нужен для базовых функций, таких как расширить объект другим объектом, перевести геометрию в WKT или наоборот, отцентрировать карту и т.п.;
  • Console — простенький класс, в котором я описал функции записи в консоль разных типов сообщений и группы сообщений;
  • Control — здесь храним все элементы управления, которые были созданы в OpenLayers и функция добавления этих самых элементов;
  • Layer — работа со слоями. Именно здесь описаны методы добавления карт (поддерживаются Google, Bing, OSM с разными типами), добавление своих слоев, геттеры на слои или элементы слоя;
  • Track — менеджер треков. Здесь строим треки, удаляем их, скрываем. При постройке трека реализуются защиты от некорректности данных и защита от дублирования точек (в целях оптимизации);
  • Vehicle — аналогичный менеджер транспортных средств. Добавляем, перемещаемся, скрывает, удаляем.

Рассмотрим некоторые примеры работы с этим модулем.

Конструктор модуля инициализирует карту, добавляет слой с картой и все классы, описанные выше. Одним словом, вызывая конструктор, мы уже имеем на руках рабочую карту:

this.Objects.OpenLayersTools = new OpenLayersTools();

Добавление элементов управления на карту. Каждый элемент управления хранится в массиве и позже вы можете получить доступ к этим элементам в случае необходимости. Также можно передавать набор параметров каждому элементу в отдельности. Параметр функции — это объект, в котором перечисляем все необходимые элементы управления и их параметры:

this.Objects.OpenLayersTools.Control.addControls({
            LayerSwitcher: {
                controlType: 'LayerSwitcher',
                roundedCorner: true
            },
            MousePosition: {
                controlType: 'MousePosition'
            },
            PanZoomBar: {
                controlType: 'PanZoomBar'
            },
            Navigation: {
                controlType: 'Navigation'
            },
            ArgParser: {
                controlType: 'ArgParser'
            },
            Attribution: {
                controlType: 'Attribution'
            }
        });

Чтобы добавить свою карту или свой слой, то вообще все просто :) В функции addMap в объекте указываем имя карты, которое будет отображаться в селекторе карт и тип самой карты. Для добавления своего слоя передаем имя слоя в селекторе и атрибуты слоя. Обязательными являются стиль отображения слоя:

this.Objects.OpenLayersTools.Layer.addMap({
            'Google Maps': 'Google Streets'
        });
this.Objects.OpenLayersTools.Layer.addVectorLayer('Транспортные средства', {
            styleMap: {
                default: {
                    display: '${display}',
                    label: '${label}',
                    externalGraphic: '${externalGraphic}',
                    graphicWidth: 32,
                    graphicHeight: 32,
                    graphicYOffset: -50
                }
            }
        });
this.Objects.OpenLayersTools.Layer.addVectorLayer('Треки', {
            styleMap: {
                default: {
                    display: '${display}',
                    label: '${label}',
                    strokeWidth: 2
                }
            }
        })

Чтобы добавить свое транспортное средство, передаем имя слоя, на который нужно добавить ТС, координаты ТС и атрибуты элемента:

Core.Objects.OpenLayersTools.Vehicle.addVehicle('Транспортные средства', {
            longitude: longitude,
            latitude: latitude
        }, {
            id: id,
            label: 'Testing Vehicle ' + id,
            display: '',
            externalGraphic: './images/car.png'
        });

Чтобы построить свой трек, аналогично указываем имя слоя, на который добавляем трек, массив объектов с координатами (в формате [{coord_1}, {coord_2},…, {coord_n}]) и атрибуты этого элемента (трека):

Core.Objects.OpenLayersTools.Track.buildTrack('Треки', points, {
            id: id,
            label: 'Testing Track ' + id,
            display: '',
            maxInterval: 5,
            minInterval: 0.0001,
            projection: 'EPSG:4326'
        });

Пример работы можно посмотреть здесь [1]. Документацию по всем функциям можно полистать здесь [2]. Исходники лежат здесь [3].

P.S. Разрабатывал этот модуль «чисто для себя», чтобы сберечь драгоценное время. Решил выложить здесь, может кому и пригодится.
P.P.S. В случаях необходимости новых функций, планируется добавлять реализацию в этот же модуль. В планах сделать роутинг при построении треков.

Хочу сделать небольшую ремарку и поблагодарить за высланный инвайт. Больше ошибок подобного рода с моей стороны не повторится.

Автор: ghaiklor

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/35744

Ссылки в тексте:

[1] здесь: http://ghaiklor.github.io/openlayers-tools/demo/

[2] здесь: http://ghaiklor.github.io/openlayers-tools/

[3] здесь: https://github.com/ghaiklor/openlayers-tools

[4] Источник: http://habrahabr.ru/post/181840/