Геокодирование адреса в координаты и геолокация текущего местоположения в OpenLayers

Этот пост будет небольшим, но надеюсь полезным. Сегодня я расскажу о том, как я реализовал поиск места на карте по его адресу, а также как я определяю текущее местоположение пользователя. Все это реализовано на основе OpenLayers 2.

Я рассчитываю на то, что читатель уже знаком с азами работы в OpenLayers и карта со слоями уже создана. Если нет, то пишите в комментарии, я попробую все подробно рассказать.

На первом месте стоит геолокация. IMHO, благодаря OL этот вопрос не является трудоемким.

Сначала создадим нужный объект:

var control = new OpenLayers.Control.Geolocate(            bind: false,            watch: true,            geolocationOptions: {                     enableHighAccuracy: true,                     maximumAge: 0,                     timeout: 15000                 }); 

и добавим его на карту (OpenLayersMap — это собственно созданный объект карты после конструктора OpenLayers.Map(options)):

OpenLayersMap.addControl(control); 

С этим разобрались, но что же дальше. Дальше нужно его активировать. Опять-таки, все просто:

control.activate(); 

И последнее что я добавил — это обработчик события, когда местоположение найдено. Для этого регистрируем событие и указываем функцию для обработки этого события:

control.events.on({ "locationupdated": function(e) {                 OpenLayersFunc.Events.GeolocateOnLocationUpdated(e);                 } }) 

Теперь подготовим слой для отображения наших элементов:

var layer = new OpenLayers.Layer.Vector('Geolocate', {            styleMap: new OpenLayers.StyleMap(                     new OpenLayers.Style({                                   fillColor: '#000',                                   fillOpacity: 0.1,                                   strokeWidth: 0})                     ) }); OpenLayersMap.addLayer(layer); 

Осталось написать функцию OpenLayersFunc.Events.GeolocateOnLocationUpdated. Сам принцип действия таков. Когда срабатывает событие «locationupdated», вызывается наша функция, в которую передается event этого события. А уже в этой функции мы изгаляемся над ним, как хотим. Код я постарался прокомментировать, так что просто смотрим:

var vector = OpenLayersMap.getLayersByName('Geolocate')[0]; vector.removeAllFeatures(); //очистили слой геолокации (чтобы не было дубляжей) var polygon = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(e.point.x, e.point.y), e.position.coords.accuracy / 2, 40, 0); var circle = new OpenLayers.Feature.Vector(polygon); //создали геометрию круга вокруг точки нашего местоположения и создали объект слоя var point = new OpenLayers.Feature.Vector(e.point, {}, {             graphicName: 'cross',             strokeColor: '#f00',             strokeWidth: 1,             fillOpacity: 0,             pointRadius: 8         }); //также создаем саму точку vector.addFeatures([point, circle]); //и добавляем круг с точкой на слой if (OpenLayersFunc.Events.GeolocateFirstRun) { //это просто глобальная переменная, чтобы определить запускаем ли мы в первый раз             pulsate(circle); //а это уже красота, смотрим дальше             OpenLayersFunc.Events.GeolocateFirstRun = false;         } 

Функция pulsate добавляет анимацию пульсирования на круг. В параметре мы передаем объект нашего круга — circle. Смотрится довольно эффектно:

var pulsate = function(feature) {             var point = feature.geometry.getCentroid();             var bounds = feature.geometry.getBounds();             var radius = Math.abs((bounds.right - bounds.left) / 2);             var count = 0;             var grow = 'up';             var resize = function() {                 if (count > 16) {                     clearInterval(window.resizeInterval);                 }                 var interval = radius * 0.03;                 var ratio = interval / radius;                 switch (count) {                     case 4:                     case 12:                         grow = 'down';                         break;                     case 8:                         grow = 'up';                         break;                 }                 if (grow !== 'up') {                     ratio = -Math.abs(ratio);                 }                 feature.geometry.resize(1 + ratio, point);                 vector.drawFeature(feature);                 count++;             };             window.resizeInterval = window.setInterval(resize, 50, point, radius);         }; 

Весь код данной реализации под спойлером:

var layer = new OpenLayers.Layer.Vector('Geolocate', {            styleMap: new OpenLayers.StyleMap(                     new OpenLayers.Style({                                   fillColor: '#000',                                   fillOpacity: 0.1,                                   strokeWidth: 0})                     ) }); OpenLayersMap.addLayer(layer); var control = new OpenLayers.Control.Geolocate(            bind: false,            watch: true,            geolocationOptions: {                     enableHighAccuracy: true,                     maximumAge: 0,                     timeout: 15000                 }); OpenLayersMap.addControl(control); control.activate(); OpenLayersFunc.Events.GeolocateFirstRun = true; OpenLayersFunc.Events.GeolocateOnLocationUpdated = function(e) {         var vector = OpenLayersTools.Layers.GetLayerByName('Geolocate');         var pulsate = function(feature) {             var point = feature.geometry.getCentroid();             var bounds = feature.geometry.getBounds();             var radius = Math.abs((bounds.right - bounds.left) / 2);             var count = 0;             var grow = 'up';             var resize = function() {                 if (count > 16) {                     clearInterval(window.resizeInterval);                 }                 var interval = radius * 0.03;                 var ratio = interval / radius;                 switch (count) {                     case 4:                     case 12:                         grow = 'down';                         break;                     case 8:                         grow = 'up';                         break;                 }                 if (grow !== 'up') {                     ratio = -Math.abs(ratio);                 }                 feature.geometry.resize(1 + ratio, point);                 vector.drawFeature(feature);                 count++;             };             window.resizeInterval = window.setInterval(resize, 50, point, radius);         };         OpenLayersTools.Layers.ClearLayers(['Geolocate']);         var polygon = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(e.point.x, e.point.y), e.position.coords.accuracy / 2, 40, 0);         var circle = new OpenLayers.Feature.Vector(polygon);         var point = new OpenLayers.Feature.Vector(e.point, {}, {             graphicName: 'cross',             strokeColor: '#f00',             strokeWidth: 1,             fillOpacity: 0,             pointRadius: 8         });         vector.addFeatures([point, circle]);         if (OpenLayersFunc.Events.GeolocateFirstRun) {             pulsate(circle);             OpenLayersFunc.Events.GeolocateFirstRun = false;         }     }; control.events.on({ "locationupdated": function(e) {                 OpenLayersFunc.Events.GeolocateOnLocationUpdated(e);                 } }) 

Перейдем теперь к очень похожей вещи — геокодирование. Я использовал апи от гуглов и не жалею. Начнем:

Сначала создали еще один слой для отображения маркера с попапом:

var layer = new OpenLayers.Layer.Vector('Geocoder', {            styleMap: new OpenLayers.StyleMap(                     new OpenLayers.Style({                                  externalGraphic: '../images/geocoder_marker.png',                                  graphicWidth: 32,                                  graphicHeight: 32,                                  graphicYOffset: -32                     ) }); 

Здесь все намного проще. Одна функция и та, от jQuery, чтобы сделать все красиво. Создаем объект геокодирования, делаем запрос гуглам, получаем результат и парсим для jquery-ui.autocomplete на source. А на select вешаем центрирование карты на этот адрес и добавляем маркер с окошком адреса:

var geocoder = new google.maps.Geocoder(); //создаем объект геокодирования     $('#top-search-field').autocomplete({ //подключаем плагин к нашему полю ввода         source: function(request, response) { //заполняем автодополнение результатами возможных адресов             geocoder.geocode({'address': request.term}, function(results, status) { //отправляем введенный текст                 response($.map(results, function(item) { //и получаем список возможных вариантов адресов                     return { //какую мы и генерируем в объект для autocomplete                         label: item.formatted_address,                         value: item.formatted_address,                         latitude: item.geometry.location.lat(),                         longitude: item.geometry.location.lng()                     };                 }));             });         },         select: function(event, ui) { //в случае выбора некого пункта             var layer = OpenLayersMap.getLayersByName('Geocoder')[0];             layer.removeAllFeatures(); //очищаем слой от предыдущих объектов             var point_popup = new OpenLayers.LonLat(ui.item.longitude, ui.item.latitude); //создаем координаты для попапа             point_popup.transform(new OpenLayers.Projection("EPSG:4326"), OpenLayersMap.getProjectionObject()); //и переводим в другую проекцию             var point = new OpenLayers.Geometry.Point(ui.item.longitude, ui.item.latitude); //создаем точку             point.transform(new OpenLayers.Projection("EPSG:4326"), OpenLayersMap.getProjectionObject());             var feature = new OpenLayers.Feature.Vector(point); //создаем объект точки             var popup = new OpenLayers.Popup.FramedCloud('geocoder_marker', point_popup, new OpenLayers.Size(200, 50), ui.item.label, null, false, true); //создаем попап             OpenLayersTools.BaseFunc.CenterMap(ui.item.longitude, ui.item.latitude, 'EPSG:4326'); //центрируем на координатах адреса             popup.closeOnMove = true; //выставляем свойство, при движении карты закрыть попап             OpenLayersMap.addPopup(popup);             layer.addFeatures(feature); //и добавляем все это на карту и слой         }     }); 

Полный код даже незачем вешать, он и так весь сверху 🙂

P.S. Попробовал вот такое написать, не знаю, получилось или нет. Но все равно жду конструктивной критики, пожелания 🙂