tab-control.html文件中
<div #mainPanel></div>
tab-control.ts文件中
//构造器中导入ComponentFactoryResolver
constructor(private _resolver: ComponentFactoryResolver) {}
const gpsPanelFactory = this._resolver.resolveComponentFactory(GpsPanelComponent);
const gpsref = this.mainPanel.createComponent(gpsPanelFactory);
ref.instance.subregion = subregion;//这句话非常重要,将subregion参数传入新创建的mainpanel的实例中去。所以mainpanel的subregion是这么来的。。
gpsref.instance.subregion = subregion;//将region数据传给gps-panel
gps组件获得了区域信息。
gps-panel.component.ts
(1)取出gps信息,生成gps列表
this._sensors = this.subregion.sensors;
console.log(this._sensors);
this._sensors.map(sensor => {
if(sensor.category == "gps"){
let gps = this._gpsCoordService.GPSGenerator(sensor);
console.log(gps);
this.GPSList.push(gps);
}
});
(2)根据valSubject的格式区分是历史数据还是实时数据
this._websocketService.valSubject
.map(msg=>{
if(msg.name == `${this.GPSList[0].key}@${this.GPSList[0].parentInfo.entityId}`){
this.GPSList[0].data = msg.data;
this.GPSList[0].marker = this._gpsCoordService.handleGPSRawdata(msg.data.data);
this.GPSList[0].marker.time = msg.data.time;
this.GPSList[0].marker.title = this.GPSList[0].name;
this.markers[0] = this.GPSList[0].marker;
this.marker = this.markers[0];
this.gps = this.GPSList[0];
//随marker改变地图中心点
this.opts.centerAndZoom.lat=this.markers[0].point.lat;
this.opts.centerAndZoom.lng=this.markers[0].point.lng;
console.log(this.opts.centerAndZoom);
console.log(this.GPSList[0]);
console.log(this.markers[0]);
}else if(msg.name == `!${this.GPSList[0].key}@${this.GPSList[0].parentInfo.entityId}`){
//历史数据
var promise;
this.historyData = msg.data;
let len = msg.data.length - 1;
for(var tmp in msg.data){
this.historyMarkers[tmp] = this._gpsCoordService.handleGPSRawdata(msg.data[tmp][1]);
this.points[tmp] = this.historyMarkers[tmp].point;
}
console.log(this.historyMarkers);
console.log(this.points);
}
}
).subscribe();