Как я могу добавить событие для poi в OpenLayers?

Я видел пример на Официальный веб-сайт OpenLayers. Могу ли я добавлять события к этим звездам? При нажатии на звездочку появится всплывающее окно, в котором можно будет перечислить конкретную информацию об этой точке.

vector = new ol.layer.Vector({
source: new ol.source.Cluster({
    distance: 40,
    source: new ol.source.Vector({                  
        url:'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml',     
        format : new ol.format.KML()
    })
}),
style: styleFunction});


var bglayer = new ol.layer.Tile({
source: new ol.source.XYZ({
    url:'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
272
1

Ответы 1

Да, ты можешь. Поскольку вы используете слой кластера, вы можете получить больше функций одним щелчком мыши, поэтому вам придется обрабатывать это в своем коде. Вы можете использовать этот пример https://openlayers.org/en/latest/examples/popup.html с веб-сайта открытых слоев и изменить свой код, как показано ниже:

    <div id = "map" class = "map"></div>
    <div id = "popup" class = "ol-popup">
      <a href = "#" id = "popup-closer" class = "ol-popup-closer"></a>
      <div id = "popup-content"></div>
    </div>

    <script>
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

         /**
       * Create an overlay to anchor the popup to the map.
       */
      var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      });


      /**
       * Add a click handler to hide the popup.
       * @return {boolean} Don't follow the href.
       */
      closer.onclick = function() {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      };


    var raster = new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: true,
    });


    vector = new ol.layer.Vector({
    source: new ol.source.Cluster({
        distance: 40,
        source: new ol.source.Vector({                  
            url:'https://openlayers.org/en/v4.6.5/examples/data/kml/2012_Earthquakes_Mag5.kml',     
            format : new ol.format.KML()
            })
        }),
        zIndex: 1000,
    });


    var m_map = new ol.Map({
         layers : [vector,raster],
         overlays: [overlay],
         target: document.getElementById('map'),
         view: new ol.View({
           center: [0,0],
           zoom: 2,
            })
        });

    m_map.on('click', function (evt) {

        var coordinate = evt.coordinate;
        var features = m_map.getFeaturesAtPixel(evt.pixel, { hitTolerance: 5 });

        //Display feature info on a popup           
        //Write your logic to handle multiple feaatures here 
        for(var i=0;i<features[0].get('features').length;i++){
            console.info(features[0].get('features')[i]);
            console.info(features[0].get('features')[i].get('name'));
        }
        ///

        content.innerHTML = '<p>Total points detected :'+features[0].get('features').length  +' </p><p>First points Name:</p><code>'+features[0].get('features')[0].get('name')+'</code>';

        overlay.setPosition(coordinate);

    });
    </script>

Другие вопросы по теме