leiting-bim 2.2.15 → 2.2.16

package/skybox/long_text_4E0781D6-58CB-4AD9-9079-ABA999E80B79.txt

@@ -0,0 +1,637 @@
+<template>
+  <div class="gis-panel">
+    <!-- 顶部标题栏 -->
+    <div class="panel-header">
+      <div class="header-left">
+        <span class="header-icon">🌌</span>
+        <span class="header-title-text">自定义天空盒</span>
+      </div>
+      <div class="header-center"></div>
+      <div class="header-right">
+        <div class="header-status">
+            <span class="status-dot" :class="{ ready: isReady }"></span>
+            {{ isReady ? '就绪' : '初始化...' }}
+        </div>
+      </div>
+    </div>
+
+    <div class="panel-body">
+      <!-- 近景天空盒选择 -->
+      <div class="control-section">
+        <div class="section-label">近景天空盒</div>
+        <div class="btn-grid near-grid">
+          <button
+            v-for="(item, index) in nearSkyBoxes"
+            :key="index"
+            class="custom-btn"
+            :class="{ active: currentNearIndex === index }"
+            @click="changeNearSkyBox(index)"
+          >
+            {{ item.name }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 视角控制 -->
+      <div class="control-section">
+        <div class="section-label">视角控制</div>
+        <div class="btn-grid">
+           <button class="custom-btn primary" @click="flyToHome">🚀 远景视角</button>
+           <button class="custom-btn primary" @click="saveCurrentView">💾 保存视角</button>
+        </div>
+      </div>
+
+      <!-- 当前状态信息 -->
+      <div class="control-section">
+         <div class="section-label">当前状态</div>
+         <div class="info-text">
+            当前显示: {{ currentSkyBoxName }}
+         </div>
+         <div class="info-text">
+            高度: {{ currentHeight.toFixed(0) }} 米
+         </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+
+const isReady = ref(false);
+const currentNearIndex = ref(0);
+const currentHeight = ref(0);
+const activeSkyBoxType = ref('far');
+
+// 默认近景天空盒配置（路径对应 lowCodeTheme/img/skybox/021~025，确认存在）
+const defaultConfig = {
+    nearList: [
+        { name: '近景1', path: './lowCodeTheme/img/skybox/021', ext: 'jpg' },
+        { name: '近景2', path: './lowCodeTheme/img/skybox/022', ext: 'jpg' },
+        { name: '近景3', path: './lowCodeTheme/img/skybox/023', ext: 'jpg' },
+        { name: '近景4', path: './lowCodeTheme/img/skybox/024', ext: 'jpg' },
+        { name: '近景5', path: './lowCodeTheme/img/skybox/025', ext: 'jpg' },
+    ]
+};
+
+// 直接使用注入的 props，不再 defineProps
+const nearSkyBoxes = computed(() => props.nearList || defaultConfig.nearList);
+
+const currentSkyBoxName = computed(() => {
+    if (activeSkyBoxType.value === 'far') return '远景天空盒';
+    const item = nearSkyBoxes.value[currentNearIndex.value];
+    return item ? item.name : '未知';
+});
+
+let viewer = null;
+let originalSkyBox = null;
+let originalSkyAtmosphereShow = true;
+let originalCaptured = false;
+let nearSkyBoxInstances = [];
+let renderHandler = null;
+
+// 根据基础路径和扩展名生成六面贴图路径
+const getSources = (basePath, ext) => {
+    return {
+        positiveX: `${basePath}/px.${ext}`,
+        negativeX: `${basePath}/nx.${ext}`,
+        positiveY: `${basePath}/py.${ext}`,
+        negativeY: `${basePath}/ny.${ext}`,
+        positiveZ: `${basePath}/pz.${ext}`,
+        negativeZ: `${basePath}/nz.${ext}`
+    };
+};
+
+// 初始化 GroundSkyBox 类
+// 所有已从 Cesium 命名空间移除的工具函数用原生 JS 替代，避免版本兼容问题
+const initGroundSkyBoxClass = (Cesium) => {
+    if (!Cesium || Cesium.GroundSkyBox) return;
+
+    const BoxGeometry = Cesium.BoxGeometry;
+    const Cartesian3 = Cesium.Cartesian3;
+    const Matrix3 = Cesium.Matrix3;
+    const Matrix4 = Cesium.Matrix4;
+    const Transforms = Cesium.Transforms;
+    const VertexFormat = Cesium.VertexFormat;
+    const CubeMap = Cesium.CubeMap;
+    const DrawCommand = Cesium.DrawCommand;
+    const loadCubeMap = Cesium.loadCubeMap;
+    const RenderState = Cesium.RenderState;
+    const VertexArray = Cesium.VertexArray;
+    const BlendingState = Cesium.BlendingState;
+    const SceneMode = Cesium.SceneMode;
+    const ShaderProgram = Cesium.ShaderProgram;
+    const ShaderSource = Cesium.ShaderSource;
+    const GeometryPipeline = Cesium.GeometryPipeline;
+    const BufferUsage = Cesium.BufferUsage;
+
+    // 原生 JS 替代已从 Cesium 移除的工具函数
+    const defaultValue = (a, b) => (a !== undefined && a !== null) ? a : b;
+    const defined = (x) => x !== undefined && x !== null;
+    const destroyObject = (obj) => { obj.isDestroyed = () => true; return obj; };
+
+    const SkyBoxFS =
+        '#version 300 es\n' +
+        'uniform samplerCube u_cubeMap;\n' +
+        'in vec3 v_texCoord;\n' +
+        'out vec4 fragColor;\n' +
+        'void main()\n{\n' +
+        '  vec4 color = texture(u_cubeMap, normalize(v_texCoord));\n' +
+        '  fragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);\n' +
+        '}\n';
+
+    const SkyBoxVS =
+        '#version 300 es\n' +
+        'in vec3 position;\n' +
+        'out vec3 v_texCoord;\n' +
+        'uniform mat3 u_rotateMatrix;\n' +
+        'void main()\n{\n' +
+        '  vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));\n' +
+        '  gl_Position = czm_projection * vec4(p, 1.0);\n' +
+        '  v_texCoord = position.xyz;\n' +
+        '}\n';
+
+    // 兼容 Matrix4.getRotation 在新版 Cesium 中被移除的情况
+    if (typeof Matrix4.getRotation !== 'function') {
+        Matrix4.getRotation = Matrix4.getMatrix3;
+    }
+
+    function SkyBoxOnGround(options) {
+        this.sources = options.sources;
+        this._sources = undefined;
+        this.show = defaultValue(options.show, true);
+        this._command = new DrawCommand({
+            modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
+            owner: this,
+        });
+        this._cubeMap = undefined;
+        this._attributeLocations = undefined;
+        this._useHdr = undefined;
+    }
+
+    const skyboxMatrix3 = new Matrix3();
+    SkyBoxOnGround.prototype.update = function (frameState, useHdr) {
+        const that = this;
+        if (!this.show) return undefined;
+        if (frameState.mode !== SceneMode.SCENE3D && frameState.mode !== SceneMode.MORPHING) {
+            return undefined;
+        }
+        if (!frameState.passes.render) return undefined;
+
+        const context = frameState.context;
+        if (this._sources !== this.sources) {
+            this._sources = this.sources;
+            const sources = this.sources;
+            if (
+                !defined(sources.positiveX) ||
+                !defined(sources.negativeX) ||
+                !defined(sources.positiveY) ||
+                !defined(sources.negativeY) ||
+                !defined(sources.positiveZ) ||
+                !defined(sources.negativeZ)
+            ) {
+                throw new Error(
+                    'this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.',
+                );
+            }
+
+            if (typeof sources.positiveX === 'string') {
+                loadCubeMap(context, this._sources).then(function (cubeMap) {
+                    that._cubeMap = that._cubeMap && that._cubeMap.destroy();
+                    that._cubeMap = cubeMap;
+                });
+            } else {
+                this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+                this._cubeMap = new CubeMap({
+                    context: context,
+                    source: sources,
+                });
+            }
+        }
+
+        const command = this._command;
+        // 关键：每帧更新 modelMatrix 为相机位置的 ENU 变换，使天空盒跟随地表方向不歪斜
+        command.modelMatrix = Transforms.eastNorthUpToFixedFrame(frameState.camera._positionWC);
+        if (!defined(command.vertexArray)) {
+            command.uniformMap = {
+                u_cubeMap: function () {
+                    return that._cubeMap;
+                },
+                u_rotateMatrix: function () {
+                    return Matrix4.getRotation(command.modelMatrix, skyboxMatrix3);
+                },
+            };
+
+            const geometry = BoxGeometry.createGeometry(
+                BoxGeometry.fromDimensions({
+                    dimensions: new Cartesian3(2.0, 2.0, 2.0),
+                    vertexFormat: VertexFormat.POSITION_ONLY,
+                }),
+            );
+            const attributeLocations = (this._attributeLocations =
+                GeometryPipeline.createAttributeLocations(geometry));
+
+            command.vertexArray = VertexArray.fromGeometry({
+                context: context,
+                geometry: geometry,
+                attributeLocations: attributeLocations,
+                bufferUsage: BufferUsage._DRAW,
+            });
+
+            command.renderState = RenderState.fromCache({
+                blending: BlendingState.ALPHA_BLEND,
+            });
+        }
+
+        if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {
+            const fs = new ShaderSource({
+                defines: [useHdr ? 'HDR' : ''],
+                sources: [SkyBoxFS],
+            });
+            command.shaderProgram = ShaderProgram.fromCache({
+                context: context,
+                vertexShaderSource: SkyBoxVS,
+                fragmentShaderSource: fs,
+                attributeLocations: this._attributeLocations,
+            });
+            this._useHdr = useHdr;
+        }
+
+        if (!defined(this._cubeMap)) return undefined;
+        return command;
+    };
+    SkyBoxOnGround.prototype.isDestroyed = function () {
+        return false;
+    };
+    SkyBoxOnGround.prototype.destroy = function () {
+        const command = this._command;
+        command.vertexArray = command.vertexArray && command.vertexArray.destroy();
+        command.shaderProgram = command.shaderProgram && command.shaderProgram.destroy();
+        this._cubeMap = this._cubeMap && this._cubeMap.destroy();
+        return destroyObject(this);
+    };
+
+    Cesium.GroundSkyBox = SkyBoxOnGround;
+};
+
+// 初始化天空盒
+const initSkyBox = () => {
+    const Cesium = window.Cesium;
+    viewer = window.viewer || (window.map ? window.map.viewer : null);
+    if (!viewer || !Cesium) return;
+
+    // 初始化 GroundSkyBox 类
+    initGroundSkyBoxClass(Cesium);
+    if (!Cesium.GroundSkyBox) return;
+
+    // 保存原始天空盒状态
+    if (!originalCaptured) {
+        originalSkyBox = viewer.scene.skyBox;
+        originalSkyAtmosphereShow = viewer.scene.skyAtmosphere
+            ? viewer.scene.skyAtmosphere.show
+            : true;
+        originalCaptured = true;
+    }
+
+    // 创建所有近景天空盒实例（使用 GroundSkyBox）
+    nearSkyBoxInstances = nearSkyBoxes.value.map(item => {
+        return new Cesium.GroundSkyBox({
+            sources: getSources(item.path, item.ext)
+        });
+    });
+
+    // 监听渲染帧，根据相机高度自动切换远近天空盒
+    renderHandler = viewer.scene.postRender.addEventListener(() => {
+        const p = viewer.camera.position;
+        const height = Cesium.Cartographic.fromCartesian(p).height;
+        currentHeight.value = height;
+
+        if (height < 2500) {
+            if (activeSkyBoxType.value !== 'near') {
+                activeSkyBoxType.value = 'near';
+                updateSkyBox();
+            }
+        } else {
+            if (activeSkyBoxType.value !== 'far') {
+                activeSkyBoxType.value = 'far';
+                updateSkyBox();
+            }
+        }
+    });
+
+    isReady.value = true;
+};
+
+// 切换当前显示的天空盒
+const updateSkyBox = () => {
+    if (!viewer) return;
+    if (activeSkyBoxType.value === 'near') {
+        const skybox = nearSkyBoxInstances[currentNearIndex.value];
+        if (skybox) {
+            viewer.scene.skyBox = skybox;
+            if (viewer.scene.skyAtmosphere) viewer.scene.skyAtmosphere.show = false;
+        }
+    } else {
+        // 恢复远景天空盒
+        if (originalSkyBox) {
+            viewer.scene.skyBox = originalSkyBox;
+        }
+        if (viewer.scene.skyAtmosphere) viewer.scene.skyAtmosphere.show = originalSkyAtmosphereShow;
+    }
+};
+
+// 切换近景天空盒
+const changeNearSkyBox = (index) => {
+    currentNearIndex.value = index;
+    if (activeSkyBoxType.value === 'near') {
+        updateSkyBox();
+    } else {
+        // 尝试飞向保存的视角，如果没有则飞向默认地面
+        if (!flyToSavedView()) {
+            flyToGround();
+        }
+    }
+};
+
+// 飞向地面（触发近景天空盒）
+const flyToGround = () => {
+    const Cesium = window.Cesium;
+    if (!Cesium) return;
+
+    const rawDest = new Cesium.Cartesian3(
+        -1573556.399109955,
+        5327839.961767385,
+        3123210.094581469
+    );
+    const carto = Cesium.Cartographic.fromCartesian(rawDest);
+    carto.height = 1200;
+
+    const destination = Cesium.Cartesian3.fromRadians(carto.longitude, carto.latitude, carto.height);
+
+    const flyToOpts = {
+        destination: destination,
+        orientation: {
+            heading: 2.8892116353659993,
+            pitch: -0.20,
+            roll: 0.000723327810702834
+        }
+    };
+    if (viewer) {
+        viewer.scene.camera.flyTo(flyToOpts);
+    }
+};
+
+// 飞向远景视角
+const flyToHome = () => {
+    const flyToOpts = {
+        destination: {
+            x: -45802988.9566341,
+            y: -41512897.1313383,
+            z: 42860387.48041018
+        },
+        orientation: {
+            heading: 1.2536256744910776,
+            pitch: -1.49857771791951,
+            roll: 0.03727351623405806
+        }
+    };
+    if (viewer) {
+        viewer.scene.camera.flyTo(flyToOpts);
+    }
+};
+
+// 保存当前视角
+const saveCurrentView = () => {
+    if (!viewer) return;
+    const camera = viewer.camera;
+    const position = camera.position;
+    const heading = camera.heading;
+    const pitch = camera.pitch;
+    const roll = camera.roll;
+
+    const savedView = {
+        destination: {
+            x: position.x,
+            y: position.y,
+            z: position.z
+        },
+        orientation: {
+            heading,
+            pitch,
+            roll
+        }
+    };
+
+    if (typeof updateProps === 'function') {
+        updateProps({ savedView });
+    }
+};
+
+// 飞向已保存的视角
+const flyToSavedView = () => {
+    if (!props || !props.savedView) return false;
+    const view = props.savedView;
+    const Cesium = window.Cesium;
+
+    let destination = view.destination;
+    if (destination && typeof destination.x === 'number') {
+        if (Cesium) {
+            destination = new Cesium.Cartesian3(destination.x, destination.y, destination.z);
+        }
+    }
+
+    if (!destination) return false;
+
+    if (viewer) {
+        viewer.camera.flyTo({
+            destination: destination,
+            orientation: view.orientation,
+            duration: 1.5
+        });
+        return true;
+    }
+    return false;
+};
+
+onMounted(() => {
+    const timer = setInterval(() => {
+        if (window.viewer || (window.map && window.map.viewer)) {
+            clearInterval(timer);
+            initSkyBox();
+            flyToSavedView();
+        }
+    }, 100);
+});
+
+onUnmounted(() => {
+    // 移除渲染监听
+    if (renderHandler) {
+        renderHandler();
+        renderHandler = null;
+    }
+
+    // 恢复远景天空盒
+    if (viewer && originalCaptured) {
+        if (originalSkyBox) {
+            viewer.scene.skyBox = originalSkyBox;
+        }
+        if (viewer.scene.skyAtmosphere) {
+            viewer.scene.skyAtmosphere.show = originalSkyAtmosphereShow;
+        }
+    }
+
+    // 销毁近景天空盒实例
+    if (nearSkyBoxInstances && nearSkyBoxInstances.length > 0) {
+        nearSkyBoxInstances.forEach(instance => {
+            if (instance && !instance.isDestroyed()) {
+                instance.destroy();
+            }
+        });
+        nearSkyBoxInstances = [];
+    }
+});
+</script>
+
+<style scoped>
+.gis-panel {
+  width: 100%;
+  height: 100%;
+  background: rgba(4, 28, 44, 0.9);
+  backdrop-filter: blur(8px);
+  color: #fff;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: "Microsoft YaHei", sans-serif;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.panel-header {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  background: linear-gradient(90deg, rgba(20, 50, 80, 0.8), rgba(4, 28, 44, 0.2));
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  justify-content: space-between;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.header-title-text {
+  font-size: 16px;
+  font-weight: bold;
+  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+}
+
+.header-center {
+  flex: 1;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-status {
+  font-size: 12px;
+  color: #aaa;
+  display: flex;
+  align-items: center;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #f00;
+  border-radius: 50%;
+  margin-right: 6px;
+  transition: all 0.3s;
+}
+
+.status-dot.ready {
+  background: #0f0;
+  box-shadow: 0 0 8px #0f0;
+}
+
+.panel-body {
+  flex: 1;
+  padding: 12px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.control-section {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.section-label {
+  font-size: 12px;
+  color: #8db6cd;
+  margin-bottom: 8px;
+  font-weight: bold;
+  border-left: 2px solid #00e5ff;
+  padding-left: 6px;
+}
+
+.btn-grid {
+  display: grid;
+  gap: 8px;
+}
+
+.btn-grid.near-grid {
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  max-height: 140px;
+  overflow-y: auto;
+  align-content: start;
+}
+
+.custom-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  padding: 6px 0;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 12px;
+}
+
+.custom-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.custom-btn.active {
+  background: rgba(0, 229, 255, 0.2);
+  border-color: rgba(0, 229, 255, 0.6);
+  color: #00e5ff;
+  box-shadow: 0 0 8px rgba(0, 229, 255, 0.2) inset;
+}
+
+.custom-btn.primary {
+  grid-column: span 3;
+  background: rgba(0, 119, 255, 0.4);
+  border-color: rgba(0, 119, 255, 0.6);
+}
+
+.info-text {
+  font-size: 12px;
+  color: #ccc;
+  margin-top: 4px;
+}
+</style>