Модуль, упрощающий работу с 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'
        });

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

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

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

Автор: ghaiklor

Источник