как показать данные из json как всплывающую функцию при нажатии на маркер с использованием ionic 3 и открытого слоя 4

Question

У меня есть открытая карта слоев, которая показывает маркер широты и долгого натяжения от json. JSON также содержит другие данные, относящиеся к широте и долготе, такие как время молнии и т. Д. Мне нужно показывать эти данные во всплывающем окне, когда я нажимаю на любой маркер. В настоящее время я могу получить только те координаты, которые предоставляются при нажатии на карту. Я выполняю эту задачу в приложении ionic 3. Я новичок, чтобы открыть слои. Я понятия не имею, как показать. Я пробовал немного из Интернета, но ни один из них не работает. Помогите мне, пожалуйста! Следующее - моя функция для отображения карты и маркеров. Мне нужно показать функцию под названием "desc", которая находится под этой функцией marker

this.api.get_recent_event_lightning()
  .subscribe(data => {
    this.recent_event_data = data;
    console.log('recent event data', this.recent_event_data);
     var length = this.recent_event_data.length;
     for(var i = 0; i < length; i++){
      var lati = this.recent_event_data[i].latitude;
      var longi = this.recent_event_data[i].longitude;
      this.flash_type = this.recent_event_data[i].flash_type;
      this.lightning_time = this.recent_event_data[i].lightning_time,
      this.latitude.push(lati);
      this.longitude.push(longi);
      for(var j = 0; j< this.latitude.length; j++){
           this.marker =  new ol.Feature({
                      geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([parseFloat(this.longitude[j]), parseFloat(this.latitude[j])])
                        ),
                      desc: this.lightning_time,
                      type: 'click',
                    }); 

          this.marker.setStyle(new ol.style.Style({
                image: new ol.style.Icon(({
                    crossOrigin: 'anonymous',
                    src: '/assets/imgs/blue-dot.png'
                }))
            }));

        var vectorSource = new ol.source.Vector({
          // features: [this.marker]
        });   

        var markerVectorLayer = new ol.layer.Vector({
          source: vectorSource
        });
        vectorSource.addFeature(this.marker);
        this.map.addLayer(markerVectorLayer);
       }
    }
});
this.loading.dismiss();  

// Creating District Vector Source
var district = new ol.layer.Vector({
    renderMode: 'image',
    visible:true,
    // baseLayer: true,
    source: new ol.source.Vector({
        url: 'assets/geojson/Odisha_Dist.geojson',
        format: new ol.format.GeoJSON()
    })
});

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

// Adding the District and OSM layer to the map
 this.map = new ol.Map({
    layers: [osm, district],
    renderer: 'canvas',
    target: 'map', // Rendering to a particular ID
    view: new ol.View({
        center: ol.proj.transform([84.3995, 20.9517], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6.3
    }),
    controls: ol.control.defaults().extend([
      new ol.control.FullScreen()
    ]),
});

  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,
    offset:[0, -30]
  });

  this.map.addOverlay(overlay);

closer.onclick = function() {
  console.log('close clicked');
    overlay.setPosition(undefined);
    closer.blur();
    return false;}

this.map.on('singleclick', (evt) => {
    console.log('clicked marker');
    var coordinate = evt.coordinate;
    var new_coo = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
    console.log('new', new_coo);
    this.feature = this.map.forEachFeatureAtPixel(evt.pixel, (feature) => { return this.feature; });
    console.log('fea', this.feature);
    // if (features) {
    //         var popupInfo = '<p> '+features.get('desc')+' <br></p>';
    //         console.log(popupInfo);
    //         content.innerHTML = popupInfo;
    //         overlay.setPosition(coordinate);
    //         container.classList.toggle("show");
    //  } 
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));
    content.innerHTML = hdms;
    console.log('hdms',content);
    overlay.setPosition(coordinate);
    container.classList.toggle("show");
  });    

}