@sl-utils/cesium 1.0.0 → 1.0.1

package/src/core/viewer/event.ts

@@ -0,0 +1,155 @@
+/**事件核心类 */
+export class CEvent<T extends string = string> {
+    constructor() {
+        this.cbs._core = Object.create(null);
+    }
+    /**注册回调事件 
+     * key: 事件名.空间名,/事件名.空间名,/事件名.空间名
+    */
+    public cb = new Proxy(Object.create(null), {
+        get: (target, key: T | `${T}.${string}`, receiver) => {
+            return (arg: any[]) => {
+                this.trigger(key as T, arg)
+            };
+        },
+        set: (target, key: T | `${T}.${string}`, value, receiver) => {
+            this.on(key as T, value)
+            return true;
+        }
+    })
+    /**事件回调函数集合 */
+    private cbs: TEventCallback = Object.create(null);
+    /**执行后注销事件 */
+    private onces: Function[] = [];
+    /**销毁方法 */
+    public kill() {
+        this.cbs = Object.create(null)
+        this.cbs._core = Object.create(null)
+    }
+    /**注册事件
+     * @param name 事件名(申明特殊的事件空间用'事件名.事件空间',多个事件'事件名[.事件空间],/'分割),
+     * @param callback 事件回调函数
+     * @return @type Array<事件名[.事件空间]> 
+     */
+    public on(name: T | `${T}.${string}`, callback: Function, once: boolean = false): string[] {
+        if (typeof name === 'undefined' || name === '') {
+            console.warn('事件注册异常: 事件名未设置');
+            return;
+        }
+        if (typeof callback === 'undefined') {
+            console.warn('事件注册异常: 回调事件未设置')
+            return;
+        }
+        const that = this, { cbs, onces } = that, names = that.resolveNames(name);
+        if (once) onces.push(callback);
+        //注册事件
+        names.forEach((_name) => {
+            const res = that.resolveName(_name), { space, name } = res;
+            // Object.create(null) instanceof Object == false
+            if (!cbs[space])
+                cbs[space] = Object.create(null)
+            if (!(cbs[space][name] instanceof Array))
+                cbs[space][name] = []
+            cbs[space][name].push(callback)
+        })
+        return names;
+    }
+    /**关闭注销事件
+     * @param name 事件名(申明特殊的事件空间用'事件名.事件空间',多个事件'事件名[.事件空间],/'分割),
+     */
+    public off(_names: T | `${T}.${string}` | `.${string}`) {
+        if (typeof _names === 'undefined' || _names === '') {
+            console.warn('事件注销异常: 事件名未设置');
+            return false
+        }
+        const that = this, names = that.resolveNames(_names);
+        //注销事件
+        names.forEach((_name) => {
+            const res = that.resolveName(_name), { space, name } = res, { cbs } = that;
+            if (space !== '_core' && name === '') {
+                Reflect.deleteProperty(cbs, space)
+            } else {
+                if (space === '_core') {
+                    for (const space in cbs) {
+                        if (cbs[space] instanceof Object) {
+                            Reflect.deleteProperty(cbs[space], name)
+                            if (Object.keys(cbs[space]).length === 0) Reflect.deleteProperty(cbs, space)
+                        }
+                    }
+                } else if (cbs[space] instanceof Object) {
+                    Reflect.deleteProperty(cbs[space], name)
+                    if (Object.keys(cbs[space]).length === 0) Reflect.deleteProperty(cbs, space)
+                }
+            }
+        })
+        return this
+    }
+    /**触发指定事件
+    * Trigger
+    */
+    public trigger(_name: T, _args: any[] = []): void {
+        if (typeof _name === 'undefined' || _name === '') {
+            console.warn('事件触发异常: 事件名未设置');
+            return
+        }
+        const that = this, { cbs } = that;
+        const args = !(_args instanceof Array) ? [_args] : _args;
+        const names = that.resolveNames(_name), { space, name } = that.resolveName(names[0])
+        //未指定事件名
+        if (name === '') {
+            console.warn('事件触发异常: 事件名未设置')
+            return
+        }
+        //未指定命名空间，触发所有该事件
+        if (space === '_core') {
+            for (const space in cbs) {
+                if (typeof cbs[space] == 'object' && cbs[space][name] instanceof Array) {
+                    const callbacks = cbs[space][name];
+                    callbacks.forEach((callback) => {
+                        callback.apply(this, args)
+                    })
+                }
+            }
+        } else if (typeof cbs[space] == 'object' && cbs[space][name] instanceof Array) {
+            //只触发指定命名空间的事件
+            cbs[space][name].forEach((callback) => {
+                callback.apply(this, args)
+            })
+        }
+    }
+    /**
+     * 解析事件名
+     */
+    private resolveNames(_names: string): string[] {
+        _names = _names.replace(/[^a-zA-Z0-9 ,/.]/g, '')
+        _names = _names.replace(/[,/]+/g, ' ')
+        return _names.split(' ')
+    }
+    /**
+     * 解析事件名和事件空间
+     */
+    private resolveName(name: string): TEventSpace {
+        const parts = name.split('.')
+        return {
+            original: name,
+            name: parts[0],
+            space: parts[1] || '_core'
+        }
+    }
+}
+/**事件空间 */
+interface TEventSpace {
+    /**原始事件名 */
+    original: string;
+    /**事件名 */
+    name: string;
+    /**事件存放的空间(未申明时存放于_core) */
+    space: string;
+}
+/**事件回调函数 */
+interface TEventCallback {
+    /**最基础的事件空间 */
+    _core: { [key: string]: Function[] }
+    /**特殊申明的事件空间 */
+    [key: string]: { [key: string]: Function[] };
+}

package/src/core/viewer/index.ts

@@ -0,0 +1,7 @@
+export * from './clock'
+export * from './data';
+export * from './entities';
+export * from './event';
+export * from './terrain';
+export * from './viewer';
+export * from './result'

package/src/core/viewer/result.ts

@@ -0,0 +1,7 @@
+import { Cartesian3 } from "cesium";
+
+export const RESULT_Cartesian3 = new Cartesian3()
+export const RESULT_Cartesian3_A = new Cartesian3()
+export const RESULT_Cartesian3_B = new Cartesian3()
+export const RESULT_Cartesian3_C = new Cartesian3()
+

package/src/core/viewer/terrain.ts

@@ -0,0 +1,30 @@
+/**地形数据 参考文献：https://mp.weixin.qq.com/s/ZC3GXEldnW2byw9Hlr6wfQ*/
+
+import { CesiumTerrainProvider, IonResource, Terrain, Viewer } from "cesium";
+
+/**加载标准地形 */
+export class CTerrain {
+    constructor(viewer: Viewer) {
+        this.viewer = viewer;
+    }
+    private viewer: Viewer;
+    /**加载资源库地形(只有地形数据没有卫星图片数据) 
+     * @param number 资源库编号 推荐使用1
+     * 1 ==> Cesium世界地形; 从几个数据源获取的高分辨率全球地形图集
+     * 3956 ==> ArcticDEM发布; ArcticDEM是NGA-NSF的一项公私合作项目，旨在利用光学立体图像、高性能计算和开源摄影测量软件自动生成高分辨率、高质量的北极数字地表模型(DSM)。
+     * 3957 ==> PAMap Terrain;美国宾夕法尼亚州的一处地形数据。由宾夕法尼亚州空间数据访问(PASDA)策划的宾夕法尼亚州高分辨率地形
+     * 2426648 ==> Cesium World Bathymetry;建立在GEBCO全球数据集上的全球测深和地形地形图集，并结合了高达1米分辨率的更高分辨率数据。
+     * 
+     * @param opt 配置项
+    */
+    public async addIonTerrain(number: 1 | 3956 | 3957 | 2426648 = 1, opt: CTerrainAssetOpt = {}) {
+        let { requestVertexNormals = true, requestWaterMask = true, requestMetadata, ellipsoid, credit } = opt;
+        this.viewer.terrainProvider = await CesiumTerrainProvider.fromIonAssetId(number, {
+            requestWaterMask,
+            requestVertexNormals,
+            requestMetadata,
+            ellipsoid,
+            credit
+        })
+    }
+}

package/src/core/viewer/viewer.ts

@@ -0,0 +1,255 @@
+import { Ion, Viewer, Camera, Rectangle, Globe, ScreenSpaceEventHandler, createGuid, Cartesian3, ScreenSpaceEventType, defined, Entity, Scene, Clock, DataSourceCollection, EntityCollection, PrimitiveCollection, Cartesian2, CesiumWidget, Cartographic, sampleTerrainMostDetailed, Billboard } from "cesium";
+import { CScene, CCamera, CPrimitives, CGlobe, CLayers } from "../scene";
+import { CTerrain } from "./terrain";
+import { CEntities } from "./entities";
+import { CDataSource } from "./data";
+import { CARTESIAN3_CONST_DEFAULT, CESIUM_CONST_BASE_URL, CESIUM_CONST_DEFAULT_VIEW_RECTANGLE, CESIUM_CONST_TOKEN, CESIUM_CONST_OPT_VIEWER_DEFAULT, CESIUM_CONST_DEFAULT_VIEW_FACTOR } from "../../const";
+import { uc_getCartesian3, uc_getLnglat } from "../../utils";
+import { CEvent } from "./event";
+import { CElement } from "./element";
+import { Gui } from "../libs/gui";
+import { CClock } from "./clock";
+const RESULT_Cartesian3 = new Cartesian3();
+const RESULT_LNGLATHEIGHT: LnglatHeight = [, ,];
+/**对Viewer(包含三维视图和二维地图的全功能小部件)进行扩展 */
+export class SLCViewer<T extends string = null> extends CEvent<UCEvent | T> {
+    private static ifInit: boolean = false;
+    /**cesium项目初始化 */
+    private static initCesium() {
+        if (this.ifInit) return;
+        this.ifInit = true;
+        /**申明CESIUM静态资源根路径 */
+        (window as any).CESIUM_BASE_URL = CESIUM_CONST_BASE_URL;
+        /**整个token */
+        Ion.defaultAccessToken = CESIUM_CONST_TOKEN;
+        /**默认视角地址 */
+        Camera.DEFAULT_VIEW_RECTANGLE = CESIUM_CONST_DEFAULT_VIEW_RECTANGLE;
+        Camera.DEFAULT_VIEW_FACTOR = CESIUM_CONST_DEFAULT_VIEW_FACTOR;
+    }
+    constructor(html: HTMLElement | string, opt?: SLCViewerOpt) {
+        super()
+        SLCViewer.initCesium();
+        opt = Object.assign({}, CESIUM_CONST_OPT_VIEWER_DEFAULT, opt)
+        // const widget = new CesiumWidget(dom)
+        // const { imageryLayers, entities, scene, dataSources, container, scene: { canvas, camera, primitives }
+        // } = widget;
+        const viewer = this.viewer = new Viewer(html, opt);
+        const { imageryLayers, entities, scene, dataSources, container, scene: { canvas, camera, primitives }
+        } = viewer;
+        this.celement = new CElement(container as HTMLCanvasElement, this)
+        this.cclock = new CClock(this);
+        this.cdata = new CDataSource(dataSources);
+        this.clayers = new CLayers(imageryLayers);
+        this.centities = new CEntities(entities);
+        this.cterrain = new CTerrain(viewer);
+        this.cprimitives = new CPrimitives(primitives);
+        this.cscene = new CScene(this);
+        this.ccamera = this.cscene.camera;
+        /**隐藏Cesium图标 */
+        (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = 'none';
+        viewer.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+        this.removeEventListener();
+        this.addEventListener();
+    }
+    public gui = Gui;
+    public readonly id: string = createGuid();
+    /**鼠标位置 */
+    private _mouseC3: Cartesian3 = new Cartesian3();
+    private _mouseLnglat: LnglatHeight = [0, 0, 0];
+    /**鼠标位置物体id */
+    private _picked: string | Entity | undefined;
+    /**@param id 1、如果是图源primitive，会得到图元的id;
+     * 2、如果是实体会直接得到实体 */
+    public get picked() {
+        return this._picked
+    }
+    /**三维视图和二维地图的全功能小部件instance */
+    public readonly viewer: Viewer;
+    /**事件 */
+    public readonly cevent: CEvent<UCEvent | T> = this;
+    /**容器节点 更新鼠标位置以及视口的大小 */
+    public readonly celement: CElement;
+    /**时钟 */
+    public readonly cclock: CClock
+    /**图层 */
+    public readonly clayers: CLayers;
+    /**地形数据（具有海拔高度的效果） */
+    public readonly cterrain: CTerrain;
+    /**数据源 */
+    public readonly cdata: CDataSource;
+    /**实体 */
+    public readonly centities: CEntities;
+    /**场景 表示场景中的实体或物体，如建筑物、车辆、航线、传感器等*/
+    public readonly cscene: CScene;
+    /**场景相机 */
+    public readonly ccamera: CCamera;
+    /**基元 轻量级图形对象,表示几何体和材质的组合.是Cesium底层渲染单元,用于高效地绘制大规模的图形*/
+    public readonly cprimitives: CPrimitives;
+    /**场景 */
+    public get scene(): Scene {
+        return this.cscene.scene
+    }
+    /**地球 */
+    public get cglobe(): CGlobe {
+        return this.cscene.cglobe;
+    }
+    public get globe(): Globe {
+        return this.cglobe.globe;
+    }
+    public get clock(): Clock {
+        return this.cclock.clock;
+    }
+    public get camera(): Camera {
+        return this.ccamera.camera
+    }
+    public get dataSources(): DataSourceCollection {
+        return this.cdata.dataSources
+    }
+    public get entities(): EntityCollection {
+        return this.centities.entities
+    }
+    public get primitives(): PrimitiveCollection {
+        return this.cprimitives.instance
+    }
+    /**基础属性 */
+    /**当前鼠标c3位置 */
+    public get position(): Cartesian3 {
+        return this._mouseC3
+    }
+    public get lnglat(): LnglatHeight {
+        return this._mouseLnglat
+    }
+    /**触发事件的对象组 */
+    public readonly targets: any[] = [];
+    /**拾取到的物体信息 */
+    private pickeds: { id: string, primitive: any, lnglat: LnglatHeight }[] = []
+    /**注册了事件的对象 */
+    private eventsObjects: any[] = [];
+    /**注册事件 */
+    public addEventObject(object: any) {
+        if (object && !this.eventsObjects.includes(object)) {
+            this.eventsObjects.push(object);
+        }
+    }
+    /**移除事件 */
+    public removeEventObject(object: any) {
+        const index = this.eventsObjects.indexOf(object);
+        if (index > -1) {
+            this.eventsObjects.splice(index, 1);
+        }
+    }
+
+    /**注册几个基础事件，用于计算常用的功能 */
+    /**移除一些默认的事件 */
+    private removeEventListener() {
+        /**移除双击选中定位事件 */
+        this.viewer.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+        /**移除单击选择事件*/
+        this.viewer.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
+    }
+    /**添加事件 */
+    private addEventListener() {
+        const { scene, clock, ccamera, celement: { position, keyStates }, cevent } = this;
+        /**注册每帧事件 */
+        clock.onTick.addEventListener(() => {
+            this.trigger('TICK');
+            this.getMouseTargets();
+            // /**如果高度大于500米，则关闭雾化效果 */
+            // const postProcessStages = scene.postProcessStages;
+            // if (scene.camera.positionCartographic.height > 500) {
+            //     Fog.enabled = false;
+            // } else if (!postProcessStages.contains(Fog)) {
+            //     scene.postProcessStages.add(Fog)
+            // } else {
+            //     Fog.enabled = true;
+            // }
+        })
+        /**鼠标左键点击事件 */
+        this.on('LEFT_CLICK', (ev) => {
+            this.getTerrainHeight()
+            this.parsePicked();
+            this.trigger('PICKED', [this.pickeds])
+        })
+        /**注册按键事件 */
+        this.on('KEY_DOWN', () => {
+            if (keyStates.Escape) ccamera.unlock()
+            if (keyStates.Tab) ccamera.onToggleCtr()
+        })
+        /**鼠标移动事件 */
+        this.on('MOUSE_MOVE', () => {
+            uc_getCartesian3(position, scene, this._mouseC3);
+            uc_getLnglat(position, scene, this._mouseLnglat);
+        })
+        /**场景pick初始完成方法 */
+        const pickInit = () => {
+            const defaultView = scene['defaultView'], { frustumCommandsList = [] } = defaultView || {};
+            if (frustumCommandsList.length === 0)
+                requestAnimationFrame(pickInit)
+            else {
+                requestAnimationFrame(() => this.trigger('INIT_PICK'))
+            }
+        }
+        pickInit()
+    }
+    /**返回要响应事件(点击、移入、移出)的对象 */
+    private getMouseTargets() {
+        /**获取指针拾取到的对象 */
+        const { eventsObjects, targets, scene, camera, viewer: { canvas }, celement: { position } } = this;
+        /**获取指针拾取到的对象 */
+        const picks = scene.drillPick(position);
+        /**清空触发事件的对象组 */
+        targets.length = 0;
+        if (defined(picks) && picks.length > 0) {
+            uc_getCartesian3(position, scene, RESULT_Cartesian3);
+            const distance = Cartesian3.distance(camera.position, RESULT_Cartesian3);
+            for (let i = 0; i < picks.length; i++) {
+                const picked = picks[i], primitive = picked.primitive, /**3DTiles会返回此类型*/type: string = picked?.detail?.model?.type || '';
+                if (type.toUpperCase() === 'B3DM') {
+                    /**3DTiles不触发事件 */
+                    // targets.push(picked)
+                } else if (eventsObjects.includes(primitive)) {
+                    if (primitive instanceof Billboard) {
+                        targets.push(picked)
+                    } else if (distance < 10000) {
+                        targets.push(picked)
+                    }
+                }
+            }
+        }
+        canvas.style.cursor = targets.length > 0 ? 'pointer' : 'default';
+    }
+    /**对拾取到的目标进行解析*/
+    private parsePicked() {
+        const { targets, pickeds } = this;
+        pickeds.length = 0;
+        if (targets.length > 0) {
+            for (let i = 0; i < targets.length; i++) {
+                const target = targets[i];
+                const { primitive, id } = target;
+                pickeds.push({ id, lnglat: RESULT_LNGLATHEIGHT, primitive })
+            }
+        }
+    }
+    /**获取地形高度和经纬度 */
+    private async getTerrainHeight(): Promise<LnglatHeight> {
+        const { celement: { position }, scene, viewer } = this;
+        const lnglat = uc_getLnglat(position, scene, RESULT_LNGLATHEIGHT);
+        if (!lnglat) return;
+        /**非太空区域获取经纬度 */
+        const positions = [Cartographic.fromDegrees(lnglat[0], lnglat[1])];
+        if (!viewer.terrainProvider) return lnglat;
+        try {
+            const sampledPositions = await sampleTerrainMostDetailed(
+                viewer.terrainProvider,
+                positions
+            );
+            const terrainHeight = sampledPositions[0].height; // 地形表面的高程
+        } catch (e) {
+            console.log(e)
+        }
+        lnglat[2] = 0;
+        const distance = this.ccamera.getDistance(lnglat)
+        console.log('点击位置经纬度为：', lnglat, '，相机到点击位置距离为：', distance)
+        return lnglat
+    }
+}

package/src/entities/ellipse.ts

@@ -0,0 +1,68 @@
+import { CallbackProperty, Cartesian3, ClassificationType, Color, ConstantPositionProperty, ConstantProperty, DeveloperError, DistanceDisplayCondition, EllipseGraphics, Entity, HeightReference, MaterialProperty, PositionProperty, Property, ShadowMode } from "cesium";
+import { uc_getCartesian3, uc_tsIfCartesian3, uc_tsIfNumber, uc_tsIfProperty } from "../utils";
+import { COLOR_CONST_FILL, COLOR_CONST_OUTLINE, LNGLAT_CONST_SHENLAN } from "../const";
+const DEFAULT_ELLIPSE_OPT: OptEntityEllipse = {
+    ifChange: false,
+    show: true,
+    material: COLOR_CONST_FILL,
+    height: 0,
+    outline: true,
+    outlineColor: COLOR_CONST_OUTLINE,
+    outlineWidth: 1,
+    fill: true,
+}
+/**实体椭圆 */
+export class EntityEllipse extends Entity {
+    constructor(opt: OptEntityEllipse) {
+        let { position, material, lnglat, ifChange,
+            show, semiMajorAxis, semiMinorAxis, height, heightReference, extrudedHeight, extrudedHeightReference, rotation, stRotation, granularity, fill, outline, outlineColor, outlineWidth, numberOfVerticalLines, shadows, distanceDisplayCondition, classificationType, zIndex,
+        } = Object.assign({}, DEFAULT_ELLIPSE_OPT, opt);
+        let c3;
+        if (ifChange) {
+            c3 = new CallbackProperty(() => { return this.cdkPosition }, false);
+            semiMajorAxis = new CallbackProperty(() => { return this.cdkSemiMajorAxis }, false);
+            semiMinorAxis = new CallbackProperty(() => { return this.cdkSemiMinorAxis }, false);
+        } else {
+            c3 = lnglat ? uc_getCartesian3(lnglat) : uc_tsIfProperty(position) ? position : uc_getCartesian3(position)
+        }
+        super({
+            position: c3,
+            ellipse: {
+                show, semiMajorAxis, semiMinorAxis, height, heightReference, extrudedHeight, extrudedHeightReference, rotation, stRotation, granularity, fill, material, outline, outlineColor, outlineWidth, numberOfVerticalLines, shadows, distanceDisplayCondition, classificationType, zIndex,
+            }
+        });
+        if (uc_tsIfNumber(semiMajorAxis) && uc_tsIfNumber(semiMinorAxis)) {
+            this.cdkSemiMajorAxis = semiMajorAxis;
+            this.cdkSemiMinorAxis = semiMinorAxis;
+        }
+        this.cdkPosition = uc_tsIfCartesian3(c3) ? c3 : uc_getCartesian3(LNGLAT_CONST_SHENLAN);
+    }
+    private cdkIfChange: boolean = true;
+    /**中心位置 */
+    private cdkPosition: Cartesian3 = uc_getCartesian3(LNGLAT_CONST_SHENLAN);
+    /**长半轴 */
+    private cdkSemiMajorAxis: number = 0.1;
+    /**短半轴 */
+    private cdkSemiMinorAxis: number = 0.1;
+    /**设置中心位置*/
+    public cdkSetPosition(position: Cartesian3 | LnglatHeight) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(``);
+        };
+        this.cdkPosition = uc_getCartesian3(position);
+    }
+    /**设置长半轴*/
+    public cdkSetMajorAxis(axis: number) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(``);
+        };
+        this.cdkSemiMajorAxis = axis;
+    }
+    /**设置短半轴*/
+    public cdkSetMinorAxis(axis: number) {
+        if (!this.cdkIfChange) {
+            throw new DeveloperError(``);
+        };
+        this.cdkSemiMinorAxis = axis;
+    }
+}

package/src/entities/geojson.ts

@@ -0,0 +1,19 @@
+import { Cartesian3, Entity, GeoJsonDataSource, Rectangle, Viewer } from "cesium";
+import { uc_getDistanceByLatOffset, uc_getDiffDegreesByDistance } from "../utils";
+import { PropertyMaterialRoad } from "../property";
+/**导入geojson中的实体 */
+export class EntityGeojson {
+    constructor(opt: OptEntityGeojson) {
+        const { url, viewer } = opt || {};
+        this.load(url, viewer);
+    }
+    private async load(url: string, viewer: Viewer) {
+        let geojson = await GeoJsonDataSource.load(url);
+        viewer.dataSources.add(geojson);
+        let entities = geojson.entities.values;
+        const material = new PropertyMaterialRoad();
+        entities.map((entity) => {
+            entity.polyline.material = material;
+        })
+    }
+}

package/src/entities/image.ts

@@ -0,0 +1,28 @@
+import { CallbackProperty, Cartesian2, Cartesian3, Color, ConstantProperty, Entity, HeadingPitchRoll, ImageMaterialProperty, MaterialProperty, Plane, PlaneGraphics, PositionProperty, Property, Transforms } from "cesium";
+import { CCamera } from "../core";
+import { CMath, uc_getCartesian3, uc_getQuaternion } from "../utils";
+import { MaterialImage2D } from "../primitives/material";
+
+/**实体图片 */
+export class EntityImage extends Entity {
+    constructor(opt: OptEntityImage) {
+        const { lnglat, sizeX, sizeY = sizeX, url, id, rotate } = opt
+        super({
+            id,
+            name: 'rectangle',
+            position: uc_getCartesian3(lnglat),
+            plane: {
+                plane: new Plane(Cartesian3.UNIT_Z, 0.0),
+                dimensions: new Cartesian2(sizeX, sizeY),
+                outline: false,
+                material: new ImageMaterialProperty({
+                    image: url,
+                    transparent: true
+                })
+            }
+        })
+        /**旋转角度 */
+        this.orientation = new ConstantProperty(uc_getQuaternion(lnglat, rotate));
+    }
+    override position: PositionProperty;
+}

package/src/entities/index.ts

@@ -0,0 +1,42 @@
+/**
+* 所有依靠实体实现的效果都存放在此文件夹 
+* 部分已经搭建好的实体类
+* @property [id] -该对象的唯一标识符。如果不提供，则生成GUID。
+* @property [name] -一个人类可读的名称显示给用户。它不必是唯一的。
+* @property [availability] -与该对象关联的可用性(如果有的话)。
+* @property [show] -一个布尔值，指示是否显示实体及其子实体。
+* @property [description] -一个字符串属性，指定该实体的HTML描述。
+* @property [position] -指定实体位置的属性。
+* @property [orientation = Transforms.eastNorthUpToFixedFrame(position)] -一个属性指定实体的方向相对于地球-固定-以地球为中心(ECEF)。如果未定义，则在实体位置使用东北向上。
+* @property [viewFrom] -查看该对象的建议初始偏移量。
+* @property [parent] -与该实体关联的父实体。
+* @property [billboard]-与该实体相关联的公告牌。
+* @property [box] -与该实体关联的框。
+* @property [corridor] -与该实体关联的走廊。
+* @property [cylinder]-与该实体关联的圆柱体。
+* @property [ellipse] -与该实体关联的椭圆。
+* @property [ellipsoid] -一个与实体关联的椭球体。
+* @property [label] -一个选项。与此实体关联的标签。
+* @property [model] -与该实体关联的模型。
+* @property [tileset] -与此实体关联的3D tile tile集。
+* @property [path] -与该实体关联的路径。
+* @property [plane] -与该实体关联的平面。
+* @property [point] -与该实体关联的点。
+* @property [polygon] -与该实体关联的多边形。
+* @property [polyline] -与该实体关联的折线。
+* @property [properties] -与该实体关联的任意属性。
+* @property [polylineVolume] -与此实体关联的polylineVolume。
+* @property [rectangle] -与该实体关联的矩形。
+* @property [wall] -与该实体关联的墙。
+ */
+export * from "./ellipse";
+export * from "./geojson";
+export * from "./image";
+export * from "./label";
+export * from "./point";
+export * from "./polygon";
+export * from "./polyline";
+export * from "./rectangle";
+export * from './radar';
+export * from './radar';
+export * from './trailing';

package/src/entities/label.ts

@@ -0,0 +1,37 @@
+import { CallbackProperty, Cartesian2, Cartesian3, Color, ConstantPositionProperty, ConstantProperty, DistanceDisplayCondition, Entity, HeightReference, HorizontalOrigin, LabelCollection, LabelGraphics, LabelStyle, NearFarScalar, PositionProperty, Property, VerticalOrigin } from "cesium";
+import { COLOR_CONST_FONT, COLOR_CONST_OUTLINE } from "../const";
+
+const DEFAULT_LABLE_OPT: OptEntityLabel = {
+    font: "12px sans-serif",
+    fillColor: COLOR_CONST_FONT,
+    outlineColor: COLOR_CONST_OUTLINE,
+    outlineWidth: 1,
+    pixelOffset: new Cartesian2(0, -10)
+}
+/**实体标签 */
+export class EntityLabel extends Entity {
+    constructor(opt?: OptEntityLabel) {
+        const { position, show, text, font, style, scale, showBackground, backgroundColor, backgroundPadding, pixelOffset, eyeOffset, horizontalOrigin, verticalOrigin, heightReference, fillColor, outlineColor, outlineWidth, translucencyByDistance, pixelOffsetScaleByDistance, scaleByDistance, distanceDisplayCondition, disableDepthTestDistance } = Object.assign({}, DEFAULT_LABLE_OPT, opt);
+        super({
+            position: position,
+            label: {
+                show, text, font, style, scale, showBackground, backgroundColor, backgroundPadding, pixelOffset, eyeOffset, horizontalOrigin, verticalOrigin, heightReference, fillColor, outlineColor, outlineWidth, translucencyByDistance, pixelOffsetScaleByDistance, scaleByDistance, distanceDisplayCondition, disableDepthTestDistance
+            }
+        })
+        this.label.text = this.cdkText;
+    }
+    /**标签文本 */
+    private cdkText = new ConstantProperty('');
+    /**改变标签提示 */
+    public cdkSetLabelText(value: string) {
+        this.cdkText.setValue(value)
+    }
+    /**改变标签位置 */
+    public cdkSetLabelPosition(c3: Cartesian3) {
+        if (this.position instanceof ConstantPositionProperty) {
+            this.position.setValue(c3)
+        } else {
+            this.position = new ConstantPositionProperty(c3)
+        }
+    }
+}