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

2022-04-26  本文已影响0人  haibalai

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;

}

/**

 更多参考 https://xiaozhuanlan.com/topic/1937024856

上一篇下一篇

猜你喜欢

热点阅读