huzhengkao
/
tcctyn-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: huzhengkao:4827a7da462505e57e855006ef22240afd3aca1e
Branches Tags
huzhengkao:master
..
compare: huzhengkao:0e13c4c9ba94adc81250c26d4e7672113440fa3e
Branches Tags
huzhengkao:master

No commits in common. "4827a7da462505e57e855006ef22240afd3aca1e" and "0e13c4c9ba94adc81250c26d4e7672113440fa3e" have entirely different histories.
4827a7da46 ... 0e13c4c9ba

21 changed files with 53 additions and 403 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/icons/toolbar_fog.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/icons/toolbar_rain.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 898 B

BIN
src/assets/icons/toolbar_snow.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/icons/toolbar_sunny.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

6
src/components/CesiumMap/mixins/useDrawTool/drawAttackArrow.js
View File

@ -15,12 +15,12 @@ import { createAttackArrowPositions } from './draw/attackArrowGraphic'
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawAttackArrow = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -79,11 +79,11 @@ export const drawAttackArrow = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawCurvePolygon.js
View File

@ -15,12 +15,12 @@ import { createCurvePolygonPositions } from './draw/curvePolygonGraphic'
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawCurvePolygon = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -74,11 +74,11 @@ export const drawCurvePolygon = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawDoubleArrow.js
View File

@ -15,12 +15,12 @@ import { createDoubleArrowPositions } from './draw/doubleArrowGraphic'
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawDoubleArrow = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -79,11 +79,11 @@ export const drawDoubleArrow = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawPoint.js
View File

@ -6,20 +6,20 @@ import { Cartesian3, ScreenSpaceEventType } from 'cesium'
* @returns Promise 绘制完成的点坐标
*/
export const drawPoint = (deps) => {
const { bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
return new Promise((resolve, reject) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleDraw)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancel)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawPolygon.js
View File

@ -14,12 +14,12 @@ import {
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawPolygon = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -74,11 +74,11 @@ export const drawPolygon = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawPolyline.js
View File

@ -12,12 +12,12 @@ import {
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawPolyline = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时折线实体
@ -47,11 +47,11 @@ export const drawPolyline = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolyline)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawStraightArrow.js
View File

@ -15,12 +15,12 @@ import { createStraightArrowPositions } from './draw/straightArrowGraphic'
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawStraightArrow = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -75,11 +75,11 @@ export const drawStraightArrow = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

6
src/components/CesiumMap/mixins/useDrawTool/drawWideArrow.js
View File

@ -15,12 +15,12 @@ import { createWideArrowPositions } from './draw/wideArrowGraphic'
* @returns Promise 绘制完成的所有点坐标数组
*/
export const drawWideArrow = (deps) => {
const { viewer, bus, ScreenMode, position, registerAbort, globalAbort } = deps
const { viewer, bus, position, status, registerAbort, globalAbort } = deps
// 如果在执行其它操作，则取消
globalAbort()
bus.mode.value = ScreenMode.DRAW
status.value = 'Drawing'
const featurePositions = []
// 临时多边形实体 (包含填充和边界线)
@ -76,11 +76,11 @@ export const drawWideArrow = (deps) => {
// 清理资源
const dispose = () => {
registerAbort(null) // 取消注册当前的 abort 回调
status.value = 'Default'
viewer.entities.remove(tempPolygon)
bus.offScreen(ScreenSpaceEventType.LEFT_CLICK, handleAddPoint)
bus.offScreen(ScreenSpaceEventType.RIGHT_CLICK, handleCancelDraw)
bus.offScreen(ScreenSpaceEventType.LEFT_DOUBLE_CLICK, handleEndDraw)
bus.mode.value = ScreenMode.VIEW
}
// 取消绘制

12
src/components/CesiumMap/mixins/useDrawTool/index.js
View File

@ -8,7 +8,7 @@ import {
Color as CesiumColor,
HeightReference,
} from 'cesium'
import { useEventBus, ScreenMode } from '../useEventBus'
import { useEventBus } from '../useEventBus'
import { useHoverPosition } from '../useHoverPosition'
// 导入拆分后的类型和绘制逻辑
@ -39,13 +39,13 @@ export const useDrawTool = (viewer) => {
const { isHover, position } = useHoverPosition(viewer)
// 获取事件总线
const bus = useEventBus(viewer)
// const status = ref('Default')
const status = ref('Default')
// 判断辅助点是否显示
watch(
() => [bus.mode.value, isHover.value],
() => [status.value, isHover.value],
([nowStatus, hover]) => {
if (hover && nowStatus === ScreenMode.DRAW) {
if (hover && nowStatus === 'Drawing') {
assistPoint.show = true
} else {
assistPoint.show = false
@ -92,8 +92,8 @@ export const useDrawTool = (viewer) => {
const drawDependencies = {
viewer,
bus,
ScreenMode,
position,
status,
registerAbort,
globalAbort: abort, // 将全局 abort 函数也传递进去，方便内部调用
}
@ -137,6 +137,8 @@ export const useDrawTool = (viewer) => {
drawAttackArrow,
drawDoubleArrow,
abort,
// 如果需要，可以暴露 status
// status
}
}

33
src/components/CesiumMap/mixins/useEventBus.js
View File

@ -1,18 +1,11 @@
import mitt from 'mitt'
import { ref } from 'vue'
import { ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium'
import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from 'cesium'
// 使用 Map 来缓存每个 viewer 对应的事件总线组件
// Viewer 实例作为 Map 的键
const viewerEventBusCache = new Map()
// 屏幕鼠标事件模式
export const ScreenMode = {
VIEW: 1000,
DRAW: 2000,
}
/**
* 消息总线，接管全局屏幕空间事件，仅作用于单个 Viewer。
* 调用该hook后，所有鼠标事件必须改为调用返回对象中的方法。
@ -25,7 +18,6 @@ export const useEventBus = (viewer) => {
let cache = viewerEventBusCache.get(viewer)
if (!cache) {
cache = {
mode: ref(ScreenMode.VIEW),
// 创建一个 mitt 实例用于处理所有屏幕空间事件
screenEmitter: mitt(),
// 创建一个 mitt 实例用于处理自定义事件
@ -43,20 +35,19 @@ export const useEventBus = (viewer) => {
// 构建返回的 EventBus 对象
const bus = {
mode: cache.mode,
// 移除 mode 属性的定义
// onScreen 直接注册到 screenEmitter
onScreen(event, handler, mode) {
mode = mode || cache.mode.value
cache.screenEmitter.on(mode + event, handler)
},
// onScreen: cache.screenEmitter.on,
// onScreen(event, handler) {
// screenEmitter.on(event, handler)
// },
onScreen: cache.screenEmitter.on,
// offScreen 直接从 screenEmitter 移除
offScreen(event, handler, mode) {
mode = mode || cache.mode.value
cache.screenEmitter.off(mode + event, handler)
},
// offScreen: cache.screenEmitter.off,
// offScreen(event, handler) {
// screenEmitter.off(event, handler)
// },
offScreen: cache.screenEmitter.off,
// on 保持不变
// on(event, handler) {
@ -80,7 +71,7 @@ export const useEventBus = (viewer) => {
} else if (Object.values(ScreenSpaceEventType).includes(event)) {
// 触发屏幕空间事件 (触发所有监听器，无模式检查)
// 屏幕空间事件通常只有一个参数
cache.screenEmitter.emit(cache.mode.value + event, args[0])
cache.screenEmitter.emit(event, args[0])
} else {
console.warn(`EventBus: 不符合规范的触发事件: ${event}`)
}

9
src/components/CesiumMap/mixins/useHoverPosition.js
View File

@ -8,7 +8,7 @@ import {
} from 'cesium'
import { computed, ref, shallowRef } from 'vue'
import { useElementHover } from '@vueuse/core'
import { useEventBus, ScreenMode } from './useEventBus'
import { useEventBus } from './useEventBus'
// 使用 Map 来缓存每个 viewer 对应的位置缓存
// Viewer 实例作为 Map 的键
@ -25,7 +25,7 @@ export const useHoverPosition = (viewer) => {
// const coordinate = shallowRef<Cartographic | null>(null)
// 添加鼠标移动事件
const bus = useEventBus(viewer)
const hoverHandler = (param) => {
bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, (param) => {
screenPosition.value = param.endPosition.clone()
position.value = viewer.scene.pickPosition(param.endPosition)
bus.emit('hoverTest', {
@ -33,10 +33,7 @@ export const useHoverPosition = (viewer) => {
position: position.value,
})
// coordinate.value = Cartographic.fromCartesian(position.value)
}
// 每个模式都关联事件
bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, hoverHandler, ScreenMode.VIEW)
bus.onScreen(ScreenSpaceEventType.MOUSE_MOVE, hoverHandler, ScreenMode.DRAW)
})
cache = {
isHover,
screenPosition,

74
src/components/CesiumMap/mixins/useWeatherParticle/fog.js
View File

@ -1,74 +0,0 @@
/*
* @Descripttion: 雾粒子
* @Author: 笙痞
* @Date: 2023-01-04 18:11:32
* @LastEditors: 笙痞77
* @LastEditTime: 2023-05-19 09:56:16
*/
import * as Cesium from "cesium";
class FogEffect {
constructor(viewer, options) {
if (!viewer) throw new Error("no viewer object!");
options = options || {};
this.visibility = Cesium.defaultValue(options.visibility, 0.1); // 能见度
this.color = Cesium.defaultValue(
options.color,
new Cesium.Color(0.8, 0.8, 0.8, 0.5)
);
this.viewer = viewer;
this.init();
}
init() {
this.fogStage = new Cesium.PostProcessStage({
name: "czm_fog",
fragmentShader: this.fog(),
uniforms: {
visibility: () => {
return this.visibility;
},
fogColor: () => {
return this.color;
},
},
});
this.viewer.scene.postProcessStages.add(this.fogStage);
}
destroy() {
if (!this.viewer || !this.fogStage) return;
this.viewer.scene.postProcessStages.remove(this.fogStage);
const isDestroyed = this.fogStage.isDestroyed();
// 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
if (!isDestroyed) {
this.fogStage.destroy();
}
delete this.visibility;
delete this.color;
}
show(visible) {
this.fogStage.enabled = visible;
}
fog() {
return "uniform sampler2D colorTexture;\n\
uniform sampler2D depthTexture;\n\
uniform float visibility;\n\
uniform vec4 fogColor;\n\
in vec2 v_textureCoordinates; \n\
out vec4 fragColor;\n\
void main(void) \n\
{ \n\
vec4 origcolor = texture(colorTexture, v_textureCoordinates); \n\
float depth = czm_readDepth(depthTexture, v_textureCoordinates); \n\
vec4 depthcolor = texture(depthTexture, v_textureCoordinates); \n\
float f = visibility * (depthcolor.r - 0.3) / 0.2; \n\
if (f < 0.0) f = 0.0; \n\
else if (f > 1.0) f = 1.0; \n\
fragColor = mix(origcolor, fogColor, f); \n\
}\n";
}
}
export default FogEffect;

54
src/components/CesiumMap/mixins/useWeatherParticle/index.js
View File

@ -1,54 +0,0 @@
import * as Cesium from "cesium";
import RainEffect from "./rain";
import SnowEffect from "./snow";
import FogEffect from "./fog";
export const useWeatherParticle = (viewer) => {
const _viewer = viewer;
let weather = null
const destroy = () => {
if(weather) {
weather.destroy();
weather = null;
}
};
const rain = () => {
destroy();
weather = new RainEffect(_viewer, {
tiltAngle: -0.2, //倾斜角度
rainSize: 1.0, // 雨大小
rainSpeed: 120.0, // 雨速
});
weather.show(true);
};
const snow = () => {
destroy();
weather = new SnowEffect(_viewer, {
snowSize: 0.02, // ❄️大小，最好小于0.02
snowSpeed: 60.0, // 速度
});
weather.show(true);
};
const fog = () => {
destroy();
weather = new FogEffect(_viewer, {
visibility: 0.2, // 能见度
color: new Cesium.Color(0.8, 0.8, 0.8, 0.3),
});
weather.show(true);
};
return {
rain,
snow,
fog,
destroy,
}
};

86
src/components/CesiumMap/mixins/useWeatherParticle/rain.js
View File

@ -1,86 +0,0 @@
/*
* @Descripttion: 雨粒子效果
* @Author: 笙痞
* @Date: 2023-01-04 15:01:03
* @LastEditors: 笙痞77
* @LastEditTime: 2023-05-19 09:54:15
*/
import * as Cesium from "cesium";
class RainEffect {
constructor(viewer, options) {
if (!viewer) throw new Error("no viewer object!");
options = options || {};
//倾斜角度，负数向右，正数向左
this.tiltAngle = Cesium.defaultValue(options.tiltAngle, -0.6);
this.rainSize = Cesium.defaultValue(options.rainSize, 0.3);
this.rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
this.viewer = viewer;
this.init();
}
init() {
this.rainStage = new Cesium.PostProcessStage({
name: "czm_rain",
fragmentShader: this.rain(),
uniforms: {
tiltAngle: () => {
return this.tiltAngle;
},
rainSize: () => {
return this.rainSize;
},
rainSpeed: () => {
return this.rainSpeed;
},
},
});
this.viewer.scene.postProcessStages.add(this.rainStage);
}
destroy() {
if (!this.viewer || !this.rainStage) return;
this.viewer.scene.postProcessStages.remove(this.rainStage);
const isDestroyed = this.rainStage.isDestroyed();
// 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
if (!isDestroyed) {
this.rainStage.destroy();
}
delete this.tiltAngle;
delete this.rainSize;
delete this.rainSpeed;
}
show(visible) {
this.rainStage.enabled = visible;
}
rain() {
return "uniform sampler2D colorTexture;\n\
in vec2 v_textureCoordinates;\n\
uniform float tiltAngle;\n\
uniform float rainSize;\n\
uniform float rainSpeed;\n\
float hash(float x) {\n\
return fract(sin(x * 133.3) * 13.13);\n\
}\n\
out vec4 fragColor;\n\
void main(void) {\n\
float time = czm_frameNumber / rainSpeed;\n\
vec2 resolution = czm_viewport.zw;\n\
vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);\n\
vec3 c = vec3(.6, .7, .8);\n\
float a = tiltAngle;\n\
float si = sin(a), co = cos(a);\n\
uv *= mat2(co, -si, si, co);\n\
uv *= length(uv + vec2(0, 4.9)) * rainSize + 1.;\n\
float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);\n\
float b = clamp(abs(sin(20. * time * v + uv.y * (5. / (2. + v)))) - .95, 0., 1.) * 20.;\n\
c *= v * b;\n\
fragColor = mix(texture(colorTexture, v_textureCoordinates), vec4(c, 1), .5);\n\
}\n\
";
}
}
export default RainEffect;

86
src/components/CesiumMap/mixins/useWeatherParticle/snow.js
View File

@ -1,86 +0,0 @@
/*
* @Descripttion: 雪花粒子类
* @Author: 笙痞
* @Date: 2023-01-04 14:01:07
* @LastEditors: 笙痞77
* @LastEditTime: 2023-05-19 09:52:52
*/
import * as Cesium from "cesium";
class SnowEffect {
constructor(viewer, options) {
if (!viewer) throw new Error("no viewer object!");
options = options || {};
this.snowSize = Cesium.defaultValue(options.snowSize, 0.02); // ❄️大小，最好小于0.02
this.snowSpeed = Cesium.defaultValue(options.snowSpeed, 60.0); // 速度
this.viewer = viewer;
this.init();
}
init() {
this.snowStage = new Cesium.PostProcessStage({
name: "czm_snow",
fragmentShader: this.snow(),
uniforms: {
snowSize: () => {
return this.snowSize;
},
snowSpeed: () => {
return this.snowSpeed;
},
},
});
this.viewer.scene.postProcessStages.add(this.snowStage);
}
destroy() {
if (!this.viewer || !this.snowStage) return;
this.viewer.scene.postProcessStages.remove(this.snowStage);
const isDestroyed = this.snowStage.isDestroyed();
// 先检查是否被销毁过，如果已经被销毁过再调用destroy会报错
if (!isDestroyed) {
this.snowStage.destroy();
}
delete this.snowSize;
delete this.snowSpeed;
}
show(visible) {
this.snowStage.enabled = visible;
}
snow() {
return "uniform sampler2D colorTexture;\n\
in vec2 v_textureCoordinates;\n\
uniform float snowSpeed;\n\
uniform float snowSize;\n\
float snow(vec2 uv,float scale)\n\
{\n\
float time=czm_frameNumber/snowSpeed;\n\
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
return k*w;\n\
}\n\
out vec4 fragColor;\n\
void main(void){\n\
vec2 resolution=czm_viewport.zw;\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 finalColor=vec3(0);\n\
//float c=smoothstep(1.,0.3,clamp(uv.y*.3+.8,0.,.75));\n\
float c=0.;\n\
c+=snow(uv,30.)*.0;\n\
c+=snow(uv,20.)*.0;\n\
c+=snow(uv,15.)*.0;\n\
c+=snow(uv,10.);\n\
c+=snow(uv,8.);\n\
c+=snow(uv,6.);\n\
c+=snow(uv,5.);\n\
finalColor=(vec3(c));\n\
fragColor=mix(texture(colorTexture,v_textureCoordinates),vec4(finalColor,1),.5);\n\
}\n\
";
}
}
export default SnowEffect;

45
src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue
View File

@ -46,7 +46,6 @@ import * as Cesium from 'cesium';
import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool';
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool';
import { useWeatherParticle } from '@/components/CesiumMap/mixins/useWeatherParticle';
import {
drawLocation,
drawPolyline,
@ -101,11 +100,6 @@ import toolbarWarehouseIcon from '@/assets/icons/toolbar_warehouse.png';
import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
import toolbarRoadIcon from '@/assets/icons/toolbar_road.png';
import toolbarKeyareaIcon from '@/assets/icons/toolbar_keyarea.png';
// 气象效果图标
import toolbarSunnyIcon from '@/assets/icons/toolbar_sunny.png';
import toolbarRainIcon from '@/assets/icons/toolbar_rain.png';
import toolbarSnowIcon from '@/assets/icons/toolbar_snow.png';
import toolbarFogIcon from '@/assets/icons/toolbar_fog.png';
const props = defineProps({
viewer: {
@ -117,7 +111,6 @@ const props = defineProps({
let viewer = null
let drawTool = null
let measureTool = null
let weatherParticle = null
let bus = null
let toolbarLayer = null
let primitiveList = []
@ -249,32 +242,6 @@ const options = ref([
id: 3,
icon: weatherIcon,
label: '气象效果',
subtools: [
{
id: 31,
name: 'sunny',
label: '晴天',
icon: toolbarSunnyIcon
},
{
id: 32,
name: 'rain',
label: '下雨',
icon: toolbarRainIcon
},
{
id: 33,
name: 'snow',
label: '下雪',
icon: toolbarSnowIcon
},
{
id: 34,
name: 'fog',
label: '起雾',
icon: toolbarFogIcon
},
]
},
{
id: 4,
@ -321,7 +288,7 @@ watch(() => props.viewer, (v) => {
drawTool = useDrawTool(viewer);
measureTool = useMeasureTool(viewer);
// 绘制、测量事件参数
// 绑定事件
params = {
drawTool,
measureTool,
@ -329,11 +296,6 @@ watch(() => props.viewer, (v) => {
toolbarLayer,
primitiveList,
}
// 气象效果
weatherParticle = useWeatherParticle(viewer);
// 绑定事件
bus = useEventBus(viewer);
// 基础绘制部分
bus.on('toolbar_location', drawLocation);
@ -358,11 +320,6 @@ watch(() => props.viewer, (v) => {
bus.on('toolbar_warehouse', drawWarehouse);
bus.on('toolbar_road', drawRoad);
bus.on('toolbar_keyarea', drawKeyarea);
// 气象效果部分
bus.on('toolbar_sunny', () => weatherParticle && weatherParticle.destroy())
bus.on('toolbar_rain', () => weatherParticle && weatherParticle.rain())
bus.on('toolbar_snow', () => weatherParticle && weatherParticle.snow())
bus.on('toolbar_fog', () => weatherParticle && weatherParticle.fog())
// 清空
bus.on('toolbar_clear', toolbarClear);
}

9
src/views/systemTemplate/forestFire/index.vue
View File

@ -10,7 +10,7 @@
import { shallowRef } from 'vue';
import * as Cesium from 'cesium';
import CesiumMap from '@/components/CesiumMap/index.vue';
import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus';
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
import Toolbar from './Toolbar';
import DialogPropertyGrid from './DialogPropertyGrid';
import { setPropertyData } from './DialogPropertyGrid/property';
@ -38,7 +38,10 @@ const initMap = (v) => {
console.log('地图已初始化', v);
const bus = useEventBus(viewerRef.value)
// view 模式下，点击地图要素显示属性编辑弹窗
// bus.on('hoverTest', ({ screenPosition }) => {
// console.log('hoverTest 事件触发屏幕位置:', screenPosition);
// });
bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => {
console.log('左键点击屏幕位置:', position);
// 如果点击的是实体，则获取该实体的属性数据
@ -68,7 +71,7 @@ const initMap = (v) => {
}
}
}
}, ScreenMode.VIEW)
})
};
</script>