style: 蓝色滤镜公共方法

罗广辉

2025-04-13 9a0f2850a860bd8dc446320da6fde0bb60957891

 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,