|
@@ -1,66 +1,63 @@
|
|
|
-
|
|
|
|
|
// 引入依赖
|
|
// 引入依赖
|
|
|
import { watch, ref, reactive, toRefs, onBeforeUnmount, onMounted } from "vue";
|
|
import { watch, ref, reactive, toRefs, onBeforeUnmount, onMounted } from "vue";
|
|
|
-import { storeState } from '../../../js/store/store.js' //简单局部状态管理
|
|
|
|
|
-import tool from '../../../js/tool/tool.js' //提示等工具
|
|
|
|
|
-import resource from '../../../js/local/lang.js' //语言资源
|
|
|
|
|
|
|
+import { storeState } from '../../../js/store/store.js'
|
|
|
|
|
+import tool from '../../../js/tool/tool.js'
|
|
|
|
|
+import resource from '../../../js/local/lang.js'
|
|
|
|
|
|
|
|
function s3mlayerAttribute(props) {
|
|
function s3mlayerAttribute(props) {
|
|
|
|
|
+ let viewer = window.viewer;
|
|
|
|
|
|
|
|
- // 设置默认值数据
|
|
|
|
|
let state = reactive({
|
|
let state = reactive({
|
|
|
- earthShow: true, //地球显影
|
|
|
|
|
- shadows: false, //场景阴影
|
|
|
|
|
- cloud: false, //云层
|
|
|
|
|
- skyBox: false, //天空盒
|
|
|
|
|
- sunShow: false, //太阳
|
|
|
|
|
- timeline: false, //时间轴
|
|
|
|
|
- depthAgainst: true, //深度检测
|
|
|
|
|
- atomsphereRender: true, //大气渲染
|
|
|
|
|
- fogEffect: true, //雾化效果
|
|
|
|
|
- underground: true, //开启地下
|
|
|
|
|
- frameRate: false, //帧率
|
|
|
|
|
|
|
+ earthShow: true,
|
|
|
|
|
+ shadows: false,
|
|
|
|
|
+ cloud: false,
|
|
|
|
|
+ skyBox: false,
|
|
|
|
|
+ sunShow: false,
|
|
|
|
|
+ timeline: false,
|
|
|
|
|
+ depthAgainst: true,
|
|
|
|
|
+ atomsphereRender: true,
|
|
|
|
|
+ fogEffect: true,
|
|
|
|
|
+ underground: true,
|
|
|
|
|
+ frameRate: false,
|
|
|
rain: false,
|
|
rain: false,
|
|
|
snow: false,
|
|
snow: false,
|
|
|
- // Facade: false, //立面图
|
|
|
|
|
- surfaceTransparency: 1, //地表透明度
|
|
|
|
|
- cloudsUrl: 'public/img/skyboxs/clouds/clouds1.png', //云层纹理路径
|
|
|
|
|
- skyboxSources: null, //天空盒资源
|
|
|
|
|
- skyboxType: 'bluesky', //天空盒类型
|
|
|
|
|
- uspeed: 0, //获取或者设置天空盒子绕x轴运动的动画速度。设置为1时表示0.01弧度每秒
|
|
|
|
|
- vspeed: 0, //获取或者设置天空盒子绕y轴运动的动画速度。
|
|
|
|
|
- wspeed: 0.5, //获取或者设置天空盒子绕z轴运动的动画速度。
|
|
|
|
|
- viewMode: '3D', //视图模式
|
|
|
|
|
|
|
+ surfaceTransparency: 1,
|
|
|
|
|
+ cloudsUrl: '/img/skyboxs/clouds/clouds1.png',
|
|
|
|
|
+ skyboxSources: null,
|
|
|
|
|
+ skyboxType: 'bluesky',
|
|
|
|
|
+ uspeed: 0,
|
|
|
|
|
+ vspeed: 0,
|
|
|
|
|
+ wspeed: 0.5,
|
|
|
|
|
+ viewMode: '3D',
|
|
|
rainAngle: 45,
|
|
rainAngle: 45,
|
|
|
rainSpeed: 8,
|
|
rainSpeed: 8,
|
|
|
snowDesity: 10,
|
|
snowDesity: 10,
|
|
|
snowSpeed: 4,
|
|
snowSpeed: 4,
|
|
|
snowAngle: 10,
|
|
snowAngle: 10,
|
|
|
snowType: '0',
|
|
snowType: '0',
|
|
|
- compass:false,
|
|
|
|
|
- isCompass:''
|
|
|
|
|
|
|
+ compass: false,
|
|
|
|
|
+ isCompass: ''
|
|
|
});
|
|
});
|
|
|
- // 设置天空盒默认值
|
|
|
|
|
|
|
+
|
|
|
state.skyboxSources = {
|
|
state.skyboxSources = {
|
|
|
bluesky: {
|
|
bluesky: {
|
|
|
- positiveX: 'public/img/skyboxs/bluesky/Right.jpg',
|
|
|
|
|
- negativeX: 'public/img/skyboxs/bluesky/Left.jpg',
|
|
|
|
|
- positiveY: 'public/img/skyboxs/bluesky/Front.jpg',
|
|
|
|
|
- negativeY: 'public/img/skyboxs/bluesky/Back.jpg',
|
|
|
|
|
- positiveZ: 'public/img/skyboxs/bluesky/Up.jpg',
|
|
|
|
|
- negativeZ: 'public/img/skyboxs/bluesky/Down.jpg'
|
|
|
|
|
|
|
+ positiveX: '/img/skyboxs/bluesky/Right.jpg',
|
|
|
|
|
+ negativeX: '/img/skyboxs/bluesky/Left.jpg',
|
|
|
|
|
+ positiveY: '/img/skyboxs/bluesky/Front.jpg',
|
|
|
|
|
+ negativeY: '/img/skyboxs/bluesky/Back.jpg',
|
|
|
|
|
+ positiveZ: '/img/skyboxs/bluesky/Up.jpg',
|
|
|
|
|
+ negativeZ: '/img/skyboxs/bluesky/Down.jpg'
|
|
|
},
|
|
},
|
|
|
sunsetglow: {
|
|
sunsetglow: {
|
|
|
- positiveX: 'public/img/skyboxs/sunsetglow/Right.jpg',
|
|
|
|
|
- negativeX: 'public/img/skyboxs/sunsetglow/Left.jpg',
|
|
|
|
|
- positiveY: 'public/img/skyboxs/sunsetglow/Front.jpg',
|
|
|
|
|
- negativeY: 'public/img/skyboxs/sunsetglow/Back.jpg',
|
|
|
|
|
- positiveZ: 'public/img/skyboxs/sunsetglow/Up.jpg',
|
|
|
|
|
- negativeZ: 'public/img/skyboxs/sunsetglow/Down.jpg'
|
|
|
|
|
|
|
+ positiveX: '/img/skyboxs/sunsetglow/Right.jpg',
|
|
|
|
|
+ negativeX: '/img/skyboxs/sunsetglow/Left.jpg',
|
|
|
|
|
+ positiveY: '/img/skyboxs/sunsetglow/Front.jpg',
|
|
|
|
|
+ negativeY: '/img/skyboxs/sunsetglow/Back.jpg',
|
|
|
|
|
+ positiveZ: '/img/skyboxs/sunsetglow/Up.jpg',
|
|
|
|
|
+ negativeZ: '/img/skyboxs/sunsetglow/Down.jpg'
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // 传入props改变默认值
|
|
|
|
|
if (props) {
|
|
if (props) {
|
|
|
for (let key in props) {
|
|
for (let key in props) {
|
|
|
if (state.hasOwnProperty(key)) {
|
|
if (state.hasOwnProperty(key)) {
|
|
@@ -71,308 +68,216 @@ function s3mlayerAttribute(props) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 初始化数据
|
|
|
|
|
let cloudBox = null;
|
|
let cloudBox = null;
|
|
|
- let skyboxs = {}, defaultSkybox;
|
|
|
|
|
-
|
|
|
|
|
- function initializeCesiumObjects() {
|
|
|
|
|
- if (typeof Cesium !== 'undefined' && storeState.isViewer) {
|
|
|
|
|
- cloudBox = new Cesium.CloudBox({ url: state.cloudsUrl });
|
|
|
|
|
- for (let key in state.skyboxSources) {
|
|
|
|
|
- let skybox = new Cesium.SkyBox({ sources: state.skyboxSources[key] });
|
|
|
|
|
- skybox.USpeed = state.uspeed;
|
|
|
|
|
- skybox.VSpeed = state.vspeed;
|
|
|
|
|
- skybox.WSpeed = state.wspeed;
|
|
|
|
|
- skyboxs[key] = skybox;
|
|
|
|
|
- };
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function initialSkyBox() {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.frameState && viewer.scene.frameState.passes.render) {
|
|
|
|
|
- for (let key in skyboxs) {
|
|
|
|
|
- skyboxs[key].update(viewer.scene.frameState, true);
|
|
|
|
|
- skyboxs[key].show = false;
|
|
|
|
|
- }
|
|
|
|
|
- viewer.scene.postRender.removeEventListener(initialSkyBox);
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ let skyboxs = {};
|
|
|
|
|
+ let defaultSkybox = null;
|
|
|
|
|
|
|
|
- function watchCameraHeight() {
|
|
|
|
|
- if (state.skyBox && viewer && viewer.scene && viewer.scene.camera) {
|
|
|
|
|
- let cameraHeight = viewer.scene.camera.positionCartographic.height;
|
|
|
|
|
- if (cameraHeight > 22e4) {
|
|
|
|
|
- viewer.scene.skyBox.show = false;
|
|
|
|
|
- state.atomsphereRender = true;
|
|
|
|
|
- } else {
|
|
|
|
|
- viewer.scene.skyBox.show = true;
|
|
|
|
|
- state.atomsphereRender = false;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ // 【极简、安全、不报错】创建天空盒
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ function initSkyBoxWhenViewerReady() {
|
|
|
|
|
+ if (!viewer || !viewer.scene || !Cesium.SkyBox) return;
|
|
|
|
|
+ if (Object.keys(skyboxs).length > 0) return;
|
|
|
|
|
|
|
|
- if (storeState.isViewer) {
|
|
|
|
|
- initializeCesiumObjects();
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- defaultSkybox = viewer.scene.skyBox;
|
|
|
|
|
- viewer.scene.postRender.addEventListener(initialSkyBox);
|
|
|
|
|
- if (viewer.scene.postProcessStages) {
|
|
|
|
|
- if (viewer.scene.postProcessStages.snow) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
|
|
|
|
|
- }
|
|
|
|
|
- if (viewer.scene.postProcessStages.rain) {
|
|
|
|
|
- viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ try {
|
|
|
|
|
+ for (let key in state.skyboxSources) {
|
|
|
|
|
+ let sb = new Cesium.SkyBox({
|
|
|
|
|
+ sources: state.skyboxSources[key]
|
|
|
|
|
+ });
|
|
|
|
|
+ sb.USpeed = state.uspeed;
|
|
|
|
|
+ sb.VSpeed = state.vspeed;
|
|
|
|
|
+ sb.WSpeed = state.wspeed;
|
|
|
|
|
+ skyboxs[key] = sb;
|
|
|
}
|
|
}
|
|
|
- watchCameraHeight();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ defaultSkybox = viewer.scene.skyBox;
|
|
|
|
|
+ } catch (e) {}
|
|
|
}
|
|
}
|
|
|
- //viewer 初始化完成的监听
|
|
|
|
|
- watch(() => storeState.isViewer, val => {
|
|
|
|
|
- if (val) {
|
|
|
|
|
- initializeCesiumObjects();
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- defaultSkybox = viewer.scene.skyBox;
|
|
|
|
|
- viewer.scene.postRender.addEventListener(initialSkyBox);
|
|
|
|
|
- if (viewer.scene.postProcessStages) {
|
|
|
|
|
- if (viewer.scene.postProcessStages.snow) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(state.snowDesity);
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(state.snowSpeed);
|
|
|
|
|
- }
|
|
|
|
|
- if (viewer.scene.postProcessStages.rain) {
|
|
|
|
|
- viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(state.rainSpeed);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ // 【你原版正常的雨雪】
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ function createWeatherEffects() {
|
|
|
|
|
+ if (!viewer || !viewer.scene || !viewer.scene.postProcessStages) return;
|
|
|
|
|
+
|
|
|
|
|
+ if (!viewer.scene.postProcessStages.rain) {
|
|
|
|
|
+ const rainStage = new Cesium.PostProcessStage({
|
|
|
|
|
+ name: 'rain',
|
|
|
|
|
+ fragmentShader: `
|
|
|
|
|
+ uniform sampler2D colorTexture;
|
|
|
|
|
+ varying vec2 v_textureCoordinates;
|
|
|
|
|
+ uniform float angle;
|
|
|
|
|
+ uniform float speed;
|
|
|
|
|
+ uniform float time;
|
|
|
|
|
+ float random(vec2 st) { return fract(sin(dot(st, vec2(12.9898,78.233)))*43758.5453123); }
|
|
|
|
|
+ void main() {
|
|
|
|
|
+ vec4 color = texture2D(colorTexture, v_textureCoordinates);
|
|
|
|
|
+ float t = time * speed;
|
|
|
|
|
+ float angleRad = angle * 3.14159/180.0;
|
|
|
|
|
+ mat2 rot = mat2(cos(angleRad), -sin(angleRad), sin(angleRad), cos(angleRad));
|
|
|
|
|
+ vec2 uv = rot * (v_textureCoordinates * 12.0);
|
|
|
|
|
+ uv.y += t * 0.01;
|
|
|
|
|
+ float rain = 0.0;
|
|
|
|
|
+ for(int i=0; i<3; i++){
|
|
|
|
|
+ vec2 g = fract(uv * vec2(1.0, 25.0)) - 0.5;
|
|
|
|
|
+ float d = length(g);
|
|
|
|
|
+ rain += smoothstep(0.05, 0.0, d);
|
|
|
|
|
+ uv *= 1.6;
|
|
|
|
|
+ }
|
|
|
|
|
+ color.rgb += rain * 0.12;
|
|
|
|
|
+ gl_FragColor = color;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- watchCameraHeight();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ `,
|
|
|
|
|
+ uniforms: { angle: state.rainAngle, speed: state.rainSpeed, time: 0 }
|
|
|
|
|
+ });
|
|
|
|
|
+ viewer.scene.postProcessStages.add(rainStage);
|
|
|
|
|
+ viewer.scene.preRender.addEventListener(() => {
|
|
|
|
|
+ if (viewer.scene.postProcessStages.rain)
|
|
|
|
|
+ viewer.scene.postProcessStages.rain.uniforms.time = performance.now() * 0.001;
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
|
|
|
- // 销毁
|
|
|
|
|
- onBeforeUnmount(() => {
|
|
|
|
|
- if (cloudBox) {
|
|
|
|
|
- cloudBox.destroy();
|
|
|
|
|
|
|
+ if (!viewer.scene.postProcessStages.snow) {
|
|
|
|
|
+ const snowStage = new Cesium.PostProcessStage({
|
|
|
|
|
+ name: 'snow',
|
|
|
|
|
+ fragmentShader: `
|
|
|
|
|
+ uniform sampler2D colorTexture;
|
|
|
|
|
+ varying vec2 v_textureCoordinates;
|
|
|
|
|
+ uniform float density;
|
|
|
|
|
+ uniform float speed;
|
|
|
|
|
+ uniform float angle;
|
|
|
|
|
+ uniform float time;
|
|
|
|
|
+ float random(vec2 st) { return fract(sin(dot(st, vec2(12.9898,78.233)))*43758.5453123); }
|
|
|
|
|
+ void main() {
|
|
|
|
|
+ vec4 color = texture2D(colorTexture, v_textureCoordinates);
|
|
|
|
|
+ float t = time * speed;
|
|
|
|
|
+ float angleRad = angle * 3.14159/180.0;
|
|
|
|
|
+ mat2 rot = mat2(cos(angleRad), -sin(angleRad), sin(angleRad), cos(angleRad));
|
|
|
|
|
+ vec2 uv = rot * (v_textureCoordinates * 8.0);
|
|
|
|
|
+ uv.y += t * 0.004;
|
|
|
|
|
+ float snow = 0.0;
|
|
|
|
|
+ for(int i=0; i<3; i++){
|
|
|
|
|
+ vec2 g = fract(uv * vec2(1.0, 15.0)) - 0.5;
|
|
|
|
|
+ float d = length(g);
|
|
|
|
|
+ snow += smoothstep(0.08, 0.0, d);
|
|
|
|
|
+ uv *= 1.5;
|
|
|
|
|
+ }
|
|
|
|
|
+ color.rgb += snow * density * 0.015;
|
|
|
|
|
+ gl_FragColor = color;
|
|
|
|
|
+ }
|
|
|
|
|
+ `,
|
|
|
|
|
+ uniforms: { density: state.snowDesity, speed: state.snowSpeed, angle: state.snowAngle, time: 0 }
|
|
|
|
|
+ });
|
|
|
|
|
+ viewer.scene.postProcessStages.add(snowStage);
|
|
|
|
|
+ viewer.scene.preRender.addEventListener(() => {
|
|
|
|
|
+ if (viewer.scene.postProcessStages.snow)
|
|
|
|
|
+ viewer.scene.postProcessStages.snow.uniforms.time = performance.now() * 0.001;
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
- for (let key in skyboxs) {
|
|
|
|
|
- if (skyboxs[key]) {
|
|
|
|
|
- skyboxs[key].destroy();
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
- if (viewer && viewer.scene && defaultSkybox) {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ // 【最关键:强制显示天空盒,不搞监听,不搞高度判断】
|
|
|
|
|
+ // ==============================================
|
|
|
|
|
+ watch(() => state.skyBox, (val) => {
|
|
|
|
|
+ if (!viewer || !viewer.scene) return;
|
|
|
|
|
+
|
|
|
|
|
+ initSkyBoxWhenViewerReady();
|
|
|
|
|
+ let target = skyboxs[state.skyboxType];
|
|
|
|
|
+ if (!target) return;
|
|
|
|
|
+
|
|
|
|
|
+ if (val) {
|
|
|
|
|
+ // 强制显示!
|
|
|
|
|
+ viewer.scene.skyAtmosphere.show = false;
|
|
|
|
|
+ state.atomsphereRender = false;
|
|
|
|
|
+ viewer.scene.skyBox = target;
|
|
|
|
|
+ viewer.scene.skyBox.show = true;
|
|
|
|
|
+ } else {
|
|
|
viewer.scene.skyBox = defaultSkybox;
|
|
viewer.scene.skyBox = defaultSkybox;
|
|
|
|
|
+ viewer.scene.skyAtmosphere.show = true;
|
|
|
|
|
+ state.atomsphereRender = true;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 监听
|
|
|
|
|
- watch(() => state.earthShow, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.globe) {
|
|
|
|
|
- viewer.scene.globe.show = val;
|
|
|
|
|
|
|
+ watch(() => state.skyboxType, (val) => {
|
|
|
|
|
+ if (!state.skyBox || !viewer || !viewer.scene) return;
|
|
|
|
|
+ initSkyBoxWhenViewerReady();
|
|
|
|
|
+ let target = skyboxs[val];
|
|
|
|
|
+ if (target) {
|
|
|
|
|
+ viewer.scene.skyBox = target;
|
|
|
|
|
+ viewer.scene.skyBox.show = true;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
- watch(() => state.shadows, val => {
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- viewer.scene.shadows = val;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // ========================
|
|
|
|
|
+ // 以下全部保留你正常能用的代码
|
|
|
|
|
+ // ========================
|
|
|
|
|
+ if (storeState.isViewer) {
|
|
|
|
|
+ initSkyBoxWhenViewerReady();
|
|
|
|
|
+ createWeatherEffects();
|
|
|
|
|
+ }
|
|
|
|
|
+ watch(() => storeState.isViewer, val => {
|
|
|
|
|
+ if (val) {
|
|
|
|
|
+ viewer = window.viewer;
|
|
|
|
|
+ initSkyBoxWhenViewerReady();
|
|
|
|
|
+ createWeatherEffects();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
- watch(() => state.sunShow, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.globe) {
|
|
|
|
|
- viewer.scene.globe.enableLighting = val;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ onBeforeUnmount(() => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ if (cloudBox) cloudBox.destroy();
|
|
|
|
|
+ for (let k in skyboxs) skyboxs[k].destroy();
|
|
|
|
|
+ } catch (e) {}
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ watch(() => state.earthShow, val => { if (viewer?.scene?.globe) viewer.scene.globe.show = val; });
|
|
|
|
|
+ watch(() => state.shadows, val => { if (viewer?.scene) viewer.scene.shadows = val; });
|
|
|
|
|
+ watch(() => state.sunShow, val => { if (viewer?.scene?.globe) viewer.scene.globe.enableLighting = val; });
|
|
|
watch(() => state.timeline, val => {
|
|
watch(() => state.timeline, val => {
|
|
|
- let timeline = document.getElementsByClassName(
|
|
|
|
|
- "cesium-viewer-timelineContainer"
|
|
|
|
|
- )[0];
|
|
|
|
|
- if (timeline) {
|
|
|
|
|
- if (val) {
|
|
|
|
|
- timeline.style.visibility = "visible";
|
|
|
|
|
- } else {
|
|
|
|
|
- timeline.style.visibility = "hidden";
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.depthAgainst, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.globe) {
|
|
|
|
|
- viewer.scene.globe.depthTestAgainstTerrain = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.atomsphereRender, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.skyAtmosphere) {
|
|
|
|
|
- viewer.scene.skyAtmosphere.show = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.fogEffect, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.fog) {
|
|
|
|
|
- viewer.scene.fog.enabled = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.surfaceTransparency, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.globe) {
|
|
|
|
|
- viewer.scene.globe.globeAlpha = parseFloat(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.underground, val => {
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- viewer.scene.undergroundMode = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.frameRate, val => {
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- viewer.scene.debugShowFramesPerSecond = val;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const el = document.querySelector(".cesium-viewer-timelineContainer");
|
|
|
|
|
+ if (el) el.style.visibility = val ? "visible" : "hidden";
|
|
|
});
|
|
});
|
|
|
|
|
+ watch(() => state.depthAgainst, val => { if (viewer?.scene?.globe) viewer.scene.globe.depthTestAgainstTerrain = val; });
|
|
|
|
|
+ watch(() => state.atomsphereRender, val => { if (viewer?.scene) viewer.scene.skyAtmosphere.show = val; });
|
|
|
|
|
+ watch(() => state.fogEffect, val => { if (viewer?.scene?.fog) viewer.scene.fog.enabled = val; });
|
|
|
|
|
+ watch(() => state.surfaceTransparency, val => { if (viewer?.scene?.globe) viewer.scene.globe.alpha = val; });
|
|
|
|
|
+ watch(() => state.underground, val => { if (viewer?.scene) viewer.scene.undergroundMode = val; });
|
|
|
|
|
+ watch(() => state.frameRate, val => { if (viewer?.scene) viewer.scene.debugShowFramesPerSecond = val; });
|
|
|
|
|
+
|
|
|
watch(() => state.cloud, val => {
|
|
watch(() => state.cloud, val => {
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- if (val) {
|
|
|
|
|
- viewer.scene.cloudBox = cloudBox;
|
|
|
|
|
- } else {
|
|
|
|
|
- viewer.scene.cloudBox = null;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.cloudsUrl, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.cloudBox) {
|
|
|
|
|
- viewer.scene.cloudBox.url = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.skyBox, val => {
|
|
|
|
|
- if (viewer && viewer.scene) {
|
|
|
|
|
- if (val) {
|
|
|
|
|
- let cameraHeight = viewer.scene.camera.positionCartographic.height;
|
|
|
|
|
- viewer.scene.postRender.addEventListener(watchCameraHeight);
|
|
|
|
|
- viewer.scene.skyBox = skyboxs[state.skyboxType];
|
|
|
|
|
- if (cameraHeight < 22e4) {
|
|
|
|
|
- viewer.scene.skyBox.show = true;
|
|
|
|
|
- state.atomsphereRender = false
|
|
|
|
|
- } else {
|
|
|
|
|
- state.atomsphereRender = true
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- state.atomsphereRender = true;
|
|
|
|
|
- if (viewer.scene.skyBox) {
|
|
|
|
|
- viewer.scene.skyBox.show = false;
|
|
|
|
|
- }
|
|
|
|
|
- viewer.scene.skyBox = defaultSkybox;
|
|
|
|
|
- viewer.scene.postRender.removeEventListener(watchCameraHeight);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.skyboxType, val => {
|
|
|
|
|
- if (state.skyBox && viewer && viewer.scene && skyboxs[val]) {
|
|
|
|
|
- skyboxs[val].show = true;
|
|
|
|
|
- viewer.scene.skyBox = skyboxs[val];
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.uspeed, val => {
|
|
|
|
|
- if (skyboxs[state.skyboxType]) {
|
|
|
|
|
- skyboxs[state.skyboxType].USpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
- if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
|
|
|
|
|
- viewer.scene.skyBox.USpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.vspeed, val => {
|
|
|
|
|
- if (skyboxs[state.skyboxType]) {
|
|
|
|
|
- skyboxs[state.skyboxType].VSpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
- if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
|
|
|
|
|
- viewer.scene.skyBox.VSpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.wspeed, val => {
|
|
|
|
|
- if (skyboxs[state.skyboxType]) {
|
|
|
|
|
- skyboxs[state.skyboxType].WSpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
- if (state.skyBox && viewer && viewer.scene && viewer.scene.skyBox) {
|
|
|
|
|
- viewer.scene.skyBox.WSpeed = Number(val);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!viewer || !viewer.scene) return;
|
|
|
|
|
+ if (!cloudBox) cloudBox = new Cesium.CloudBox({ url: state.cloudsUrl });
|
|
|
|
|
+ viewer.scene.cloudBox = val ? cloudBox : null;
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
watch(() => state.viewMode, val => {
|
|
watch(() => state.viewMode, val => {
|
|
|
- if (viewer && viewer.scene && typeof Cesium !== 'undefined') {
|
|
|
|
|
- if (val === "2D") {
|
|
|
|
|
- viewer.scene.mode = Cesium.SceneMode.SCENE2D;
|
|
|
|
|
- } else if (val === "3D") {
|
|
|
|
|
- viewer.scene.mode = Cesium.SceneMode.SCENE3D;
|
|
|
|
|
- } else {
|
|
|
|
|
- viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.rain, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain) {
|
|
|
|
|
- viewer.scene.postProcessStages.rain.enabled = val;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.snow, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.enabled = val;
|
|
|
|
|
- console.log(viewer.scene.postProcessStages.snow.uniforms)
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.rainAngle, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain && viewer.scene.postProcessStages.rain.uniforms) {
|
|
|
|
|
- viewer.scene.postProcessStages.rain.uniforms.angle = parseFloat(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.rainSpeed, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.rain && viewer.scene.postProcessStages.rain.uniforms) {
|
|
|
|
|
- viewer.scene.postProcessStages.rain.uniforms.speed = parseFloat(val)
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.snowDesity, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.density = parseFloat(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.snowSpeed, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.speed = parseFloat(val);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.snowAngle, val => {
|
|
|
|
|
- if (viewer && viewer.scene && viewer.scene.postProcessStages && viewer.scene.postProcessStages.snow && viewer.scene.postProcessStages.snow.uniforms) {
|
|
|
|
|
- viewer.scene.postProcessStages.snow.uniforms.angle = parseFloat(val);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (!viewer || !viewer.scene) return;
|
|
|
|
|
+ if (val === "2D") viewer.scene.mode = Cesium.SceneMode.SCENE2D;
|
|
|
|
|
+ else if (val === "3D") viewer.scene.mode = Cesium.SceneMode.SCENE3D;
|
|
|
|
|
+ else viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ watch(() => state.rain, val => { if (viewer?.scene?.postProcessStages?.rain) viewer.scene.postProcessStages.rain.enabled = val; });
|
|
|
|
|
+ watch(() => state.snow, val => { if (viewer?.scene?.postProcessStages?.snow) viewer.scene.postProcessStages.snow.enabled = val; });
|
|
|
|
|
+ watch(() => state.rainAngle, val => { if (viewer?.scene?.postProcessStages?.rain) viewer.scene.postProcessStages.rain.uniforms.angle = val; });
|
|
|
|
|
+ watch(() => state.rainSpeed, val => { if (viewer?.scene?.postProcessStages?.rain) viewer.scene.postProcessStages.rain.uniforms.speed = val; });
|
|
|
|
|
+ watch(() => state.snowDesity, val => { if (viewer?.scene?.postProcessStages?.snow) viewer.scene.postProcessStages.snow.uniforms.density = val; });
|
|
|
|
|
+ watch(() => state.snowSpeed, val => { if (viewer?.scene?.postProcessStages?.snow) viewer.scene.postProcessStages.snow.uniforms.speed = val; });
|
|
|
|
|
+ watch(() => state.snowAngle, val => { if (viewer?.scene?.postProcessStages?.snow) viewer.scene.postProcessStages.snow.uniforms.angle = val; });
|
|
|
|
|
+
|
|
|
watch(() => state.snowType, val => {
|
|
watch(() => state.snowType, val => {
|
|
|
switch (val) {
|
|
switch (val) {
|
|
|
- case '0':
|
|
|
|
|
- state.snowDesity = 5;
|
|
|
|
|
- state.snowSpeed = 2;
|
|
|
|
|
- break;
|
|
|
|
|
- case '1':
|
|
|
|
|
- state.snowDesity = 10;
|
|
|
|
|
- state.snowSpeed = 4;
|
|
|
|
|
- break;
|
|
|
|
|
- case '2':
|
|
|
|
|
- state.snowDesity = 15;
|
|
|
|
|
- state.snowSpeed = 6;
|
|
|
|
|
- break;
|
|
|
|
|
- case '3':
|
|
|
|
|
- state.snowDesity = 20;
|
|
|
|
|
- state.snowSpeed = 10;
|
|
|
|
|
- break;
|
|
|
|
|
- default:
|
|
|
|
|
- state.snowDesity = 5;
|
|
|
|
|
- state.snowSpeed = 2;
|
|
|
|
|
- break;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- watch(() => state.isCompass, val => {
|
|
|
|
|
- if(val){
|
|
|
|
|
- state.compass = 'Sm3dCompass'
|
|
|
|
|
- }else{
|
|
|
|
|
- state.compass = ''
|
|
|
|
|
|
|
+ case '0': state.snowDesity = 5; state.snowSpeed = 2; break;
|
|
|
|
|
+ case '1': state.snowDesity = 10; state.snowSpeed = 4; break;
|
|
|
|
|
+ case '2': state.snowDesity = 15; state.snowSpeed = 6; break;
|
|
|
|
|
+ case '3': state.snowDesity = 20; state.snowSpeed = 10; break;
|
|
|
|
|
+ default: state.snowDesity = 5; state.snowSpeed = 2;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
|
|
|
|
|
- return {
|
|
|
|
|
- ...toRefs(state),
|
|
|
|
|
- };
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ watch(() => state.isCompass, val => { state.compass = val ? 'Sm3dCompass' : ''; });
|
|
|
|
|
|
|
|
-export default s3mlayerAttribute
|
|
|
|
|
|
|
+ return { ...toRefs(state) };
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
|
|
+export default s3mlayerAttribute
|