@cpvrt/cp-record-player NPM

CpvrtRecordPlayer

Install

使用npm install或yarn install进行依赖包安装.
使用tsc进行打包, 生成文件位于./dist/下, 更多见./tsconfig.json.

Usage

在项目中使用npm或者yarn进行安装

npm install @cpvrt/cp-record-player

或

yarn add @cpvrt/cp-record-player

从包中引用, 例如:

import {Component, Prop, Ref, Vue} from "vue-property-decorator";
import {getCarTypeInfos, getMapTypeInfos, getTestRecordData} from "../../api/data";
import {
  RecordPlayerArgs,
  RecordPlayer,
  Map,
  Car,
  DataStruct,
  Progress
} from "@cpvrt/cp-record-player";

@Component({})
export default class CpvrtRecordPlayer extends Vue {
  private playerArgs: RecordPlayerArgs;
  private player: RecordPlayer;
  @Ref('canvas')
  private readonly canvas: HTMLCanvasElement;
  @Ref('canvas_parent')
  private readonly canvasParent: HTMLDivElement;

  @Prop({default: 12781537, type: Number, required: true})
  recordId: number;
  @Prop({default: 1, type: Number, required: false})
  defaultMultiple: number;

  mounted(): void {
    this.canvas.width = this.canvasParent.offsetWidth;
    this.canvas.height = this.canvasParent.offsetHeight;

    getMapTypeInfos().then(map_res => {
      getCarTypeInfos().then(car_res => {
        getTestRecordData().then(res => {
          // 配置静态地图以及车辆变量
          Map.SetMapTypeInfos(map_res.data.fn_data);
          Car.SetCarTypeInfos(car_res.data.fn_data);

          // 创建入参
          this.playerArgs = new RecordPlayerArgs(
            this.canvas,  // canvasNode  或 vue中的this.$refs.canvas
            'subject2',   // 地图名称
            [
              // 车辆信息
              new DataStruct.CarInfo(  
                // 行车记录
                new DataStruct.RecordData(
                  res.data.position_curves,
                  res.data.rotation_curves
                ),
                // 车辆名称
                'default',
                // 是否显示轨迹
                true
              )
            ]);
          this.playerArgs.uiModules = [
            new Progress(40)  // 进度条模块
          ];
          // 设置默认缩放倍数
          this.playerArgs.zoom.multiple = this.defaultMultiple;

          // 实例化播放器
          this.player = new RecordPlayer(this.playerArgs);
        });
      });
    });
  }
}