Оверлеи в OpenLayers

Как отметить на карте ту или иную POI? Где вывести информацию по выбранному геообъекту? Что использовать для отображения всплывающих подсказок? Маркеры, попапы, всевозможные подписи и картинки делают карту более детализированной и понятной. И все это — оверлеи в OpenLayers.


Оверлеи в OpenLayers — это HTML-элементы, которые расположены над картой и являются ее частью, привязываясь к конкретным координатам. Мы создадим несколько разноплановых элементов и начнем с простой ссылки над какой-нибудь достопримечательностью. Для создания оверлея нужен реально существующий HTML-элемент. Так как оверлеев у нас будет несколько, сразу создадим контейнер с display: none, в который поместим ссылку с id=cathedral на Храм Василия Блаженного:


    <div style="display: none;">
        <a id="cathedral" class="mapLink" 
            href="https://ru.wikipedia.org/wiki/Храм_Василия_Блаженного">Храм Василия<br />Блаженного</a>
    </div>

Стиль mapLink нужен исключительно для выделения ссылки, чтобы она была более заметной на карте:


    a.mapLink {
        background-color: #FFF;
        border-radius: 3px;
        display: inline-block;
        padding: 4px;
        text-align: center;
    }

Теперь создаем оверлей на основании ссылки:


    var label = new ol.Overlay({
        position: [ 4188188.3381199376, 7509304.829602858 ],
        element: document.getElementById('cathedral'),
        positioning: 'center-center'
    });
    map.addOverlay(label);

Разберем параметры конструктора:

  • position — координаты карты, к которым привязывается оверлей
  • element — HTML-элемент, на основании которого создается оверлей (тот элемент, который будет отображен на карте)
  • positioning указывает положение элемента относительно координаты. Например, 'top-left' означает, что элемент сместится вправо и вниз (то есть координата будет точно в левом верхнем углу ссылки)

Аналогично поместим на карту изображение и маркер. HTML-код:


    <div style="display: none;">
        <a id="cathedral" class="mapLink" target="_blank" href="https://ru.wikipedia.org/wiki/Храм_Василия_Блаженного">Храм Василия<br />Блаженного</a>
        <img id="arbat" title="Арбат, фото Alex 'Florstein' Fedorov" src="arbat.jpg" />
        <img id="marker" title="Парк Горького" src="marker.png" />
    </div>

Оверлеи:


    var label = new ol.Overlay({
        position: [ 4184823.5506498376, 7508782.833373562 ],
        element: document.getElementById('arbat'),
        positioning: 'center-center'
    });
    map.addOverlay(label);
    
    var marker = new ol.Overlay({
        position: [ 4185756.9464169894, 7504760.372082823 ],
        element: document.getElementById('marker'),
        positioning: 'bottom-center'
    });
    map.addOverlay(marker);

Здесь все делается по подобию примера со ссылкой лишь за тем исключением, что у маркера задается позиция 'bottom-center', так как маркер своей острой частью должен указывать точно в указанную координату. Теперь сделаем кое-что посложней. Чтобы карта «ожила», необходима обратная реакция — например, получение информации по клику, которую мы будем выводить в попапе. Добавим элемент-контейнер:


    <div id="popup" title="Координаты"></div>

…и сам оверлей:


    var popup = new ol.Overlay({
        element: document.getElementById('popup')
    });
    map.addOverlay(popup);

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


    map.on('click', function(evt) {
        // получение HTML-элемента попапа
        var element = popup.getElement();
        
        // получаем координаты и преобразуем в градусы, минуты и секунды
        var coordinate = evt.coordinate;
        var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
            coordinate, 'EPSG:3857', 'EPSG:4326'));

        // убираем старый попап
        $(element).popover('destroy');
        // задаем попапу положение, в котором был клик
        popup.setPosition(coordinate);
        // задаем контент и другие настройки
        $(element).popover({
            'placement': 'top',
            'animation': false,
            'html': true,
            'content': '<p>Вы кликнули в координатах:</p><code>' + hdms + '</code>'
        });
        // ...и отображаем попап
        $(element).popover('show');
    });

Для отображения попапа можно выбрать любую удобную для вас библиотеку, здесь OpenLayers предоставляет полную свободу действий. Я выбрал Bootstrap, потому что это сейчас модно давно хотел с ней познакомиться. Результат расположен ниже:




Ссылки:

Оверлеи в OpenLayers
Метки:    

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *