From 9a0f2850a860bd8dc446320da6fde0bb60957891 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sun, 13 Apr 2025 16:28:10 +0800
Subject: [PATCH] style: 蓝色滤镜公共方法
---
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue | 63 +++++++++++++++++++++++++++++--
1 files changed, 59 insertions(+), 4 deletions(-)
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue
index a4df43e..998cb74 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue
@@ -9,8 +9,43 @@
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
import lineImg from '@/assets/images/arrow-right-blue.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
+import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
+import endPointImg from '@/assets/images/EndPointicon.png'
+import { addBlueFilter } from '@/utils/cesium/common'
const props = defineProps(['detailsData'])
+
+
+const filterLayer = (options,viewer) => {
+ const { bInvertColor, bFilterColor, filterColor } = options
+ const color = new Cesium.Color.fromCssColorString(filterColor)
+ const filterRGB = [
+ Math.round(color.red * 255),
+ Math.round(color.green * 255),
+ Math.round(color.blue * 255)
+ ]
+ let fragShader = viewer.scene.globe._surfaceShaderSet.baseFragmentShaderSource.sources
+ for (let i = 0; i < fragShader.length; i++) {
+ const strS = 'color = czm_saturation(color, textureSaturation);\n#endif\n'
+ let strT = 'color = czm_saturation(color, textureSaturation);\n#endif\n'
+ if (bInvertColor) {
+ strT += `
+ color.r = 1.0 - color.r;
+ color.g = 1.0 - color.g;
+ color.b = 1.0 - color.b;
+ `
+ }
+ if (bFilterColor) {
+ strT += `
+ color.r = color.r * ${filterRGB[0]}.0/255.0;
+ color.g = color.g * ${filterRGB[1]}.0/255.0;
+ color.b = color.b * ${filterRGB[2]}.0/255.0;
+ `
+ }
+ fragShader[i] = fragShader[i].replace(strS, strT)
+ }
+}
+
const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -39,7 +74,15 @@
baseLayer: false,
fullscreenButton: false,
})
- viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
+ const gdLayer = viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
+ const options = {
+ bInvertColor: true,
+ bFilterColor: true,
+ filterColor: '#4e70a6'
+ }
+ // 添加蓝色滤镜
+ addBlueFilter(options,viewer,gdLayer)
+
viewer.scene.morphTo2D(0)
//设置默认点
viewer.camera.setView({
@@ -53,14 +96,26 @@
const [lon, lat] = item.Point.coordinates.split(',')
return Cartesian3.fromDegrees(Number(lon), Number(lat))
})
+ // 起点
viewer.entities.add({
position: positions[0],
billboard: {
- image: new Cesium.ConstantProperty(uavImg),
- width: 24,
- height: 24,
+ image: new Cesium.ConstantProperty(rwqfdImg),
+ width: 70,
+ height: 70,
},
})
+ // 终点
+ viewer.entities.add({
+ position: positions[positions.length-1],
+ billboard: {
+ image: new Cesium.ConstantProperty(endPointImg),
+ width: 30,
+ height: 30,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
+ },
+ })
+ // 路径线
viewer.entities.add({
polyline: {
width: 4,
--
Gitblit v1.9.3