Версия 0.4 от 01 июнь, 2013 г.
Цель
Целью данного примера является освоение создания простой веб-страницы, позволяющей отображать карту сервиса GoMap, производить базовые действия с ее отображением - масштабирование и протаскивание. А также отображением объекта на карте.
Реквизиты
Для прохождения данного урока необходимы базовые навыки создания HTML страниц. Для выполнения данного урока понадобится редактор HTML. В примере используется библиотека OpenLayers, которая представлена на сайте
http://openlayers.org (открывается в новом окне).
Простое использование GoMap.Az и Openlayers API
Данный пример позволяет создавать простую карту, основанную на GoMap.Az и Openlayers API. Готовый пример находиться здесь (открывается в новом окне).
В секцию <head> необходимо включить JavaScript библиотеки OpenLayers:
<script src="http://openlayers.org/api/2.12/OpenLayers.js"></script>
Также в секции <head> необходимо создать глобальную переменную var map; которая будет хранить объект карты и функцию init() которая будет инициализировать карту.
В функции init() первым делом создадим карту. При этом следует учесть что для отображения карты будет использован регион <div id="map"> который располагается в секции <body>
Проекция, единицы системы координат (метры) и границы области показа могут быть установлены согласно примеру:
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
restrictedExtent: new OpenLayers.Bounds(4400000, 4600000, 5700000, 5500000)
});
Устанавливаем проекцию отображения карты:
map.displayProjection = new OpenLayers.Projection("EPSG:4326");
Создаем слой карты GoMap.Az. Слой карты GoMap.Az работает по подобию слоев OSM (OpenStreetMap). При этом для управления библиотекой OpenLayers передаются три параметра x, y, x, где z представляет собой уровень масштаба. Параметр lng задает язык надписей карты ( az, en, ru ). Параметр f указывает формат фрагментов карты.
var gomapLayer = new OpenLayers.Layer.OSM(
"GoMap.Az", "http://maps.gomap.az/info/xyz.do?lng=ru&x=${x}&y=${y}&z=${z}&f=jpg", {
'buffer': 0, attribution: "(c) <a href='http://gomap.az/'>GoMap.Az</a>",
tileOptions: { crossOriginKeyword: null },
transitionEffect: 'resize',
zoomOffset: 7,
numZoomLevels: 12,
maxResolution: 1222.99245234375
});
Добавляем созданный слой к картеmap:
map.addLayers([gomapLayer]);
В итоге указываем центр карты и и уровень масштаба, которые позволят установить режим отображения карты при первом открытии страницы.
map.setCenter(new OpenLayers.LonLat(5551660.2717726,4921653.5202719), 5);
Для того, чтобы функция init() сработала при первом открытии страницы, вызываем ее в конце загрузке секции <body>
<script type="text/javascript">
init();
</script >
Указанный пример позволяет работать с 1 слоем карты. Далее описывается добавление слоя GoogleMaps и работу с 2 слоями.
Добавление слоя GoogleMaps
Готовый пример находиться здесь (открывается в новом окне).
В секцию <head> необходимо добавить JavaScript GoogleMaps API:
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
В функцииinit()кроме слоя карты GoMap.Az добавляется новый слой спутниковой карты Google:
var googlemapLayer = new OpenLayers.Layer.Google("Google Satellite", {type: google.maps.MapTypeId.SATELLITE, MIN_ZOOM_LEVEL: 7, MAX_ZOOM_LEVEL: 18});
Команду добавления слоев к карте необходимо изменить с учетом добавления двух новых слоев:
map.addLayers([gomapLayer, googlemapLayer]);
Для того чтобы слои на карте можно было переключать, добавим элемент пользовательского интерфейса переключения слоев. Данный элемент высветит возле правой границы региона карты знак плюс, который позволит выбрать отображаемую карту.
map.addControl(new OpenLayers.Control.LayerSwitcher());
Добавление Маркера на карту
Готовый пример находиться здесь (открывается в новом окне).
В секцию <head> необходимо создать глобальные переменные
var sprintersLayer;
var defaultStyleMap = {
externalGraphic: "flag.png",
graphicOpacity: 1.0,
graphicWidth: 195,
graphicHeight: 100,
graphicXOffset: -125,
graphicYOffset: -95,
graphicZIndex: 99
});
Переменная sprintersLayer – это векторный слой, на котором будут располагаться маркеры.
Переменная defaultStyleMap содержит в себе данные о рисунке маркера, ширине, высоте и расположении рисунка (Не маркера!)
В функции init() инициируем векторный слой
sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
styleMap: new OpenLayers.StyleMap(defaultStyleMap)
});
Добавляем векторный слой на карту
map.addLayers([gomapLayer,googlemapLayer,sprintersLayer]);
Добавляем «кинетику» для эффекта сглаживания при «перетаскивании» карты (в частности для удобства использования мобильными устройствами)
map.addControl(new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}));
Теперь добавляем на векторный слой возможность «нажатия» на маркер
click = new OpenLayers.Control.SelectFeature(
[sprintersLayer],{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey",
multipleKey: "shiftKey"
});
map.addControl(click);
И описываем событие
sprintersLayer.events.on({
"featureselected": function(e) {
alert('selected');
},
" featureunselected": function(e) {
alert('unselected');
}
});
click.activate();
Размещаем маркер, указываем его координаты
var lonlat = new OpenLayers.LonLat(49.86694,40.39528).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
Инициируем маркер (флажок), задаем ему координаты и добавляем на векторный слой
var flag = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(Math.floor(lonlat.lon), Math.floor(lonlat.lat)));
flag.x = lonlat.lon;
flag.y = lonlat.lat;
sprintersLayer.addFeatures(flag);
Центрируем карту на нем
map.setCenter(lonlat, 9);