@sl-utils/cesium 1.0.0 → 1.0.1

package/src/core/scene/layers.ts

@@ -0,0 +1,240 @@
+/**参考文献：https://mp.weixin.qq.com/s/QZ1ZJa92s8cKIb6czo2QhA */
+import { BingMapsImageryProvider, BingMapsStyle, ImageryLayer, ImageryLayerCollection, ImageryProvider, IonImageryProvider, MapboxImageryProvider, UrlTemplateImageryProvider, WebMapServiceImageryProvider, WebMapTileServiceImageryProvider } from "cesium";
+/**图层 */
+export class CLayers {
+    constructor(layer: ImageryLayerCollection) {
+        this.layers = layer;
+        this.addImageryProvider = layer.addImageryProvider.bind(layer);
+    }
+    public readonly layers: ImageryLayerCollection;
+    /**添加图层 */
+    public readonly addImageryProvider: (imageryProvider: ImageryProvider, index?: number) => ImageryLayer
+    /**添加过的图层 */
+    private added: { [K: string]: ImageryLayer } = {};
+    /**从Ion资源库加载Imagery资源
+     * @param num 资源编号
+     * 2 ==> 必应地图航拍
+     * 3 ==> 必应地图航拍带标注
+     * 4 ==> 必应地图路网
+     * 2411391 ==> 必应地图路网标注
+     */
+    public addIonImagery(num: number = 2) {
+        this.layers.add(ImageryLayer.fromProviderAsync(IonImageryProvider.fromAssetId(num), {}));
+    }
+    /**添加图层 */
+    public add(layer: ImageryLayer, index?: number) {
+        return this.layers.add(layer, index);;
+    }
+    /**使用指定图层 */
+    public use(layer: ImageryLayer) {
+        this.layers.removeAll();
+        this.layers.add(layer);
+    }
+    /**切换地图图层 */
+    public switchLayer(map: CONST_CESIUM_MAP | `${typeof CONST_CESIUM_MAP[keyof typeof CONST_CESIUM_MAP]}`) {
+        this.layers.removeAll();
+        // this.instance.add(new ImageryLayer(Bing_Satellite))
+        this.addLayer(map);
+    }
+    /**添加指定地图图层 */
+    public addLayer(map: CONST_CESIUM_MAP | `${typeof CONST_CESIUM_MAP[keyof typeof CONST_CESIUM_MAP]}`) {
+        /**获取地图名称、类型和模块(默认地图模块Map还有注释模块Annotion等) */
+        const parts = map.split("_"), name = parts[0], type = parts[1], mold = parts[2] || "Map";
+        /**根据名称从info中获取详细(子域subdomains、token值、以及url) */
+        const info = CONST_CESIUM_MAPINFO[name], subdomains = info.Subdomains, token = info.key;
+        /**获得地图地址以及增加token */
+        const address = info[type][mold], url = address.replace("{key}", token);
+        const layer = this.added[map] = this.added[map] || new ImageryLayer(new UrlTemplateImageryProvider({
+            url: url,
+            subdomains: subdomains,
+            minimumLevel: 0,
+            maximumLevel: 18,
+        }));
+        this.layers.add(layer);
+        return layer;
+    }
+    /**加载必应地图 */
+    public async loadBingMap() {
+        var bingStyle = [
+            BingMapsStyle.AERIAL_WITH_LABELS,
+            BingMapsStyle.COLLINS_BART,
+            BingMapsStyle.CANVAS_GRAY,
+            BingMapsStyle.CANVAS_LIGHT,
+            BingMapsStyle.CANVAS_DARK,
+            BingMapsStyle.ORDNANCE_SURVEY,
+            BingMapsStyle.ROAD,
+            BingMapsStyle.AERIAL,
+        ];
+        var bingMapProvider = await BingMapsImageryProvider.fromUrl("https://dev.virtualearth.net",
+            {
+                key: "AmXdbd8UeUJtaRSn7yVwyXgQlBBUqliLbHpgn2c76DfuHwAXfRrgS5qwfHU6Rhm8",
+                mapStyle: bingStyle[2],
+            });
+        this.layers.addImageryProvider(bingMapProvider);
+    }
+    /**添加MapboxImageryProvider影像服务 */
+    public addMapboxImagery(index: number) {
+        //MapboxImageryProvider影像服务
+        const MapboxIds = [
+            "mapbox.streets",
+            "mapbox.light",
+            "mapbox.dark",
+            "mapbox.satellite",
+            "mapbox.streets-satellite",
+            "mapbox.wheatpaste",
+            "mapbox.streets-basic",
+            "mapbox.comic",
+            "mapbox.outdoors",
+            "mapbox.run-bike-hike",
+            "mapbox.pencil",
+            "mapbox.pirates",
+            "mapbox.emerald",
+            "mapbox.high-contrast"
+        ];
+        const map = new MapboxImageryProvider({
+            mapId: MapboxIds[index],
+            accessToken: 'pk.eyJ1IjoibHM4NZAWNjEWMTEiLCJhIjoiY2tqYXZ1Z2]rMDI5bT]zcD]mdDNteGhsNy19.0wTn4B1ce904U5GnPso5iA'
+        })
+        this.layers.add(new ImageryLayer(map))
+    }
+    /**添加符合WMS规范的影像服务 */
+    public addWMSLayer() {
+        var provider = new WebMapServiceImageryProvider({
+            url:"https://nationalmap.gov.au/proxy/http://geoserver.nationalmap.nicta.com.au/geotopo_250k/ows",
+            layers: "Hydrography:bores",
+            parameters: {
+                transparent: true,
+                format: "image/png",
+            },
+        });
+        return this.addImageryProvider(provider);
+    }
+    /**添加符合WMTS1.0.0规范的影像服务 */
+    public addWMTSLayer() {
+        var shadedRelief1 = new WebMapTileServiceImageryProvider({
+            url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS",
+            layer: "World_Imagery",
+            style: "default",
+            format: "image/jpeg",
+            tileMatrixSetID: "default028mm",
+            maximumLevel: 23,
+        });
+        /**wmts格式卫星底图*/
+        const Tianditu_Satellite = new ImageryLayer(new WebMapTileServiceImageryProvider({
+            url: "https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&tk=5c3d18966556d9ef7f34d4f9b2c6a53e",
+            layer: "img",
+            style: 'default',
+            format: "tiles",
+            tileMatrixSetID: "Tianditu",
+            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        }), {});
+        this.add(Tianditu_Satellite)
+        // return this.addImageryProvider(Tianditu_Satellite);
+    }
+
+}
+
+
+/**地图服务相关 */
+export enum CONST_CESIUM_MAP {
+    /**天地图 */
+    Tianditu_Normal = "Tianditu_Normal",
+    Tianditu_Normal_Annotion = "Tianditu_Normal_Annotion",
+    Tianditu_Satellite = "Tianditu_Satellite",
+    Tianditu_Satellite_Annotion = "Tianditu_Satellite_Annotion",
+    Tianditu_Terrain = "Tianditu_Terrain",
+    Tianditu_Terrain_Annotion = "Tianditu_Terrain_Annotion",
+    /**高德地图 */
+    Gaode_Normal = "Gaode_Normal",
+    Gaode_Satellite = "Gaode_Satellite",
+    Gaode_Satellite_Annotion = "Gaode_Satellite_Annotion",
+    /**谷歌地图 */
+    Google_Normal = "Google_Normal",
+    Google_Satellite = "Google_Satellite",
+    Google_Satellite_Annotion = "Google_Satellite_Annotion",
+    /**Geoq地图 */
+    Geoq_Normal = "Geoq_Normal",
+    Geoq_Normal_PurplishBlue = "Geoq_Normal_PurplishBlue",
+    Geoq_Normal_Gray = "Geoq_Normal_Gray",
+    Geoq_Normal_Warm = "Geoq_Normal_Warm",
+    Geoq_Theme_Hydro = "Geoq_Theme_Hydro",
+    /**OSM地图 */
+    OSM_Normal = "OSM_Normal",
+    /**百度地图 */
+}
+/**地图相关的服务信息
+ * @param Normal 矢量地图 Satellite 卫星地图  Terrain 地形图
+ * @param Map 地图 Annotion 注记  Gray
+ */
+const CONST_CESIUM_MAPINFO: any = {
+    Tianditu: {
+        Normal: {
+            Map: "//t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Satellite: {
+            Map: "//t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Terrain: {
+            Map: "//t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
+            Annotion: "//t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
+        },
+        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+        key: "a9e2dd65c94fab979c9d897ff7098a4c"
+    },
+
+    Gaode: {
+        Normal: {
+            Map: '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
+        },
+        Satellite: {
+            Map: '//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+            Annotion: '//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
+        },
+        Subdomains: ["1", "2", "3", "4"]
+    },
+
+    Google: {
+        Normal: {
+            Map: "//www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Satellite: {
+            Map: "//www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
+            Annotion: "//www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
+        },
+        Subdomains: []
+    },
+
+    Geoq: {
+        Normal: {
+            Map: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
+            PurplishBlue: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+            Gray: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
+            Warm: "//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
+        },
+        Theme: {
+            Hydro: "//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
+        },
+        Subdomains: []
+    },
+
+    OSM: {
+        Normal: {
+            Map: "//{s}.tile.osm.org/{z}/{x}/{y}.png",
+        },
+        Subdomains: ['a', 'b', 'c']
+    },
+
+    Baidu: {
+        Normal: {
+            Map: '//online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1'
+        },
+        Satellite: {
+            Map: '//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
+            Annotion: '//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020'
+        },
+        Subdomains: '0123456789',
+        tms: true
+    }
+}

package/src/core/scene/primitives.ts

@@ -0,0 +1,55 @@
+import { BillboardCollection, Cartesian3, Cesium3DTileStyle, Cesium3DTileset, Color, EllipseGeometry, GeometryInstance, HeadingPitchRoll, HorizontalOrigin, Model, Primitive, PrimitiveCollection, Transforms, createOsmBuildingsAsync } from "cesium";
+import { PrimitiveImage2D } from "../../primitives";
+
+/**Primitive(基元):轻量级图形对象，表示几何体和材质的组合。是Cesium底层渲染单元，用于高效地绘制大规模的图形。使用Primitive，你可以直接控制几何体的位置、旋转、缩放等属性。Primitive通常用于绘制地形、模型、点云等图形，以及自定义的几何形状。
+ * Primitive用于表示简单的图形对象，侧重于几何体和渲染
+ * 创建方式更接近渲染引擎底层，需要初始化很多对象，比如外观(Appearance)、几何形状(Geometry)等，使用相对繁琐
+ */
+export class CPrimitives {
+    constructor(primitive: PrimitiveCollection) {
+        this.instance = primitive;
+        this.ctx = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+    }
+    public readonly instance: PrimitiveCollection;
+    /**用于裁剪图片的 */
+    private ctx: CanvasRenderingContext2D;
+    /**加载静态3D瓦片资源 
+     * 96188 ==> Cesium OSM Buildings;从OpenStreetMap派生的3D建筑层覆盖了整个世界。它包含超过3.5亿栋建筑，每个特征都有名称、地址、建筑是商业还是住宅等数据。这些建筑使用铯世界地形数据来导出基准高程。
+     * 2275207 ==>Google Photorealistic 3D Tiles
+     * 2521176 ==>Cesium OSM Buildings for CWB
+     * 'OSM' ==>OpenStreetMap 3D Buildings
+    */
+    public async addIon3DTile(id: 96188 | 2275207 | 2521176 | 'OSM' | string): Promise<Cesium3DTileset> {
+        let tiles: Cesium3DTileset;
+        if (id === 'OSM')
+            tiles = await createOsmBuildingsAsync();
+        else if (typeof id === 'number')
+            tiles = await Cesium3DTileset.fromIonAssetId(id)
+        else
+            tiles = await Cesium3DTileset.fromUrl(id)
+        tiles.style = new Cesium3DTileStyle({
+            show: "${feature['Height']} !== '广州塔'",
+        });
+        return this.instance.add(tiles);
+    }
+    /**添加基元 */
+    public add(primitive: Primitive, index?: number) {
+        return this.instance.add(primitive, index)
+    }
+
+    /**图元图片的集合 */
+    private primitiveImages: { [K: string]: PrimitiveImage2D } = Object.create(null);
+    /**添加图元图片 */
+    public addPrimitiveImages(images: OptPrimitiveImage2D[]) {
+        const { primitiveImages } = this;
+        images.forEach(opt => {
+            const { image } = opt, primitive = primitiveImages[image];
+            if (primitive) {
+                primitive.addInstance([opt])
+            } else {
+                primitiveImages[image] = new PrimitiveImage2D(image, [opt]);
+                this.instance.add(primitiveImages[image])
+            }
+        });
+    }
+}

package/src/core/scene/scene.ts

@@ -0,0 +1,44 @@
+import { JulianDate, PostProcessStageCollection, Scene } from "cesium";
+import { CCamera } from "./camera";
+import { CPrimitives } from "./primitives";
+import { CGlobe } from "./globe";
+import { SLCViewer } from "../viewer";
+import { CLayers } from "./layers";
+
+/**Viewer的场景中所有三维图形对象和状态的容器。一般来说，场景不会直接创建，而是由 CesiumWidget 隐式创建。 */
+export class CScene {
+    constructor(cviewer: SLCViewer) {
+        const scene = this.scene = cviewer.viewer.scene;
+        this.cviewer = cviewer;
+        this.camera = new CCamera(cviewer);
+        this.cglobe = new CGlobe(scene.globe);
+        this.primitives = new CPrimitives(scene.primitives);
+        this.clayers = cviewer.clayers;
+        this.postProcessStages = scene.postProcessStages;
+        this.addEventListener(scene);
+    }
+    /**Viewer主类 */
+    private cviewer: SLCViewer;
+    /**场景 */
+    public readonly scene: Scene;
+    /**场景相机 */
+    public readonly camera: CCamera;
+    /**场景基元 */
+    public readonly primitives: CPrimitives;
+    /**场景地球 */
+    public readonly cglobe: CGlobe;
+    /**地图图层 */
+    public readonly clayers: CLayers;
+    /**后期处理效果 
+     * 1、给某个对象添加后期处理效果index.html?src=Custom%20Per-Feature%20Post%20Process.html
+     * 2、给整个场景添加后期处理效果index.html?src=Custom%20Post%20Process.html
+    */
+    public readonly postProcessStages: PostProcessStageCollection;
+    /**添加事件 */
+    private addEventListener(scene: Scene) {
+        scene.preUpdate.addEventListener((scene: Scene, time: JulianDate) => this.cviewer.trigger('PREUPDATE', [scene, time]))
+        scene.postUpdate.addEventListener((scene: Scene, time: JulianDate) => this.cviewer.trigger('POSTUPDATE', [scene, time]))
+        scene.preRender.addEventListener((scene: Scene, time: JulianDate) => this.cviewer.trigger('PRERENDER', [scene, time]))
+        scene.postRender.addEventListener((scene: Scene, time: JulianDate) => this.cviewer.trigger('POSTRENDER', [scene, time]))
+    }
+}

package/src/core/viewer/clock.ts

@@ -0,0 +1,93 @@
+import { Clock } from "cesium";
+import { SLCViewer } from ".";
+export const FrameBacks: FrameAnimation[] = [];
+interface FrameAnimation {
+    [k: string]: any;
+    /**要调整的目标对象 */
+    target: Object;
+    /**动画执行时间(秒) */
+    duration: number,
+    /**动画重复次数(-1无限重复) */
+    repeat: number,
+    /**动画执行函数 */
+    ease: 'none',
+    /**每次执行时写入的记录 */
+    _record?: {
+        /**动画开始的时间戳 */
+        _now: number;
+        /**执行动画的属性key */
+        _keys: string[];
+    }
+}
+
+export class CClock {
+    constructor(cviewer: SLCViewer) {
+        this.cviewer = cviewer;
+        const clock = this.clock = cviewer.viewer.clock;
+        this.addEventListener(clock);
+    }
+    /**Viewer主类 */
+    private cviewer: SLCViewer;
+    /**原始时钟  */
+    public readonly clock: Clock;
+    /**与上一帧的间隔 */
+    private delta: number = 0;
+    /** */
+    private now: number = Date.now();
+    private addEventListener(clock: Clock) {
+        clock.onTick.addEventListener((clock: Clock) => {
+            this.callFrameBacks(clock)
+            // 每次时钟滴答时触发的事件
+            this.cviewer.trigger('TICK', [clock])
+        })
+    }
+    /**调用每帧回调函索 */
+    private callFrameBacks(clock: Clock) {
+        const delta = Date.now() - this.now;
+        this.now = Date.now();
+        this.delta = delta;
+        FrameBacks.forEach((frame) => {
+            const { target, duration, repeat, ease, _record } = frame;
+            if (_record === undefined) {
+                const record = frame._record = Object.create(null);
+                record._now = this.now;
+                record._keys = [];
+                for (const key in frame) {
+                    if (Object.prototype.hasOwnProperty.call(frame, key)) {
+                        if (['target', 'duration', 'repeat', 'ease'].includes(key)) return
+                        record._keys.push(key);
+                        /**记录该key的初始值 */
+                        record[key] = target[key];
+                    }
+                }
+            }
+            const record = frame._record;
+            const { _keys, _now } = record
+            if (_keys.length === 0) return;
+            // 计算当前时间在动画中的进度
+            const progress = (this.now - _now) / duration * 1000;
+            // 如果动画已完成，且重复次数为0，则不再执行
+            if (progress > 1 && repeat === 0) {
+                FrameBacks.splice(FrameBacks.indexOf(frame), 1);
+                _keys.forEach(key => {
+                    target[key] = frame[key];
+                });
+                return;
+            }
+            // 如果动画已完成，且重复次数大于0，则重置动画
+            if (progress > 1 && repeat > 0) {
+                frame.repeat--;
+                record._now = this.now;
+                _keys.forEach(key => {
+                    target[key] = record[key];
+                });
+                return;
+            }
+            // 计算当前时间在动画中的进度
+            _keys.forEach(key => {
+                target[key] = record[key] + (frame[key] - record[key]) * (progress % 1);
+            })
+        });
+    }
+
+}

package/src/core/viewer/data.ts

@@ -0,0 +1,17 @@
+import { Color, DataSource, DataSourceCollection, GeoJsonDataSource } from "cesium";
+
+export class CDataSource {
+    constructor(data: DataSourceCollection) {
+        this.dataSources = data
+    }
+    public readonly dataSources: DataSourceCollection;
+    /**导入JSON */
+    public async loadJson(url: string): Promise<DataSource> {
+        let data = await GeoJsonDataSource.load(url, {
+            fill: Color.fromBytes(27, 138, 255, 255).withAlpha(1.0),
+            strokeWidth: 3,
+            stroke: Color.BLUE,
+        })
+        return this.dataSources.add(data)
+    }
+} 

package/src/core/viewer/element.ts

@@ -0,0 +1,146 @@
+import { Cartesian2, FeatureDetection, ScreenSpaceEventHandler, ScreenSpaceEventType, getTimestamp } from 'cesium';
+import { CEvent } from './event';
+
+/**键盘状态 */
+const KEYSTATES: { readonly [K in KeyCode]: boolean } = Object.create(null)
+/**3D视图HTML节点管理类
+ * @param position 鼠标当前位置
+ * @param positionStart 上一次鼠标当前位置
+ * 
+*/
+export class CElement {
+    constructor(dom: HTMLElement = document.body, event: CEvent) {
+        this._ele = dom;
+        this.event = event;
+        this.genObserver();
+        this.registerListeners()
+    }
+    public readonly event: CEvent<UCEvent>;
+    /**事件监听执行者 */
+    private handler: ScreenSpaceEventHandler;
+    /**节点大小变化的观察对象 */
+    private resizeObserver: ResizeObserver;
+    /**所有的监听事件 */
+    private listeners: {
+        /**被监听的节点 */
+        ele: HTMLElement | Document,
+        /**监听的事件类型 */
+        type: keyof HTMLElementEventMap,
+        /**回调函数 */
+        cb: (this: HTMLElement, ev: any) => any,
+        /**参数 */
+        param?: any
+    }[] = [];
+    /**视口 */
+    public rect: DOMRect;
+    /**宽 */
+    public width: number;
+    /**高 */
+    public height: number;
+    /**挂载的节点 */
+    private _ele: HTMLElement;
+    public get ele() {
+        if (!this._ele) console.error('CElement没有初始化！')
+        return this._ele;
+    }
+    /**上次鼠标位置 */
+    public readonly positionStart: Cartesian2 = new Cartesian2();
+    /**当前鼠标位置 场景pick用*/
+    public readonly position: Cartesian2 = new Cartesian2();
+    /**屏幕中间的位置 */
+    public readonly center: Cartesian2 = new Cartesian2();
+    /**键盘按键状态 */
+    public readonly keyStates: {
+        readonly [K in KeyCode]: boolean
+    } = KEYSTATES;
+    /**销毁 */
+    public kill() {
+        this.resizeObserver.unobserve(this.ele);
+        this.listeners.forEach(e => {
+            const { ele, type, cb, param = {} } = e;
+            ele.removeEventListener(type, cb, param)
+        })
+    }
+    /**生成观察者，观察节点大小 */
+    private genObserver() {
+        const that = this, { ele, center } = that;
+        that.width = ele.clientWidth;
+        that.height = ele.clientHeight;
+        that.rect = ele.getBoundingClientRect();
+        // 创建 ResizeObserver 实例
+        const resizeObserver = this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                // 获取目标元素的新宽度和高度
+                that.width = target.clientWidth;
+                that.height = target.clientHeight;
+                that.rect = target.getBoundingClientRect();
+                center.x = that.rect.left + that.width / 2;
+                center.y = that.rect.top + that.height / 2;
+                // 在这里执行相应的操作，如更新布局、重新渲染等
+                console.log(`Element size changed: ${that.width}px x ${that.height}px`, that.rect);
+                that.event.trigger('RESIZE', [that])
+            }
+        });
+        // 开始观察元素大小变化
+        resizeObserver.observe(this.ele);
+    }
+    /**监听节点一系列事件并触发 */
+    private registerListeners() {
+        this.handler = new ScreenSpaceEventHandler(this._ele as any);
+        const { handler, event, listeners, position, positionStart } = this;
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('LEFT_DOWN')
+        }, ScreenSpaceEventType.LEFT_DOWN)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('LEFT_UP')
+        }, ScreenSpaceEventType.LEFT_UP)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('LEFT_CLICK')
+        }, ScreenSpaceEventType.LEFT_CLICK)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('LEFT_DOUBLE_CLICK')
+        }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('RIGHT_DOWN')
+        }, ScreenSpaceEventType.RIGHT_DOWN)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('RIGHT_UP')
+        }, ScreenSpaceEventType.RIGHT_UP)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('RIGHT_CLICK')
+        }, ScreenSpaceEventType.RIGHT_CLICK)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('MIDDLE_DOWN')
+        }, ScreenSpaceEventType.MIDDLE_DOWN)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('MIDDLE_UP')
+        }, ScreenSpaceEventType.MIDDLE_UP)
+        handler.setInputAction((e: ScreenSpaceEventHandler.PositionedEvent) => {
+            event.trigger('MIDDLE_CLICK')
+        }, ScreenSpaceEventType.MIDDLE_CLICK)
+        handler.setInputAction((e: ScreenSpaceEventHandler.MotionEvent) => {
+            e.endPosition.clone(position);
+            e.startPosition.clone(positionStart)
+            event.trigger('MOUSE_MOVE')
+        }, ScreenSpaceEventType.MOUSE_MOVE)
+        handler.setInputAction((e: number) => {
+            event.trigger('WHEEL')
+        }, ScreenSpaceEventType.WHEEL)
+        listeners.push({
+            ele: document, type: 'keydown', cb: (ev: KeyboardEvent) => {
+                KEYSTATES[ev.code] = true;
+                event.trigger('KEY_DOWN', [ev])
+            }
+        }, {
+            ele: document, type: 'keyup', cb: (ev: KeyboardEvent) => {
+                KEYSTATES[ev.code] = false;
+                event.trigger('KEY_UP', [ev])
+            }
+        })
+        listeners.forEach(e => {
+            const { ele, type, cb, param = {} } = e;
+            ele.addEventListener(type, cb, param)
+        })
+    }
+}

package/src/core/viewer/entities.ts

@@ -0,0 +1,74 @@
+import { Cartesian3, Color, Entity, EntityCollection, HeadingPitchRoll, Model, Transforms, Math, DistanceDisplayCondition } from "cesium";
+/**Entity(实体):表示场景中的实体或物体，如建筑物、车辆、航线、传感器等。Entity提供了更高级的抽象层，能够以更语义化的方式描述场景中的对象。它不仅包含几何体和材质信息，还提供了丰富的属性和行为，例如位置、方向、标签、描述、运动、关联的时间信息等。Entity还支持动态更新，可以根据需要更改其属性，并反映在场景中的实时变化。
+ * Entity用于表示更复杂的实体或物体，提供了更丰富的属性和行为
+ * Entity对象可以包含一个或多个Primitive对象，通过Entity的primitive属性可以添加和管理相关的Primitive。可以在一个高级的Entity对象中组合多个底层的Primitive，从而实现更复杂的场景表示。
+ */
+export class CEntities {
+    constructor(entity: EntityCollection) {
+        this.entities = entity;
+    }
+    public readonly entities: EntityCollection;
+    /**添加实体(已经添加的实体不会再次添加，避免报错) */
+    public add(entity: Entity | Entity.ConstructorOptions): Entity {
+        if (entity instanceof Entity && this.entities.contains(entity)) return entity;
+        return this.entities.add(entity)
+    }
+    /**移除实体 */
+    public remove(entity: Entity): boolean {
+        return this.entities.remove(entity)
+    }
+    /**导入精细的模型 */
+    public addModel(opt: EntityModelOpt | Entity): Entity {
+        if (opt instanceof Entity) return this.entities.add(opt);
+        let { position: [lng, lat, height] = [0, 0, 0], rotate: [X, Y, Z] = [0, 0, 0], url, scale = 1.0 } = opt;
+        /**模型位置 , 模型方向 */
+        /**模型位置 */
+        const address = Cartesian3.fromDegrees(lng, lat, height);
+        let orientation = Transforms.headingPitchRollQuaternion(
+            address,
+            new HeadingPitchRoll(Math.toRadians(Z), Math.toRadians(Y), Math.toRadians(X))
+        );
+        const entity = new Entity({
+            id: url,
+            name: url,
+            position: address,
+            orientation: orientation,
+            model: {
+                uri: url,
+                /**是否显示 */
+                show: true,
+                /**模型缩放比例 */
+                scale: scale,
+                /**模型最小刻度 */
+                minimumPixelSize: 16,
+                /**模型最大刻度 */
+                maximumScale: 20000,
+                /**模型颜色 */
+                color: Color.WHITE.withAlpha(1.0),
+                /**模型轮廓颜色 */
+                silhouetteColor: new Color(255, 255, 255, 0),
+                /**模型轮廓宽度 */
+                silhouetteSize: 2,
+                /**最大层级 */
+                distanceDisplayCondition: new DistanceDisplayCondition(0, 10000),
+            }
+        })
+        return this.entities.add(entity);
+    }
+    /**移除指定模型(模型不会被销毁，可再次添加) */
+    public removeModel(entity: Entity | string) {
+        if (typeof entity === 'string') entity = this.entities.getById(entity);
+        this.entities.remove(entity);
+    }
+}
+
+/**模型配置 */
+interface EntityModelOpt {
+    /**模型地址 */
+    url: string,
+    /**模型位置 [经度,纬度,高度] */
+    position: LnglatHeight,
+    /**绕轴旋转 +顺时针-逆时针 [X轴,Y轴,Z轴] 度 */
+    rotate: [number, number, number],
+    scale?: number
+}