我目前正在一个大学项目上，该项目显示基于通过arduino收集的污染数据的热图。这样做的步骤如下
问题出在第三步。最初，我在等待另一个队友对数据进行加权时，我设置了初始地图api和功能上具有三个预定义点的热图图层的简单示例。
预期结果是FAB，它使我们可以选择不同的污染物并显示不同的热图图层。加权完成后，我根本无法显示任何格式化的数据。
我是一名棱角和离子领域的业余爱好者，只能通过教程达到这一目标，我为此感到非常沮丧。任何帮助将不胜感激
当前，我正在尝试创建一个具有位置和权重的新数组。最初的尝试失败了，并引发了许多异常，因为它是一个普通数组，而我在此处看到的另一篇文章将常规数组转换为MVCArray。一旦我使用了MVC阵列，我就摆脱了错误，但是热图拒绝加载插入到阵列中的任何新值。到目前为止，我在集合和MVC数组中有108个对象，但是我的初始预定义数组是在地图上显示的唯一点。
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
请忽略函数中的语法错误，因为它仍在进行中，我正在尝试准备基本功能，然后着手在每个函数中实现此功能。