十月最后一天 gps组件初步整理

本文链接：https://blog.youkuaiyun.com/jdk1129/article/details/83580995

本文详细介绍了如何在Angular应用中使用TypeScript处理GPS传感器数据，生成GPS列表，并根据WebSocket消息更新地图上的标记位置，包括实时数据和历史数据的处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();