Слой Heatmap не отображается в пользовательском массиве

Question

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

• Отправка данных из Arduino на телефон, который добавляет каждую запись в коллекцию пожарного депо.'data'
• Второй шаг - взвешивание данных в масштабе 1-10 и возврат данных обратно в отдельный сбор, называемый 'weighttage'
• . Третий шаг - получение данных с этогосбор и отображение его на карте Google в слое тепловой карты.Для этого я использовал JavaScript API. (Ionic native не имел библиотеки визуализации)

Проблема с третьим шагом.Первоначально, когда я ждал от другого партнера по команде взвешивания данных, я настроил начальный API карты и простой пример слоя тепловой карты с тремя предопределенными точками функционально.

Намеченный результат - это FAB, который позволяет намвыбрать разные загрязняющие вещества и отобразить разные слои тепловой картыКак только взвешивание было выполнено, я вообще не смог отобразить какие-либо отформатированные данные.

Я - любитель в угловых и ионных режимах, и мне удалось пройти только через уроки, и я совершенно ошеломлен.Буду признателен за любую помощь

В настоящее время я пытаюсь создать новый массив с местоположением и весом.Первоначальные попытки не увенчались успехом и породили много исключений, так как это был обычный массив, а другой пост, который я видел здесь, преобразовал обычный в MVCArray.Как только я использовал массив MVC, я избавился от ошибок, но тепловая карта отказалась загружать любые новые значения, вставленные в массив.до сих пор у меня есть 108 объектов в коллекции и массив MVC, но мой исходный предопределенный массив - единственные точки, которые отображаются на карте.

import { Injectable, ElementRef, ViewChild } from '@angular/core';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
import { Dataline } from 'src/app/dataline';


declare var google;
@Injectable({
  providedIn: 'root'
})

export class JSService {
  @ViewChild('map') mapElement: ElementRef;
  options;
  map:any;
  collection:AngularFirestoreCollection;
  data;

  heatmapdata: [];




  constructor(public afs:AngularFirestore) {
    setTimeout(() => {
      this.collection = this.afs.collection<Dataline>('weightage');
      this.data = this.collection.snapshotChanges();
    }, 3000);

    setTimeout(() => {

  }, 3000);

  }
    // we need the data to be populated here using some magick
    // in a JSON format that looks like location: x , weight: x
    // do some magick to make it fit into a nice array and then the
    // result we will plop into the heatmap



 heatmapCO(location,element){
    let latLng= new google.maps.LatLng(location.latitude, location.longitude);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false
    };
    this.map = new google.maps.Map(element.nativeElement, mapOptions);

    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.pointArray,
      dissipating: true,
      maxIntensity: 10,
      radius: 20,
      opacity: 1.0,
      map: this.map
    });
   } 

  heatmapCO2(){

    this.data.subscribe((value)=>{
      let newlatlng = new google.maps.LatLng(value.lon,value.lat);
      let newweight = value.co;
      this.heatmapdata.push({location: newlatlng ,weight: newweight});
    });
    this.map = new google.maps.Map(this.globalelem.nativeElement, this.options);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.heatmapdata,
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });

  }
  heatmapNH4(){

    this.data.subscribe((value)=>{
      let newlatlng = new google.maps.LatLng(value.lon,value.lat);
      let newweight = value.co;
      this.heatmapdata.push({location: newlatlng ,weight: newweight});
    });
    this.map = new google.maps.Map(this.globalelem.nativeElement, this.options);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.heatmapdata,
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });
  }
  heatmapEth(){

    this.data.subscribe((value)=>{
      let newlatlng = new google.maps.LatLng(value.lon,value.lat);
      let newweight = value.co;
      this.heatmapdata.push({location: newlatlng ,weight: newweight});
    });
    this.map = new google.maps.Map(this.globalelem.nativeElement, this.options);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.heatmapdata,
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });
  }
  heatmapAce(){

    this.data.subscribe((value)=>{
      let newlatlng = new google.maps.LatLng(value.lon,value.lat);
      let newweight = value.co;
      this.heatmapdata.push({location: newlatlng ,weight: newweight});
    });
    this.map = new google.maps.Map(this.globalelem.nativeElement, this.options);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.heatmapdata,
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });

  }
  heatmapTol(){

    this.data.subscribe((value)=>{
      console.log(value);
      let newlatlng = new google.maps.LatLng(value.lon,value.lat);
      let newweight = value.co;
      this.heatmapdata.push({location: newlatlng ,weight: newweight});
    });
    this.map = new google.maps.Map(this.globalelem.nativeElement, this.options);
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: this.heatmapdata,
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });
  }

init(location,element){

    let latLng= new google.maps.LatLng(location.latitude, location.longitude);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false
    };

    var heatMapData = [
      {location: new google.maps.LatLng(25.307711, 55.485403), weight: 6},
      {location: new google.maps.LatLng(25.311251, 55.485886), weight: 5}      
    ]; //format of weighted heatmap data (currently showing 3 points on the road outside uni)

    console.log(heatMapData); 

    let pointArray = new google.maps.MVCArray(heatMapData);

    this.data.subscribe((value)=>{ // pulling data from firestore and inserting into an MVC array
      for(let x of value){
        pointArray.push({location: new google.maps.LatLng(Number(x.payload.doc.data().lon),Number(x.payload.doc.data().lat)), weight: x.payload.doc.data().co});
      }
      console.log(pointArray);
    });

    this.map = new google.maps.Map(element.nativeElement, mapOptions);

    var heatmap = new google.maps.visualization.HeatmapLayer({
      dissipating: true,
      maxIntensity: 10,
      radius: 15,
      opacity: 1.0,
      map: this.map
    });

    heatmap.setData(heatMapData);
    console.log("reached after mapload");  
    //  heatmap.setMap(this.map);  // This defines the heatmap we see, if dissipating is set false and radius is low, we see nothing. bump radius up and you'll start seeing the circles
  }
}

Я использую ионный 4.12.0, узел 11.12.0, угловой 7.2.2.Используемые плагины: Geolocation, angularfire, chart.js, googlemaps js api

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

• Ключевой функцией является init ()

https://github.com/FGButterLettuce/stackoverflowAPM