cesium 图层构建的那些事 (一)

今天我们来聊聊图层构建的那些事情,全程使用typescript来实现

这是设计

首先我先定义个图层元组Tuple,它是一个抽象类,它具备一些基础通用方法约束,比如显示隐藏,飞入,图层加载,回调等等

```javascript

/**

  • 在地图上展示的最小分类元祖
    */
    export abstract class Tuple {
    public abstract type: String;//类型
    protected _show: boolean = true;
    protected map: any = null;
    public cesiumObj: any = null;//cesium的对象
    protected isAdd2LoadCesium = false;//是否在addToMap中,同时加载cesium
    protected loadCesiumObjEndCallBack: any = null;
    private _successCallBack: Function | any = null;//成功回调函数,请调用_success方法
    private _errorCallBack: Function | any = null;//失败回调函数,请调用_error方法

     

    constructor() {
    super();
    this.callSuccess = this.callSuccess.bind(this);
    this.callError = this.callError.bind(this);
    }

     

    //是否显示
    set show(value: boolean) {
    this._show = value;
    this.cesiumObj && (this.cesiumObj.show = value);
    }

     

    get show(): boolean {
    return this._show;
    }

     

    protected abstract _addToMap(map: any): void;//添加到指定viewer中
    protected abstract _removeByMap(destroy?: boolean): void;//从viewer中移除
    //飞到元祖上
    protected abstract _flyTo(duration?: number, pitch?: number, heading?: number, range?: number, maximumHeight?: number): void;

     

    protected callLoadEndCesiumObj() {
    this.show = this._show;//证明cesiumObj已经加载完成
    this.loadCesiumObjEndCallBack && this.loadCesiumObjEndCallBack(this.map);
    this.loadCesiumObjEndCallBack = null;
    }
    //加载成功回调
    protected callSuccess() {
    this._addToMap(this.map);
    this._successCallBack && this._successCallBack(this.cesiumObj);
    this._errorCallBack = null;
    this._successCallBack = null;
    }

     

    //加载失败回调
    protected callError(data: any) {
    this._errorCallBack && this._errorCallBack(data);
    this._errorCallBack = null;
    this._successCallBack = null;
    this.loadCesiumObjEndCallBack = null;
    }

     

    /**

posted @ 2022-01-20 17:34  haibalai  阅读(126)  评论(0编辑  收藏  举报