Слушайте маркер на клик на OpenLayer - PullRequest
Новая
       12

Слушайте маркер на клик на OpenLayer

0 голосов
/ 30 июня 2019

Я определил маркер ниже, как я могу сделать следующее: - Добавление onclick слушателя - Отображение всплывающего окна при срабатывании onclick слушателя 

var marker = new ol.Feature({
    name: 'TRUCK TR1',
    population: 4000,
    rainfall: 500,
    geometry: new ol.geom.Point(
      ol.proj.fromLonLat([-74.006,40.7127])  // new Point([0, 0])
    ),  // Cordinates of New York's Town Hall
});

1 Ответ

0 голосов
/ 02 июля 2019

Вы можете использовать мой код, просто используйте событие click вместо pointermove. Вот ссылка ol всплывающее окно при событии клика 

<!DOCTYPE html>


  
      .ol-popup {
            position: absolute;
            background-color: white;
            /*--webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));*/
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 180px;
        }

        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
    

  
  

  
  var straitSource;
    var map;
  




 
  




content = document.getElementById('popup-content');
var center = ol.proj.transform([76.26, 9.93], 'EPSG:4326', 'EPSG:3857'); //initial position of map
    var view = new ol.View({
        center: center,
        zoom: 2
    });

//raster layer on map
   var OSMBaseLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

 straitSource = new ol.source.Vector({ wrapX: true });
    var straitsLayer = new ol.layer.Vector({
        source: straitSource
    });

 map = new ol.Map({
        layers: [OSMBaseLayer, straitsLayer],
        target: 'map',
        view: view,
        controls: [new ol.control.FullScreen(), new ol.control.Zoom()]
    });

   // Popup showing the position the user clicked
    var container = document.getElementById('popup');
    var popup = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(popup);

  /* Add a pointermove handler to the map to render the popup.*/
    map.on('pointermove', function (evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feat, layer) {
            return feat;
        }
        );

        if (feature && feature.get('type') == 'Point') {
            var coordinate = evt.coordinate;    //default projection is EPSG:3857 you may want to use ol.proj.transform

            content.innerHTML = feature.get('desc');
            popup.setPosition(coordinate);
        }
        else {
            popup.setPosition(undefined);

        }
    });

var data=[{"Lon":19.455128,"Lat":41.310575},{"Lon":19.455128,"Lat":41.310574},{"Lon":19.457388,"Lat":41.300442},{"Lon":19.413507,"Lat":41.295189},{"Lon":16.871931,"Lat":41.175926},{"Lon":16.844809,"Lat":41.151096},{"Lon":16.855165,"Lat":45}];

function addPointGeom(data) {

        data.forEach(function(item) { //iterate through array...
            var longitude = item.Lon,
                latitude = item.Lat,
                iconFeature = new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',
                        'EPSG:3857')),
                  type: 'Point',
                    desc: ' Waypoint Details  ' + '
' + 'Latitude : ' + latitude + '
Longitude: ' + longitude + '
'}), iconStyle = new ol.style.Style ({ изображение: новый ol.style.Circle ({ радиус: 5, Инсульт: новый ol.style.Stroke ({ цвет синий' }), fill: new ol.style.Fill ({ цвет: [57, 228, 193, 0,84] }), }) }); iconFeature.setStyle (iconStyle); straitSource.addFeature (iconFeature); }); } // Конец функции showStraits () addPointGeom (данные);
...