style: 蓝色滤镜公共方法

罗广辉

2025-04-13 9a0f2850a860bd8dc446320da6fde0bb60957891

style: 蓝色滤镜公共方法

 src/assets/images/signMachineNest/rwqfd.png

 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) => {

 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)
    }
}


 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,