@sl-utils/cesium 1.0.0 → 1.0.1

package/src/Assets/resource.ts

@@ -0,0 +1,32 @@
+import F from './models/fengche.gltf'
+import J from './images/jinzhou.ico'
+
+import ICONS from './images/bouys.png'
+import BYD_BILLBOARDS from './images/BYD.png'
+import BYH_BILLBOARD from './images/BYH.png'
+import CZD_BILLBOARD from './images/CZD.png'
+import MAP_BG from './images/map_bg.png'
+import MAP_BRIDGE from './images/map_bridge.png'
+import MAP_RADAR from './images/map_radar.png'
+import MAP_VHF from './images/map_vhf.png'
+import U_SNOWTEXTURE from './images/snowflake_particle.png'
+import GEOJSON_HEBEI from './geojson/HeBei.geojson'
+
+/**静态资源 */
+export const RESOURCES = {
+    /**风机模型 */
+    F,
+    /**风电场图标 */
+    J,
+    ICONS,
+    BYD_BILLBOARDS,
+    BYH_BILLBOARD,
+    CZD_BILLBOARD,
+    /**地图覆盖层 */
+    MAP_BG,
+    MAP_BRIDGE,
+    MAP_RADAR,
+    MAP_VHF,
+    U_SNOWTEXTURE,
+    GEOJSON_HEBEI
+}

package/src/const/color.ts

@@ -0,0 +1,10 @@
+import { Color } from "cesium";
+
+/**用于线条的颜色 */
+export const COLOR_CONST_LINE = Color.RED.withAlpha(0.8);
+/**轮廓边线的颜色 */
+export const COLOR_CONST_OUTLINE = Color.RED.withAlpha(0.8);
+/**用于填充的颜色 */
+export const COLOR_CONST_FILL = Color.GREEN.withAlpha(0.2);
+/**字体颜色 */
+export const COLOR_CONST_FONT = Color.fromRgba(0xFFB172FF);

package/src/const/config/camera.ts

@@ -0,0 +1,16 @@
+import { Cartesian3, Rectangle } from "cesium";
+
+/**申明CESIUM的默认视角范围 */
+export const CESIUM_CONST_DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(100.9830645, 42.23071025, 128.18493624, 32.38793137);
+/**零值表示相机将刚好查看整个视角范围，大于零会使它远离视角范围，而小于零的值会使它接近视角范围 */
+export const CESIUM_CONST_DEFAULT_VIEW_FACTOR = 0.01;
+/**如果设置，则相机将无法沿任一方向旋转超过该轴 */
+export const CESIUM_CONST_CAMERA_CONSTRAINEDAXIS: Cartesian3 = undefined;
+/**不带参数时旋转相机的默认量提供给外观方法 */
+export const CESIUM_CONST_CAMERA_DEFAULTLOOKAMOUNT: number = Math.PI / 60.0;
+/**不带参数时移动相机的默认数量提供给move方法 */
+export const CESIUM_CONST_CAMERA_DEFAULTMOVEAMOUNT: number = 100000.0;
+/**不带参数时旋转相机的默认量提供给旋转方法 */
+export const CESIUM_CONST_CAMERA_DEFAULTROTATEAMOUNT: number = Math.PI / 3600.0;
+/**不带参数时移动相机的默认数量提供给缩放方法 */
+export const CESIUM_CONST_CAMERA_DEFAULTZOOMAMOUNT: number = 100000.0;

package/src/const/config/index.ts

@@ -0,0 +1,2 @@
+export * from './camera';
+export * from './viewer';

package/src/const/config/viewer.ts

@@ -0,0 +1,42 @@
+import { CesiumTerrainProvider } from "cesium";
+
+/**申明CESIUM静态资源根路径 */
+export const CESIUM_CONST_BASE_URL = '/';
+/**申明CESIUM资源的token */
+export const CESIUM_CONST_TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3MTMzNmU2ZC0zNTM4LTQ4ZTQtYmE3ZC00MjUxODVmOWY4MTgiLCJpZCI6MTQ5NTEyLCJpYXQiOjE3MTc0ODQ0MTF9.lrlIkvQ463L2c5Rp-abkbwAiSP4lRTGF8gZWesJhgvc";
+/**Viewer的默认配置 */
+export const CESIUM_CONST_OPT_VIEWER_DEFAULT: SLCViewerOpt = {
+    animation: false,
+    timeline: false,
+    geocoder: false,
+    homeButton: false,
+    sceneModePicker: false,
+    baseLayer: false,
+    baseLayerPicker: false,
+    navigationHelpButton: false,
+    fullscreenButton: false,
+    selectionIndicator: false,
+    infoBox: true,
+    projectionPicker: false,
+    shouldAnimate: true,
+    scene3DOnly: true,
+    // creditContainer: 'none',
+    // 设置地形
+    // terrainProvider: Cesium.createWorldTerrainAsync({
+    //     //   //光照效果
+    //     requestVertexNormals: true,
+    //     //   //水纹贴图
+    //     requestWaterMask: true,
+    // }),
+    // terrainProvider:new CesiumTerrainProvider({
+    //   url: "/Assets/terrain"
+    // }),
+    //天空盒子
+    // skyBox: new SkyBox({
+    //   sources: {
+    //     positiveX: '', negativeX: '',
+    //     positiveY: '', negativeY: '',
+    //     positiveZ: '', negativeZ: '',
+    //   }
+    // }),
+}

package/src/const/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './color';
+export * from './position';

package/src/const/position.ts

@@ -0,0 +1,34 @@
+/**经纬度常量 */
+
+import { Cartesian3, Cartographic } from "cesium";
+/**北京经纬度 */
+export const BEIJING_CONST_DEGREES = Cartesian3.fromDegrees(116.3, 39.9, 0);
+/**上海经纬度 */
+export const SHANGHAI_CONST_DEGREES = Cartesian3.fromDegrees(121.3, 31.1, 0);
+/**广州经纬度 */
+export const GUANGZHOU_CONST_DEGREES = Cartesian3.fromDegrees(113.1, 23.0, 0);
+/**深圳经纬度 */
+export const SHENZHEN_CONST_DEGREES = Cartesian3.fromDegrees(113.8, 22.5, 0);
+
+/**香河县 */
+export const LNGLAT_CONST_XIANGHE: LnglatHeight = [116.95, 39.88];
+/**锦州油田 */
+export const LNGLAT_CONST_JINZHOU: LnglatHeight = [121.04084167, 40.35676944];
+/**白洋淀 */
+export const LNGLAT_CONST_BAIYANGDIAN: LnglatHeight = [116.05, 38.53];
+/**沧州 */
+export const LNGLAT_CONST_CANGZHOU: LnglatHeight = [116.85, 38.30];
+/**天元海 */
+export const LNGLAT_CONST_TIANYUANHAI: LnglatHeight = [117.5481, 39.7471];
+/**深蓝 */
+export const LNGLAT_CONST_SHENLAN: LnglatHeight = [114.12119, 22.68457];
+/**博纳斯威 */
+export const LNGLAT_CONST_BONASIWEI: LnglatHeight = [117.42950, 39.459000]
+/**华南城 */
+export const LNGLAT_CONST_HUANANCHEN: LnglatHeight = [114.1203520 + (0.1198286 - 0.119994081), 22.68317077 + (0.683382606 - 0.683162334)];
+
+/**C3常量 */
+/** @default 北京*/
+export const CARTESIAN3_CONST_DEFAULT: Cartesian3 = Cartesian3.fromDegrees(116.4074, 39.9042);
+/**香河县 */
+export const CARTESIAN3_CONST_XIANGHE: Cartesian3 = Cartesian3.fromDegrees(116.95, 39.88);

package/src/core/cdk/compass.ts

@@ -0,0 +1,24 @@
+import { SLCViewer } from "../viewer";
+import svg_compass from './svg_compass.svg'
+/**指南针 
+ * @param 核心类
+ * @param ele 指南针节点
+*/
+export class Compass {
+    constructor(cviewer: SLCViewer, ele: HTMLElement) {
+        if (!ele) {
+            ele = document.createElement('img');
+            ele.setAttribute('src', svg_compass);
+            const { style } = ele
+            style.position = 'absolute';
+            style.zIndex = '10000';
+            style.top = '10px';
+            style.right = '530px';
+        }
+        const { style } = ele, { camera } = cviewer;
+        cviewer.viewer.container.append(ele);
+        cviewer.on('TICK', () => {
+            style.transform = `rotate(${camera.heading * -180 / Math.PI}deg)`
+        })
+    }
+}

package/src/core/cdk/index.ts

@@ -0,0 +1,36 @@
+/**组件开发工具包 */
+import { SLCViewer } from "../viewer";
+import { Slider } from "./slider";
+import { Compass } from "./compass";
+import { LnglatScale } from './lnglat';
+
+/**组件开发工具包
+ * 获取当前指针经纬度
+ * 获取当前屏幕中间每一个像素的距离
+ * 
+ */
+export class SLCesiumCDK {
+    constructor(viewer: SLCViewer) {
+        this.cviewer = viewer;
+    }
+    /**cesiumViewer实例 */
+    private cviewer: SLCViewer;
+    /**经纬度存放地址 */
+    public readonly lnglathight: LnglatHeight = [0, 0, 0]
+    /**中心点经纬度和 */
+    public readonly center_lnglat: LnglatHeight = [0, 0, 0]
+    /**添加指南针 */
+    public onAddCompass(ele?: HTMLElement) {
+        const compass = new Compass(this.cviewer, ele)
+    }
+    /**添加分割线 */
+    public onAddSlider() {
+        const slider = new Slider(this.cviewer)
+    }
+
+    /**获取鼠标经纬度 */
+    public onAddMouseLnglatScale() {
+     const lnglat = new LnglatScale(this.cviewer)
+    }
+    
+}

package/src/core/cdk/lnglat.ts

@@ -0,0 +1,125 @@
+import { Cartesian2, Cartographic, ScreenSpaceEventHandler } from "cesium";
+import { SLCViewer } from "../viewer";
+import {  uc_getLnglat, uc_mathGetPoint } from "../../utils";
+
+/**组件开发工具包
+ * 获取当前指针经纬度
+ * 获取当前屏幕中间每一个像素的距离
+ * 
+ */
+export class LnglatScale {
+    constructor(viewer: SLCViewer) {
+        this.cviewer = viewer;
+        viewer.on('INIT_PICK', () => {
+            this.onAddMouseLnglat()
+            this.onAddScale();
+        })
+    }
+    /**cesiumViewer实例 */
+    private cviewer: SLCViewer;
+    /**经纬度存放地址 */
+    public readonly lnglathight: LnglatHeight = [0, 0, 0]
+    /**中心点经纬度和 */
+    public readonly center_lnglat: LnglatHeight = [0, 0, 0]
+    /**获取鼠标经纬度 */
+    public onAddMouseLnglat() {
+        const { cviewer, lnglathight } = this, { viewer, lnglat, scene, celement: { position, width, height } } = cviewer;
+        const div = document.createElement('div');
+        const { style } = div
+        style.position = 'absolute';
+        style.bottom = '10px';
+        style.right = '10px';
+        style.zIndex = '10000';
+        style.borderRadius = '3px';
+        style.border = '1px solid #333';
+        style.backgroundColor = 'rgba(255, 255, 255, 0.6)';
+        style.color = '#333';
+        style.width = '200px';
+        style.height = '32px';
+        style.display = "flex";
+        style.alignItems = 'center';
+        style.padding = '0px 3px';
+        viewer.container.append(div);
+        const spanE = document.createElement('span'), spanN = document.createElement('span');
+        const { style: styleE } = spanE, { style: styleN } = spanN;
+        styleE.width = styleN.width = '30%';
+        styleE.flexGrow = styleN.flexGrow = '1';
+        styleE.textAlign = styleN.textAlign = 'right';
+        div.appendChild(spanE);
+        div.appendChild(spanN);
+        let click: boolean = false;
+        const getLnglat = (e) => {
+            if (click) return;
+            if (e instanceof Cartesian2) uc_getLnglat(e, scene, lnglathight);
+            else uc_getLnglat(position, scene, lnglathight);
+            lnglathight[0] = uc_mathGetPoint(lnglathight[0], 3)
+            lnglathight[1] = uc_mathGetPoint(lnglathight[1], 3)
+            lnglathight[2] = uc_mathGetPoint(lnglathight[2], 3)
+            spanE.textContent = `${lnglathight[0]}E `;
+            spanN.textContent = `${lnglathight[1]}N `;
+        }
+        cviewer.on('LEFT_DOWN', () => click = true)
+        cviewer.on('LEFT_UP', () => click = false)
+        cviewer.on('MOUSE_MOVE', getLnglat)
+        cviewer.on('CAMERA_MOVEEND', getLnglat)
+        getLnglat(new Cartesian2(width / 2, height / 2))
+    }
+    /**添加屏幕竖直中线的比例尺 */
+    public onAddScale() {
+        const div = document.createElement('div'), span = document.createElement('span'), line = document.createElement('div');
+        const { cviewer, center_lnglat } = this, { scene, celement: { center }, ccamera } = cviewer, { style } = div, { style: styleLine } = line, { style: styleSpan } = span;
+        div.id = 'scale-container', line.id = 'scale-line', span.id = 'scale-text';
+        cviewer.viewer.container.append(div);
+        div.append(line), div.append(span);
+        style.width = '200px';
+        style.height = '32px';
+        style.position = 'absolute';
+        style.zIndex = '10000';
+        style.bottom = '50px';
+        style.right = '10px';
+        style.display = "flex";
+        style.alignItems = 'center';
+        style.justifyContent = 'center';
+        style.color = '#333';
+        style.border = '1px solid #333';
+        style.borderRadius = '3px';
+        style.backgroundColor = 'rgba(255, 255, 255, 0.6)';
+        style.padding = '0px 3px';
+        styleLine.width = '20px';
+        styleLine.height = '5px';
+        styleLine.position = 'absolute';
+        styleLine.bottom = '5px';
+        styleLine.border = '1px solid #333';
+        styleLine.borderTop = '0px';
+        styleSpan.fontSize = '13px';
+        const getScale = () => {
+            const res = uc_getLnglat(center, scene, center_lnglat)
+            if (!res) style.display = 'none';
+            else style.display = 'flex';
+            const distance = ccamera.getPixelSize(center_lnglat)
+            const { width, text } = this.getZoomAndScale(distance);
+            span.textContent = text;
+            styleLine.width = width + 'px';
+        }
+        cviewer.on('CAMERA_MOVEEND', getScale);
+        getScale();
+    }
+    /**设置比例尺的信息 */
+    private getZoomAndScale(distance: number) {
+        distance = distance * 100;
+        let text = '';
+        if (distance > 2000) {
+            distance = distance / 1852
+            text = ' nm'
+        } else {
+            text = ' m'
+        }
+        let num = distance, power = 1;
+        while (num > 10) {
+            power = power * 10;
+            num = Math.ceil(num / 10)
+        }
+        num = Math.ceil(num) * power;
+        return { width: 100 * num / distance, text: num + text }
+    }
+}

package/src/core/cdk/orbit.ts

@@ -0,0 +1,118 @@
+import { Camera, Cartesian3, CatmullRomSpline, Color, DeveloperError, DistanceDisplayCondition, JulianDate, createGuid } from "cesium";
+import { CEvent, SLCViewer } from "../viewer";
+import { uc_getCartesian3, uc_getDiffDegreesByDistance, uc_getDirection, uc_getLnglat } from "../../utils";
+import { LNGLAT_CONST_HUANANCHEN, LNGLAT_CONST_SHENLAN } from "../../const";
+import * as turf from '@turf/turf';
+const DEFAULT_ORBIT_OPT: CDKOrbitOpt = {
+    position: [],
+    radius: 500,
+    steps: 50,
+}
+/**组件开发工具包--轨道 */
+export class CDKOrbit {
+    constructor(viewer: SLCViewer, opt: CDKOrbitOpt) {
+        this.viewer = viewer;
+        const spline = this.spline = this.createSpline(opt);
+        // 显示轨迹
+        const interpolatedPoints = [];
+        const granularity = 0.01; // 控制轨迹的细致程度
+        for (let t = 0; t <= 1; t += granularity) {
+            const position = spline.evaluate(t);
+            interpolatedPoints.push(position);
+        }
+        viewer.centities.add({
+            polyline: {
+                positions: interpolatedPoints,
+                width: 2,
+                material: Color.RED,
+                distanceDisplayCondition: new DistanceDisplayCondition(10, 5000)
+            }
+        });
+    }
+    /** */
+    private id: string = createGuid();
+    /**视图 */
+    private viewer: SLCViewer;
+    /**相机 */
+    private get camera(): Camera {
+        return this.viewer.ccamera.camera
+    };
+    /**事件 */
+    private get cevent(): CEvent {
+        return this.viewer
+    }
+    /**轨迹 */
+    private spline: CatmullRomSpline;
+    /**巡视id */
+    private animId: number;
+    /**当前的位置 */
+    private c3: Cartesian3 = new Cartesian3();
+    /**获取轨道指定百分比位置的点*/
+    public getPosition(time: number, result: Cartesian3 = this.c3): Cartesian3 {
+        if (time < 0 || time > 1) throw new DeveloperError('参数应该大于等于0且小于等于1');
+        result = this.spline.evaluate(time, this.c3)
+        return result
+    }
+    /**开发组件开启轨迹
+     * @param all 整个轨迹巡视花费时间(秒)
+     */
+    public cdkOpenOrbit(all: number) {
+        const { camera, c3 } = this;
+        const start = performance.now(), time = all * 1000;
+        const t = uc_getCartesian3([LNGLAT_CONST_HUANANCHEN[0], LNGLAT_CONST_HUANANCHEN[1], 0]);
+        const cb = () => {
+            const now = performance.now(), percent = (now - start) / time % 1
+            this.getPosition(percent);
+            camera.setView({ destination: c3, orientation: uc_getDirection(c3, t) })
+            this.animId = requestAnimationFrame(cb)
+        }
+        cb();
+        this.addEventListener(true);
+    }
+    /**开发组件关闭轨迹 */
+    public cdkCloseOrbit() {
+        cancelAnimationFrame(this.animId);
+        this.addEventListener(false);
+    }
+    /**监听函数（一些操作关闭轨道巡视） */
+    private addEventListener(flag: boolean) {
+        const { cevent, id } = this
+        cevent[flag ? 'on' : 'off'](`click.${id}`, () => this.cdkCloseOrbit());
+    }
+    /**创建轨道线 */
+    private createSpline(opt: CDKOrbitOpt): CatmullRomSpline {
+        const { position, radius, steps } = Object.assign({}, DEFAULT_ORBIT_OPT, opt)
+        let points: Cartesian3[] = position.map(e => uc_getCartesian3(e)), len = points.length, [p0, p1] = points;
+        /**创建圆 */
+        if (len === 1) {
+            let p = uc_getLnglat(p0);
+            let { geometry: { coordinates: [arr] } } = turf.circle([p[0], p[1]], radius, { steps, units: "meters" });
+            points = arr.map((e: LnglatHeight) => uc_getCartesian3([e[0], e[1], p[2]]));
+            points.push(points[0])
+        } else if (len === 2) {
+            let [s0, s1] = points, [lng0, lat0] = uc_getLnglat(s0), [lng1, lat1] = uc_getLnglat(s1),
+                polygon = turf.polygon([[[lng0, lat0], [lng1, lat1], [lng1, lat1], [lng0, lat0]]]);
+            let { geometry: { coordinates: [arr] } } = turf.buffer(polygon, radius, { steps, units: "meters" })
+            points = arr.map((e: any) => uc_getCartesian3([e[0], e[1], s0[2]]))
+            points.push(points[0])
+        }
+        /**根据关键点创建线*/
+        let length = points.length, diff = 1.0 / (length - 1), times: number[] = [];
+        for (let i = 0; i < length; i++) {
+            times.push(diff * i)
+        }
+        return new CatmullRomSpline({
+            times: times,
+            points: points
+        })
+    }
+}
+/**轨道参数 */
+interface CDKOrbitOpt {
+    /**点位(单点为圆中心，两点为线外拓，多点为必经点曲线) */
+    position: (Cartesian3 | LnglatHeight)[],
+    /**圆半径或外拓距离(m) @default 500 */
+    radius?: number,
+    /**取样点数量 @default 100 */
+    steps?: number,
+}

package/src/core/cdk/overlay.ts

@@ -0,0 +1,90 @@
+import { ScreenSpaceEventHandler, createGuid } from "cesium";
+import { SLCViewer } from "..";
+/**组件开发工具包--浮层 */
+export class CDKOverlay {
+    constructor(viewer: SLCViewer, opt?: COverlayOpt) {
+        this.cviewer = viewer;
+        this.setOption(opt)
+        this.openListener();
+    }
+    /**浮层id */
+    private uuid: string = createGuid();
+    /**浮层dom */
+    private dom: HTMLDivElement = document.createElement('div');
+    /**实际显示内容 */
+    private ele: HTMLElement;
+    /**浮层配置 */
+    private opt: COverlayOpt = {
+        positon: "left-bottom",
+        x: 5,
+        y: -5,
+    };
+    private cviewer: SLCViewer;
+    /**销毁浮层 */
+    public distory() {
+        this.cviewer.off(`MOUSE_MOVE.${this.uuid}`);
+    }
+    /**销毁浮层 SLUSubs工具类*/
+    public cdkUn() {
+        this.distory()
+    }
+    /**显示 */
+    public cdkShow() {
+        this.dom.style.display = 'block';
+        return this;
+    }
+    /**隐藏 */
+    public cdkHide() {
+        this.dom.style.display = 'none';
+    }
+    /**配置浮层 */
+    private setOption(opt: Partial<COverlayOpt>) {
+        this.opt = Object.assign(this.opt, opt);
+        this.ele = this.opt.ele;
+        const { cviewer, dom } = this, { className = "", ifEvent } = this.opt;
+        cviewer.viewer.container.appendChild(dom);
+        dom.className = className;
+        if (!ifEvent) dom.style.pointerEvents = 'none';
+    }
+    /**开启监听并对节点进行控制 */
+    private openListener() {
+        const { cviewer, opt, dom, ele } = this, { celement } = cviewer, { positon, x, y } = opt, { style } = dom;
+        if (!ele) return;
+        style.position = 'absolute';
+        style.width = "content";
+        dom.appendChild(ele);
+        const rect = ele.getBoundingClientRect();
+        cviewer.on(`MOUSE_MOVE.${this.uuid}`, (e: ScreenSpaceEventHandler.MotionEvent) => {
+            let { left, top, right, bottom } = celement.rect, { width, height } = rect;
+            left += x; right -= x; top += y; bottom -= y;
+            /**重设dom位置 */
+            style.top = "unset";
+            style.bottom = "unset";
+            style.left = "unset";
+            style.right = "unset";
+            let local: string = positon;
+            /**判断是否超出边界 */
+            if (top < height && positon.includes('bottom')) local = positon.replace('bottom', 'top');
+            if (right < width && positon.includes('left')) local = positon.replace('left', 'right');
+            /**设置位置 */
+            switch (local) {
+                case "left-top":
+                    style.left = `${left}px`;
+                    style.top = `${top}px`;
+                    break;
+                case "left-bottom":
+                    style.left = `${left}px`;
+                    style.bottom = `${bottom}px`;
+                    break;
+                case "right-top":
+                    style.right = `${right}px`;
+                    style.top = `${top}px`;
+                    break;
+                case "right-bottom":
+                    style.right = `${right}px`;
+                    style.bottom = `${bottom}px`;
+                    break;
+            }
+        });
+    }
+}

package/src/core/cdk/slider.ts

@@ -0,0 +1,54 @@
+import { Scene, ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer } from "cesium";
+import { SLCViewer } from "../viewer";
+
+/**将cesium场景进行分割的工具类 
+ * 自行将要比对的物体放置到左侧或右侧
+ * @example tileset.splitDirection = SplitDirection.LEFT;
+ * @example https://sandcastle.cesium.com/?id=3d-tiles-gaussian-splatting-comparison
+*/
+export class Slider {
+    constructor(cviewer: SLCViewer) {
+        if (this.slider) return;
+        let slider = this.slider = document.getElementById("slider");
+        if (!this.slider) {
+            slider = this.slider = document.createElement('div');
+            cviewer.viewer.container.append(slider);
+            slider.id = "slider";
+            const style = slider.style;
+            style.width = '5px';
+            style.height = '100%';
+            style.position = 'absolute';
+            style.left = '50%';
+            style.top = '0%';
+            style.cursor = 'e-resize'
+            style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+        }
+        const handler = new ScreenSpaceEventHandler(slider as HTMLCanvasElement);
+        let moveActive = false;
+        function move(movement) {
+            if (!moveActive) {
+                return;
+            }
+            const relativeOffset = movement.endPosition.x;
+            const splitPosition =
+                (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
+            slider.style.left = `${100.0 * splitPosition}%`;
+            cviewer.scene.splitPosition = splitPosition;
+        }
+        handler.setInputAction(function () {
+            moveActive = true;
+        }, ScreenSpaceEventType.LEFT_DOWN);
+        handler.setInputAction(function () {
+            moveActive = true;
+        }, ScreenSpaceEventType.PINCH_START);
+        handler.setInputAction(move, ScreenSpaceEventType.MOUSE_MOVE);
+        handler.setInputAction(move, ScreenSpaceEventType.PINCH_MOVE);
+        handler.setInputAction(function () {
+            moveActive = false;
+        }, ScreenSpaceEventType.LEFT_UP);
+        handler.setInputAction(function () {
+            moveActive = false;
+        }, ScreenSpaceEventType.PINCH_END);
+    }
+    private slider: HTMLElement;
+}

package/src/core/cdk/svg_compass.svg

@@ -0,0 +1,33 @@
+  <svg width="130" height="130" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <!-- 指南针外圆 -->
+    <circle cx="100" cy="100" r="95" fill="#f8f9fa66" stroke="#2c3e5066" stroke-width="3" />
+    <!-- 内圆背景 -->
+    <circle cx="100" cy="100" r="90" fill="#ffffff33" stroke="#bdc3c766" stroke-width="1" />
+    <!-- 刻度线（4个主方向粗刻度） -->
+    <line x1="100" y1="5" x2="100" y2="20" stroke="#e74c3c" stroke-width="4" /> <!-- 北 -->
+    <line x1="190" y1="100" x2="175" y2="100" stroke="#3498db" stroke-width="4" /> <!-- 东 -->
+    <line x1="100" y1="195" x2="100" y2="180" stroke="#2ecc71" stroke-width="4" /> <!-- 南 -->
+    <line x1="5" y1="100" x2="20" y2="100" stroke="#f39c12" stroke-width="4" /> <!-- 西 -->
+    <!-- 刻度线（8个次方向细刻度） -->
+    <line x1="155" y1="45" x2="145" y2="55" stroke="#7f8c8d" stroke-width="2" /> <!-- 东北 -->
+    <line x1="155" y1="155" x2="145" y2="145" stroke="#7f8c8d" stroke-width="2" /> <!-- 东南 -->
+    <line x1="45" y1="155" x2="55" y2="145" stroke="#7f8c8d" stroke-width="2" /> <!-- 西南 -->
+    <line x1="45" y1="45" x2="55" y2="55" stroke="#7f8c8d" stroke-width="2" /> <!-- 西北 -->
+    <!-- 方向文字 -->
+    <text x="100" y="40" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"
+        fill="#e74c3c">N</text>
+    <text x="165" y="105" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"
+        fill="#3498db">E</text>
+    <text x="100" y="170" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"
+        fill="#2ecc71">S</text>
+    <text x="35" y="105" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"
+        fill="#f39c12">W</text>
+    <!-- 指南针指针（北方向） -->
+    <polygon points="100,30 95,95 100,100 105,95" fill="#e74c3c" stroke="#c0392b" stroke-width="1" />
+
+    <!-- 指针尾部 -->
+    <polygon points="100,165 95,105 100,100 105,105" fill="#7f8c8d" stroke="#616a6b" stroke-width="1" />
+
+    <!-- 中心轴 -->
+    <circle cx="100" cy="100" r="5" fill="#2c3e50" />
+</svg>

package/src/core/index.ts

@@ -0,0 +1,2 @@
+export * from './scene';
+export * from './viewer';