@sl-utils/cesium 1.0.0 → 1.0.1

package/src/core/layers/baidu-map-layer.ts

@@ -0,0 +1,117 @@
+import * as Cesium from 'cesium';
+import { um_tobd09gps84, um_togps84bd09 } from 'src/utils';
+export class BaiduImageryProvider extends Cesium.UrlTemplateImageryProvider {
+    constructor(options) {
+        let southwestInMeters: Cesium.Cartesian2 = new Cesium.Cartesian2(-33554055.943697, -33746824.579666);
+        let northeastInMeters: Cesium.Cartesian2 = new Cesium.Cartesian2(33554055.943697, 33746824.579666);
+        super(Object.assign(options, {
+            subdomains: "0123", minimumLevel: 1, maximumLevel: 18, tilingScheme: new Cesium.WebMercatorTilingScheme({
+                rectangleSouthwestInMeters: southwestInMeters,
+                rectangleNortheastInMeters: northeastInMeters
+            })
+        }));
+    }
+    public override requestImage(x, y, level, request) {
+        var r = this.tilingScheme.getNumberOfXTilesAtLevel(level);
+        var c = this.tilingScheme.getNumberOfYTilesAtLevel(level);
+        let X = x - r / 2, Y = c / 2 - y - 1, Z = level, S = Math.floor(10 * Math.random());
+        var s = this.url.replace("{x}", X.toString()).replace("{y}", Y.toString()).replace("{z}", Z).replace("{s}", S.toString());
+        return Cesium.ImageryProvider.loadImage(this, s) as Promise<Cesium.ImageryTypes>;
+    }
+
+}
+
+class BaiduMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
+    constructor(options) {
+        super(options)
+        this._projection = new BaiduMercatorProjection(this._ellipsoid)
+    }
+    private _projection;
+    private _ellipsoid
+}
+
+class BaiduMercatorProjection { // 创建椭球墨卡托投影，Cesium 源码中是以xyz三个轴的最长的轴作为球来计算
+    constructor(ellipsoid) {
+        this._ellipsoid = ellipsoid || Cesium.Ellipsoid.WGS84;
+        this._semimajorAxis = this._ellipsoid.maximumRadius
+        this._oneOverSemimajorAxis = 1.0 / this._semimajorAxis
+    }
+    private _ellipsoid;
+    private _semimajorAxis;
+    private _oneOverSemimajorAxis;
+    get ellipsoid() { return this._ellipsoid }
+    get MaximumLatitude() { return this.mercatorAngleToGeodeticLatitude(Math.PI) }
+    geodeticLatitudeToMercatorAngle(latitude) {
+        if (latitude > this.MaximumLatitude) { latitude = this.MaximumLatitude }
+        else if (latitude < -this.MaximumLatitude) { latitude = -this.MaximumLatitude }
+        const tmp = this.ellipsoid.radii.z / this.ellipsoid.radii.x // 短半轴 / 长半轴
+        const e = Math.sqrt(1.0 - tmp * tmp)
+        const con = e * Math.sin(latitude)
+        const ts = Math.tan(Math.PI * 0.25 - latitude * 0.5) / Math.pow((1.0 - con) / (1.0 + con), e * 0.5)
+        return - Math.log(Math.max(ts, 1E-10))
+    }
+    project(cartographic, result) {
+        const correct = um_togps84bd09(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));
+        cartographic.longitude = Cesium.Math.toRadians(correct.lng), cartographic.latitude = Cesium.Math.toRadians(correct.lat)
+
+        var x = cartographic.longitude * this.ellipsoid.radii.x
+        var y = this.geodeticLatitudeToMercatorAngle(cartographic.latitude) * this.ellipsoid.radii.x
+        var z = cartographic.height
+
+        if (!Cesium.defined(result)) { return new Cesium.Cartesian3(x, y, z) }
+        result.x = x, result.y = y, result.z = z
+        return result
+    }
+    mercatorAngleToGeodeticLatitude(mercatorAngle) {
+        const tmp = this.ellipsoid.radii.z / this.ellipsoid.radii.x // 短半轴 / 长半轴
+        const e = Math.sqrt(1.0 - tmp * tmp)
+        const ts = Math.exp(-mercatorAngle)
+        var phi = Math.PI / 2 - 2 * Math.atan(ts)
+        for (var i = 0, dphi = 0.1, con; i < 15 && Math.abs(dphi) > 1e-7; i++) {
+            con = e * Math.sin(phi)
+            con = Math.pow((1 - con) / (1 + con), e / 2)
+            dphi = Math.PI / 2 - 2 * Math.atan(ts * con) - phi
+            phi += dphi
+        }
+        return phi
+    }
+    unproject(cartesian, result) {
+        var longitude = cartesian.x / this.ellipsoid.radii.x
+        var latitude = this.mercatorAngleToGeodeticLatitude(cartesian.y / this.ellipsoid.radii.x)
+        var height = cartesian.z
+        const correct = um_tobd09gps84(Cesium.Math.toDegrees(longitude), Cesium.Math.toDegrees(latitude));
+        longitude = Cesium.Math.toRadians(correct.lng), latitude = Cesium.Math.toRadians(correct.lat)
+
+        if (!Cesium.defined(result)) { return new Cesium.Cartographic(longitude, latitude, height) }
+        result.longitude = longitude, result.latitude = latitude, result.height = height
+        return result
+    }
+}
+
+class BaiduImageryProvider2 extends Cesium.UrlTemplateImageryProvider {
+    constructor(param, options = {}) {
+        var templateImgUrl = "//maponline{s}.bdimg.com/starpic/u=x={x};y={y};z={z};v=009;type=sate&fm=46&app=webearth2&v=009&qt=satepc"
+        var templateUrl = "//maponline{s}.bdimg.com/tile/?x={x}&y={y}&z={z}&{p}"
+        var myUrl = (param === "img" ? templateImgUrl : templateUrl).replace(/\{p\}/g, param)
+        super(Object.assign({}, {
+            url: myUrl, subdomains: "0123", minimumLevel: 1, maximumLevel: 18, tilingScheme: new BaiduMercatorTilingScheme({
+                rectangleSouthwestInMeters: new Cesium.Cartesian2(-33554432, -33554432),
+                rectangleNortheastInMeters: new Cesium.Cartesian2(33554432, 33554432),
+                ellipsoid: new Cesium.Ellipsoid(6378206, 6378206, 6356584.314245179)
+            }),
+        }, options))
+        const that = this
+        this._readyPromise.then(function (properties) {
+            var customTags = { x: (l, x, y, z) => { return x - (1 << (z - 1)) }, y: (l, x, y, z) => { return (1 << (z - 1)) - y - 1 }, z: (l, x, y, z) => { return z } }
+            that._tags = Cesium.combine(customTags, that._tags)
+            that._pickFeaturesTags = Cesium.combine(customTags, that._pickFeaturesTags)
+            that._rectangle = that._tilingScheme.rectangle
+        })
+    }
+    private _tags;
+    private _pickFeaturesTags;
+    private _rectangle;
+    private _tilingScheme;
+    private _readyPromise;
+
+}

package/src/core/libs/gui.ts

@@ -0,0 +1,88 @@
+import { Color } from "cesium";
+import { GUI } from "dat.gui";
+// 1. 辅助类型：判断是否为“非基础类型的纯对象”（排除数组、日期等）
+type IsPlainObject<T> = T extends null | undefined | string | number | boolean | symbol | bigint | Date | Array<any>
+    ? false
+    : T extends object
+    ? true
+    : false;
+// 2. 辅助类型：提取 T 的所有“带路径属性名”（支持1-2层嵌套，匹配 A 的结构）
+export type ParamPath<T, K extends keyof T = keyof T> = K extends string
+    ? IsPlainObject<T[K]> extends true
+    ? `${K}.${ParamPath<T[K]>}`
+    : K
+    : never;
+export interface GUICtrParam<T> {
+    /**此调试项的名称 */
+    name: string,
+    /**被控制的属性名(可通过 . 获取更深层级) */
+    param: ParamPath<T>,
+    /**选项数据(增设选择项) */
+    items?: Object,
+    /**颜色采样(增设颜色配置) */
+    ifColor?: boolean,
+    /**数值设置 [最小值,最大值,单步大小] */
+    ifNums?: [number | undefined, number | undefined, number | undefined]
+    /**点击回调 */
+    callback?: Function
+    /**是否监听 */
+    listen?: boolean,
+    /**变更回调事件 */
+    change?: Function
+}
+/**页面调试控件类 */
+export class Gui {
+    private static gui: GUI = undefined //: new GUI({ width: 320, });
+    /**已经添加的控制 */
+    private static folders: {} = {};
+    /**添加GUI文件夹控制
+     * @param obj 要控制的对象
+     * @param name 文件夹名称
+     * @param ctrs 控制属性组
+     */
+    public static on<T>(obj: T, name: string, ctrs: GUICtrParam<T>[]) {
+        if (!this.gui) return;
+        let floder = this.folders[name] = this.folders[name] || this.gui.addFolder(`${name}`);
+        for (let i = 0, len = ctrs.length; i < len; i++) {
+            const { name, param, listen, ifColor, ifNums, ifNums: [min, max, step] = [], callback, items, change } = ctrs[i];
+            let data = obj, ctr;
+            let parmas = param.split('.') || [], last = parmas[parmas.length - 1];
+            for (let i = 0, len = parmas.length - 1; i < len; i++) {
+                data = data[parmas[i]];
+            }
+            if (ifColor) {
+                const info = data[last];
+                if (info instanceof Color) {
+                    // let obj = { color: info.getHex() };
+                    // ctr = floder.addColor(obj, 'color')
+                    // ctr.onChange(e => {
+                    //     info.setHex(e)
+                    // })
+                } else {
+                    ctr = floder.addColor(obj, last)
+                }
+            }
+            if (callback) ctr = floder.add({ [last]: callback }, last)
+            else if (ifNums) ctr = floder.add(data, last).step(step).min(min).max(max)
+            else ctr = floder.add(data, last, items)
+            if (listen) ctr.listen();
+            if (change) ctr.onChange(change);
+            ctr.name(name)
+        }
+    }
+    /**添加基础控制位置和旋转
+     * @param obj 要控制的对象
+     * @param name 文件夹名称
+     */
+    public static onGuiFolderBase(mesh: any, name: string, min: number = -100, max: number = 100) {
+        if (!this.gui) return;
+        let floder = this.folders[name] = this.folders[name] || this.gui.addFolder(`${name}`);
+        floder.add(mesh.position, 'x').step(0.001).min(min).max(max).name('positionX').listen()
+        floder.add(mesh.position, 'y').step(0.001).min(min).max(max).name('positionY').listen()
+        floder.add(mesh.position, 'z').step(0.001).min(min).max(max).name('positionZ').listen()
+        floder.add(mesh.rotation, 'x').step(0.001).min(- 5).max(5).name('rotationX').listen()
+        floder.add(mesh.rotation, 'y').step(0.001).min(- 5).max(5).name('rotationY').listen()
+        floder.add(mesh.rotation, 'z').step(0.001).min(- 5).max(5).name('rotationZ').listen()
+    }
+
+}

package/src/core/scene/camera.ts

@@ -0,0 +1,211 @@
+/**相机的控制 */
+/**视图控制模块 */
+import { BoundingSphere, Camera, Cartesian3, Cartographic, ClassificationPrimitive, DirectionUp, EasingFunction, Event, HeadingPitchRange, Matrix4, Rectangle, Viewer, getImagePixels } from "cesium";
+import { CMath, uc_getCartesian3 } from "../../utils";
+import { CEvent, SLCViewer } from "../viewer";
+import * as Cesium from 'cesium'
+
+const RESULT_CARTESIAN3: Cartesian3 = new Cartesian3()
+export class CCamera {
+    constructor(cviewer: SLCViewer) {
+        this.cviewer = cviewer;
+        this.camera = cviewer.viewer.scene.camera;
+        this.camera.percentageChanged = 0;
+        // this.onToggleCtr()
+        this.addEventListener()
+        this.openListenter()
+    }
+    private readonly cviewer: SLCViewer;
+    /**计算像素距离 */
+    private readonly sphere: BoundingSphere = new BoundingSphere();
+    /**原始相机 */
+    public readonly camera: Camera;
+    /**相机的控制模式(鼠标控制) */
+    private ctrMouse: boolean = true;
+    /**相机的目标位置 */
+    private target: Cartesian3 = new Cartesian3()
+    /**相机的位置 */
+    public get position(): Cartesian3 {
+        return this.camera.position
+    }
+    /**获取指定经纬度单位像素的大小(米) */
+    public getPixelSize(lntlat: LnglatHeight) {
+        const { camera, sphere, cviewer: { celement: { width, height } } } = this;
+        sphere.center = uc_getCartesian3(lntlat, RESULT_CARTESIAN3)
+        return camera.getPixelSize(sphere, width, height);
+    }
+    /**获取相机到指定位置的距离
+     * @param position 目标位置 LnglatHeight | Cartesian3
+     */
+    public getDistance(position: LnglatHeight | Cartesian3) {
+        const { camera, sphere, cviewer: { celement: { width, height } } } = this;
+        if (position instanceof Cartesian3) {
+            Cartesian3.clone(position, RESULT_CARTESIAN3);
+        } else {
+            uc_getCartesian3(position, RESULT_CARTESIAN3)
+        }
+        sphere.center = RESULT_CARTESIAN3;
+        return camera.distanceToBoundingSphere(sphere);
+    }
+    /**获取相机高度 */
+    public getHeight() {
+        const { camera } = this;
+        const cartographic = Cartographic.fromCartesian(camera.position);
+        return cartographic.height;
+    }
+
+    /**相机锁定并切换到目标位置 
+     * @param lnglat 目标经纬度
+     * @param offset 偏移量或偏航、俯仰、距离
+     * @param lock 是否锁定  true
+    */
+    public lookAt(lnglat: LnglatHeight, offset?: Cartesian3 | HeadingPitchRange, flag: boolean = true) {
+        const { target } = this;
+        uc_getCartesian3(lnglat, target)
+        this.camera.lookAt(target, offset || {
+            /** 相机自身扭转弧度*/
+            heading: CMath.toRadians(0),
+            /** 相机上下角度 */
+            pitch: CMath.toRadians(-15),
+            /**相机到规定点位距离 */
+            range: 100
+        })
+        if (!flag) this.unlock();
+    }
+    /**移除loockAt导致的锁定*/
+    public unlock() {
+        this.camera.lookAtTransform(Matrix4.IDENTITY);
+    }
+
+    /**切换相机的控制权[鼠标-键盘] */
+    public onToggleCtr() {
+        const ifMouse = this.ctrMouse = !this.ctrMouse;
+        const { cviewer: { viewer: { scene: { screenSpaceCameraController } } } } = this;
+        /**允许鼠标控制平移 */
+        screenSpaceCameraController.enableTranslate = ifMouse;
+        /**允许鼠标控制倾斜 */
+        screenSpaceCameraController.enableTilt = ifMouse;
+    }
+    /**相机单步跨度 */
+    public setStep: number = 1;
+    /**添加监听，变换为常用 */
+    private addEventListener() {
+        const { camera, cviewer } = this
+        camera.moveStart.addEventListener(() => {
+            cviewer.trigger('CAMERA_MOVESTART')
+            cviewer.trigger('CAMERA_CHANGED')
+        })
+        camera.moveEnd.addEventListener(() => {
+            cviewer.trigger('CAMERA_MOVEEND')
+            cviewer.trigger('CAMERA_CHANGED')
+        })
+        camera.changed.addEventListener(() => {
+            cviewer.trigger('CAMERA_CHANGED')
+        })
+    }
+    /**开启监听
+     * ctrMouse=false时监听相机的键盘操作
+     */
+    private openListenter() {
+        const { cviewer } = this;
+        cviewer.on('TICK', () => this.ctrCameraByKeyboard());
+        /**距离目标过远时解除锁定 */
+        cviewer.on('CAMERA_CHANGED', () => {
+            const distance = this.getDistance(this.target)
+            if (distance > 5000) this.unlock();
+        })
+    }
+    /**键盘控制相机方法 ctrMouse=false 时激活 */
+    private ctrCameraByKeyboard() {
+        if (this.ctrMouse) return
+        const { camera, setStep, cviewer: { scene: { globe: { ellipsoid } }, celement: { keyStates } } } = this;
+        // 相机位置操控（IJKLUO控制相机移动）
+        // W - 向上俯仰 S - 向下俯仰 A - 向左偏航 D - 向右偏航 Q - 向左翻滚 E键 - 向右翻滚
+        // I - 向前移动  K - 向后移动  J - 向左移动  L - 向右移动  U - 向上移动  O键 - 向下移动
+        const { KeyW, KeyS, KeyA, KeyD, KeyQ, KeyE, KeyI, KeyK, KeyJ, KeyL, KeyU, KeyO, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Digit0, Digit1, Digit2, Digit3 } = keyStates;
+        /**获取相机高度 */
+        const cameraHeight = Cartographic.fromCartesian(camera.position).height;
+        /**根据高度动态调整移动速率 */
+        const moveRate = (cameraHeight / 180) * setStep;
+        if (KeyA) {
+            this.hprSetting(-0.005 * setStep, 0, 0);
+        }
+        if (KeyD) {
+            this.hprSetting(0.005 * setStep, 0, 0);
+        }
+        if (KeyW) {
+            this.hprSetting(0, 0.01 * setStep, 0);
+        }
+        if (KeyS) {
+            this.hprSetting(0, -0.01 * setStep, 0);
+        }
+        if (KeyQ) {
+            this.hprSetting(0, 0, 0.01 * setStep);
+        }
+        if (KeyE) {
+            this.hprSetting(0, 0, -0.01 * setStep);
+        }
+        // （zoomIn与moveForward效果相同）
+        if (KeyI) {
+            camera.zoomIn(moveRate);
+            // camera.moveForward(moveRate);
+        }
+        // （zoomOut与moveBackward效果相同）
+        if (KeyK) {
+            camera.zoomOut(moveRate);
+            // camera.moveBackward(moveRate);
+        }
+        if (KeyU) {
+            camera.moveUp(moveRate);
+        }
+        if (KeyO) {
+            camera.moveDown(moveRate);
+        }
+        if (KeyJ) {
+            camera.moveLeft(moveRate);
+        }
+        if (KeyL) {
+            camera.moveRight(moveRate);
+        }
+        if (Digit0) {
+            camera.lookUp(Cesium.Math.toRadians(setStep))
+        }
+        if (Digit1) {
+            camera.lookDown(Cesium.Math.toRadians(setStep))
+        }
+        if (Digit2) {
+            camera.lookLeft(Cesium.Math.toRadians(setStep))
+        }
+        if (Digit3) {
+            camera.lookRight(Cesium.Math.toRadians(setStep))
+        }
+        if (ArrowUp) {
+            camera.rotateDown(Cesium.Math.toRadians(setStep))
+        }
+        if (ArrowDown) {
+            camera.rotateUp(Cesium.Math.toRadians(setStep))
+        }
+        if (ArrowLeft) {
+            camera.rotateLeft(Cesium.Math.toRadians(setStep))
+        }
+        if (ArrowRight) {
+            camera.rotateRight(Cesium.Math.toRadians(setStep))
+        }
+    }
+
+    /**相机姿态设置方法
+    * @param {number} h - 偏航角调整量
+    * @param {number} p - 俯仰角调整量
+    * @param {number} r - 翻滚角调整量
+    */
+    private hprSetting(h, p, r) {
+        const { camera } = this, { heading, pitch, roll } = camera
+        camera.setView({
+            orientation: {
+                heading: heading + h,  // 偏航角
+                pitch: pitch + p,      // 俯仰角
+                roll: roll + r,        // 翻滚角
+            },
+        });
+    }
+}

package/src/core/scene/globe.ts

@@ -0,0 +1,33 @@
+import { Globe } from "cesium";
+/**地球 
+ * 1、可以调用方法对地球表面地图的着色器进行修改
+*/
+export class CGlobe {
+    constructor(globe: Globe) {
+        this.globe = globe;
+        globe.enableLighting = true
+        globe.maximumScreenSpaceError = 1.0
+    }
+    public readonly globe: Globe;
+    /**获取地图影像图层 */
+    get imageryLayer() {
+        return this.globe.imageryLayers.get(0);
+    }
+    /**获取片元着色器代码 */
+    get fragmentShader(): string[] {
+        return this.globe['_surfaceShaderSet'].baseFragmentShaderSource.sources;
+    }
+    /**修改地图图层的颜色
+     * @param shader 片源着色器语言 color
+     */
+    public setLayerShader(shader: string) {
+        const fragmentShader = this.fragmentShader;
+        for (let i = 0; i < fragmentShader.length; i++) {
+            let element = fragmentShader[i], point = `color = czm_saturation(color, textureSaturation);\n#endif\n`;
+            /**颜色翻转 `color.r=1.0-color.r;\ncolor.g=1.0-color.g;\ncolor.b=1.0-color.b;\n`*/
+            /**颜色进行指定变换 `color.r=color.r*55.0/255.0;\ncolor.g=color.g*55.0/255.0;\ncolor.b=color.b*55.0/255.0;\n`*/
+            fragmentShader[i] = element.replace(point, point + shader);
+        }
+    }
+
+}

package/src/core/scene/index.ts

@@ -0,0 +1,5 @@
+export * from './camera'
+export * from './globe'
+export * from './layers'
+export * from './primitives'
+export * from './scene'