02-Cesium加载gltf模型

1.js中class类中的#代表类内部私有方法

在 JavaScript 中，类方法名以 # 开头表示这些方法是私有方法。这是 ECMAScript 的一个新特性，称为“私有字段”（Private Fields）。私有字段只能在类的内部访问，不能在类的外部访问，从而增强了封装性和安全性。

class MyClass {
    #privateMethod() {
        // 私有方法的实现
    }

    publicMethod() {
        // 可以在类的内部调用私有方法
        this.#privateMethod();
    }
}

2.Cesium加载gltf

• constructor：类的构造函数，初始化模型的各种属性。
• createFeature：创建并添加模型实体到 Cesium 视图中。
• remove：删除模型实体。
• setHeadingPitchRoll：设置模型的旋转角度。
• locate：定位到模型的位置。
• setClippingPlane：根据两个点设置模型的裁剪平面。

通过这些方法，你可以方便地加载、管理、旋转和裁剪 GLTF 模型。希望这对你理解代码有所帮助！如果有其他具体的问题或需求，请随时提出。

class LoaderGltf {
    /**
     * 加载gltf模型
     * @param {Object} options 
     * @param {Number} options.lon 经度 
     * @param {Number} options.lat 纬度 
     * @param {Number} [options.height=0] 高度 
     * @param {String} options.url 模型地址 
     * @param {Number} [options.scale = 1] 缩放倍数
     * @param {Object} [options.rotation = {heading:0,pitch:0,roll:0}] 旋转  Heading：绕y轴转;Pitch：绕x轴转;Roll：绕z轴转
     */
    constructor(options = {}, map) {
        this.url = options.url;
        this.lon = options.lon;
        this.lat = options.lat;
        this.height = options.height || 0;
        this.scale = options.scale || 1;
        this.headingPitchRoll = options.headingPitchRoll || { heading: 0, pitch: 0, roll: 0 };
        this.map = map;
        this.clippingPlanePoint = [];
        this.id = options.id || Cesium.createGuid();
        this.createFeature();
    }
    /**
     * 加载模型
     */
    createFeature() {
        let headingPitchRoll = this.headingPitchRoll;
        let position = Cesium.Cartesian3.fromDegrees(this.lon, this.lat, this.height);

        let entity = new Cesium.Entity({
            id: this.id,
            position: position,
            orientation: Cesium.Transforms.headingPitchRollQuaternion(
                position,
                new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(headingPitchRoll.heading),
                    Cesium.Math.toRadians(headingPitchRoll.pitch),
                    Cesium.Math.toRadians(headingPitchRoll.roll)
                )
            ),
            model: {
                uri: this.url,
                scale: this.scale,
                maximumScale: this.scale
            }
        });
        this.map.viewer.entities.add(entity);
        this.feature = entity;
    }
    /**
     * 删除元素
     */
    remove() {
        this.map.viewer.entities.removeById(this.id);
    }
    /**
     * 设置旋转角度
     * @param {*} headingPitchRoll 
     */
    setHeadingPitchRoll(headingPitchRoll) {
        if (headingPitchRoll) {
            this.headingPitchRoll = headingPitchRoll;
            let position = Cesium.Cartesian3.fromDegrees(this.lon, this.lat, this.height);
            let hpr = Cesium.Transforms.headingPitchRollQuaternion(
                position,
                new Cesium.HeadingPitchRoll(
                    Cesium.Math.toRadians(this.headingPitchRoll.heading),
                    Cesium.Math.toRadians(this.headingPitchRoll.pitch),
                    Cesium.Math.toRadians(this.headingPitchRoll.roll)
                )
            );
            this.feature.orientation.setValue(hpr)
            this.setClippingPlane(this.clippingPlanePoints);
        }
    }
    /**
     * 定位到模型位置
     */
    locate() {
        this.map.viewer.zoomTo(this.feature);
    }
    /**
     * 两个点裁剪模型
     * @param {Array<[lon,lat]>} points 
     */
    setClippingPlane(points = []) {
        this.clippingPlanePoints = points;
        if(points.length>1){
            let position = Cesium.Cartesian3.fromDegrees(this.lon, this.lat, this.height);
            let hpr = new Cesium.HeadingPitchRoll(
                Cesium.Math.toRadians(this.headingPitchRoll.heading),
                Cesium.Math.toRadians(this.headingPitchRoll.pitch),
                Cesium.Math.toRadians(this.headingPitchRoll.roll)
            );
            let inverseTransform = Cesium.Transforms.headingPitchRollToFixedFrame(position, hpr);
            inverseTransform = Cesium.Matrix4.inverseTransformation(inverseTransform,new Cesium.Matrix4());

            const p1C3 = this.#getOriginCoordinateSystemPoint(points[0], inverseTransform)
            const p2C3 = this.#getOriginCoordinateSystemPoint(points[1], inverseTransform)

            // 定义一个垂直向下的向量up
            const up = new Cesium.Cartesian3(0, 0, -10)
            //  right 实际上就是由p1指向p2的向量
            const right = Cesium.Cartesian3.subtract(p2C3, p1C3, new Cesium.Cartesian3())

            // 计算normal， right叉乘up，得到平面法向量，这个法向量指向right的右侧
            let normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3())
            normal = Cesium.Cartesian3.normalize(normal, normal)

            // 由于已经获得了法向量和过平面的一点，因此可以直接构造Plane,并进一步构造ClippingPlane
            const planeTmp = Cesium.Plane.fromPointNormal(p1C3, normal)
            let clippingPlanes = Cesium.ClippingPlane.fromPlane(planeTmp)
            this.feature.model.clippingPlanes = new Cesium.ClippingPlaneCollection({
                planes:[clippingPlanes]
            });
        }else{
            this.feature.model.clippingPlanes = undefined;
        }
    }

    #getOriginCoordinateSystemPoint(point, inverseTransform) {
        const val = Cesium.Cartesian3.fromDegrees(point[0], point[1])
        return Cesium.Matrix4.multiplyByPoint(
            inverseTransform, val, new Cesium.Cartesian3(0, 0, 0))
    }
}

export default LoaderGltf;