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/assets/images/signMachineNest/rwqfd.png | 0
src/utils/cesium-tsa.js | 35 +----------
src/utils/cesium/common.js | 46 +++++++++++++++
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue | 63 +++++++++++++++++++-
4 files changed, 108 insertions(+), 36 deletions(-)
diff --git a/src/assets/images/signMachineNest/rwqfd.png b/src/assets/images/signMachineNest/rwqfd.png
new file mode 100644
index 0000000..24f772a
--- /dev/null
+++ b/src/assets/images/signMachineNest/rwqfd.png
Binary files differ
diff --git a/src/utils/cesium-tsa.js b/src/utils/cesium-tsa.js
index c8bc0dd..baa5779 100644
--- a/src/utils/cesium-tsa.js
+++ b/src/utils/cesium-tsa.js
@@ -2,6 +2,7 @@
import AmapMercatorTilingScheme from './cesium/AmapMercatorTilingScheme/index'
import store from '@/store'
import { Terrain } from 'cesium'
+import { addBlueFilter } from '@/utils/cesium/common'
// 定义全局的viewer变量防止重复生成
let viewer = null
@@ -282,11 +283,11 @@
curLayer.mapLayer.gamma = 0.3 // 伽马校正（小于1.0使颜色更鲜艳）
curLayer.invertColor = true // 启用反色
// curLayer.filterRGB = [0, 50, 100]
- filterLayer({
+ addBlueFilter({
bInvertColor: true,
bFilterColor: true,
filterColor: '#4e70a6'
- })
+ },viewer)
}
if (curLayer.mapLayer) curLayer.mapLayer.show = true
@@ -304,36 +305,6 @@
})
// 2D/3D切换
switchModel(store.state.common.mapSetting.visual)
- }
-
- const filterLayer = (options) => {
- 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 addCustomLayers = (layerName, options) => {
diff --git a/src/utils/cesium/common.js b/src/utils/cesium/common.js
index db8e80d..053ff70 100644
--- a/src/utils/cesium/common.js
+++ b/src/utils/cesium/common.js
@@ -157,3 +157,49 @@
return { longitude: newLon, latitude: newLat }
}
+
+/**
+ * 添加蓝色滤镜
+ * @param options
+ * @param viewer
+ * @param layer
+ */
+export const addBlueFilter = (options, viewer, layer) => {
+ if (layer){
+ layer.brightness = 0.6 // 亮度（默认值）
+ layer.contrast = 1.8 // 对比度（负值降低对比度）
+ layer.hue = 1 // 色相（弧度值，3.0可能导致紫色）
+ layer.saturation = 0 // 增加饱和度强化蓝色
+ layer.gamma = 0.3 // 伽马校正（小于1.0使颜色更鲜艳）
+ }
+
+ 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)
+ }
+}
+
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