- PVSM.RU - https://www.pvsm.ru -
Привет!
После недолгого времени разработки систем спутникового мониторинга на базе OpenLayers я пришел к выводу: «Надоело мне постоянно создавать нужные объекты, та еще и кучу объектов. Хранить это все в разных переменных и много еще чего.». Поэтому я решил написать легковесный модуль, который упростит немного разработку подобного рода систем.
А именно он упрощает работу с такими вещами, как управление маркерами на карте, построения треков, сохранений геометрий в WKT для последующего сохранения в базу данных и т.п. вещи.
Статья будет короткая. Вкратце опишу что к чему и зачем.
Реализовано было всего 6 классов и один класс, который предоставляет единый интерфейс доступа к ним. Все это дело было сжато Grunt'ом в один минифицированный файл.
Рассмотрим некоторые примеры работы с этим модулем.
Конструктор модуля инициализирует карту, добавляет слой с картой и все классы, описанные выше. Одним словом, вызывая конструктор, мы уже имеем на руках рабочую карту:
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/
Нажмите здесь для печати.