zbcx_ckyc 1.0.0

package/src/plugins/zbcxCesium/pub/Opacity.vue

@@ -0,0 +1,139 @@
+<style lang="scss" scoped>
+
+</style>
+
+<template>
+  <div style="padding-left:5%;display: flex;align-items: center;height: 100%;">
+    <span style="font-size:0.14rem;width:30%;">{{ layerlabel }}:</span>
+    <el-slider style="width:60%;" v-model="value" :max="1" :step="0.1" @change="onChange"  />
+  </div>
+</template>
+
+<script>
+/**
+ * 导航树右键：一张图透明度设置
+ */
+export default
+{
+  /**
+   * 调用说明：
+   * @param {String}  [scene = 'globe']       场景
+   */
+  mixins: [cx.mixin.IPlugBase],
+  data()
+  {
+    return {
+      value: 1,
+      layerlabel: '',
+      flag: 'opacity-',
+      localVals: {}
+    }
+  },
+
+  created()
+  {
+    this.layerlabel = this.params.label
+    this.start()
+  },
+
+  unmounted()
+  {
+    cx.run.closeRun('TOpacity')
+  },
+
+  methods:
+  {
+    start()
+    {
+      // 获取当前图层的透明度
+      if (this.params.att.maptype === 'earth')
+        this.value = window.Viewer.viewer.imageryLayers._layers[0].alpha
+      else if (cx.localCache.get(this.flag))
+      {
+        this.localVals = cx.localCache.get(this.flag)
+        if (this.localVals[this.flag + this.params.att.name])
+          this.value = this.localVals[this.flag + this.params.att.name]
+      }
+    },
+
+    onChange(val, getVal)
+    {
+      let type = this.params.att.maptype
+      switch (type.toLocaleLowerCase())
+      {
+      case 'wms':
+        this.changeImageryLayer(val, this.params.att)
+        break
+      case '3dtiles':
+        this.changeTileset(val, this.params.att)
+        break
+      case 'earth':
+        this.changeEarth(val)
+        break
+      default:
+        console.log('不支持的maptype', this.params.att.maptype)
+        break
+      }
+    },
+
+    /**
+     * @param   {String} name   cesium3Dtileset的名字
+     * @returns {primitive}     primitive
+     */
+    changeTileset(val, att = {})
+    {
+      let tilesetLayer = window.Viewer.layers.getLayerById(att.name)
+      if (tilesetLayer && tilesetLayer.delegate)
+      {
+        let tileset = tilesetLayer.delegate.get(0)
+        // 设置3dtiles模型透明度
+        tileset.style = new Cesium.Cesium3DTileStyle({ color: `color('rgba(255,255,255,${val})')` })
+        this.setVal(val, att.name)
+      }
+    },
+
+    // 改变图层的透明度
+    changeImageryLayer(val, att = {})
+    {
+      let wms = window.Viewer.layers.getImageryLayerById(att._bid)
+      if (wms)
+      {
+        if (wms.delegate)
+        {
+          this.setVal(val, att.name)
+          wms.alpha = val
+        }
+      }
+    },
+
+    // 改变地球的透明度
+    changeEarth(value)
+    {
+      // 如果地球透明 globe.translucency.enabled 要设置为true
+      if (value === 1)
+      {
+        window.Viewer.viewer.scene.globe.translucency.enabled = false
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(1 / 255, 19 / 255, 70 / 255, 1)
+      }
+      else
+      {
+        window.Viewer.viewer.scene.globe.translucency.enabled = true
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)
+      }
+      // 影像图层设置透明度
+      window.Viewer.viewer.imageryLayers._layers.forEach(layer =>
+      {
+        layer.alpha = value
+      })
+      window.Viewer.viewer.scene.globe.showSkirts = false  // 去网格化
+    },
+
+    setVal(val, name)
+    {
+      this.localVals[this.flag + name] = val
+      cx.localCache.set(this.flag, this.localVals)
+    }
+  }
+}
+
+</script>

package/src/plugins/zbcxCesium/pub/PubCxe.js

@@ -0,0 +1,97 @@
+
+class PubCxe
+{
+  constructor(opt = {})
+  {
+    this._viewer = opt.viewer || window.Viewer
+  }
+  
+  // 飞到某个点
+  flyToPosi({ longitude, latitude, height, heading = 0, pitch = -90, roll = 0 })
+  {
+    this._viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
+      orientation: {
+        heading: Cesium.Math.toRadians(heading),  // y
+        pitch: Cesium.Math.toRadians(pitch),      // x
+        roll: Cesium.Math.toRadians(roll)         // z
+      }
+    })
+  }
+ 
+  // 应该根据数据库的配置来取
+  loadBasemap(ogc)
+  {
+    ogc.forEach(wms =>
+    {
+      if (wms.maptype)
+      {
+        let baseLayer
+        switch (wms.maptype)
+        {
+        case 'tdt':
+          baseLayer = new cxe.ImageryLayer('tdt', {
+            style: wms.format,
+            maximumLevel: 16,
+            key: JSON.parse(wms.params).key
+          }); break
+        case 'gaode':
+        case 'tencent':
+        case 'baidu':
+        case 'osm':
+          baseLayer = new cxe.ImageryLayer(wms.maptype, {
+            style: wms.format,
+            maximumLevel: 16
+          }); break
+        case 'arcgis':
+          baseLayer = new cxe.ImageryLayer(wms.maptype, {
+            url: wms.url
+          }); break
+        }
+        if (baseLayer)
+        {
+          baseLayer.basemap = 1
+          baseLayer.att = wms
+          this._viewer.layers.addImageryLayer(baseLayer)
+        }
+      }
+    })
+  }
+
+  initTer(url)
+  {
+    let terrainLayer = new cxe.TerrainLayer('xyz', {
+      url: url
+    })
+    this._viewer.layers.addTerrain(terrainLayer)
+  }
+
+  addBillbord(longitude, latitude, height, imgSrc)
+  {
+    // 添加点图层
+    let pos = { lng: Number(longitude), lat: Number(latitude), alt: Number(height) }
+    let layer = new cxe.VectorLayer('layer')
+    this._viewer.layers.addLayer(layer)
+    let Billboard = new cxe.Billboard(pos, imgSrc)
+    layer.addOverlay(Billboard)
+  }
+
+  /**
+  * 根据模型名称找到模型，并返回properties
+  * @param {String} name 3dtiles的name || cx.localCache.get('activemodel')
+  * @returns 3dtiles
+  */
+  static getModelProp(name, viewer)
+  {
+    let temp
+    let layers = viewer.layers.getLayers()
+    layers.forEach(pri =>
+    {
+      if (pri._att.name === name && pri._delegate._primitives[0] instanceof Cesium.Cesium3DTileset)
+        temp = pri._delegate._primitives[0]
+    })
+    return temp.properties
+  }
+}
+// const pubCxe = new PubCxe()
+export default PubCxe

package/src/plugins/zbcxCesium/pub/SceneSet.vue

@@ -0,0 +1,178 @@
+<style lang="scss" scoped>
+  :deep(.el-form-item__label){color:#000}
+  :deep(.el-button .el-color-dropdown__link-btn){width:56px !important;color: var(--cx-color-deep-3);}
+  .el-slider{width: 90%;float: left;}
+</style>
+
+<template>
+<div class='cx-full-12px' style="padding-right:10px; overflow:auto">
+  <el-form label-width="120px" style="margin-top:24px">
+    <el-form-item :label="$loc('dz.earthSwith')+'：'">
+      <el-switch
+       v-model="showEarth"
+       :active-text="$loc('dz.base.open')"
+       :inactive-text="$loc('dz.base.close')"
+       @change="setEarth"/>
+    </el-form-item>
+    <el-form-item :label="$loc('dz.depthTestAgainstTerrain')+'：'">
+      <el-switch
+       v-model="depthTest"
+       :active-text="$loc('dz.base.open')"
+       :inactive-text="$loc('dz.base.close')"
+       @change="setDepthTestAgainstTerrain"/>
+    </el-form-item>
+    <el-form-item :label="'透明度：'">
+      <el-slider v-model="value1" show-input :min="0" :max="1" :step="0.01" @change="transparent()"></el-slider>
+    </el-form-item>
+    <el-form-item :label="'地球亮度：'">
+      <el-slider v-model="value3" show-input :min="0" :max="10" :step="0.01" @change="setScenes()"></el-slider>
+    </el-form-item>
+    <el-form-item :label="'对比度：'">
+      <el-slider v-model="value4" show-input :min="0" :max="10" :step="0.02" @change="setScenes()"></el-slider>
+    </el-form-item>
+    <el-form-item :label="'色调：'">
+      <el-slider v-model="value5" show-input :min="0" :max="10" :step="0.02" @change="setScenes()"></el-slider>
+    </el-form-item>
+    <el-form-item :label="'饱和度：'">
+      <el-slider v-model="value6" show-input :min="0" :max="10" :step="0.02" @change="setScenes()"></el-slider>
+    </el-form-item>
+    <el-form-item :label="'gamma：'">
+      <el-slider v-model="value7" show-input :min="0" :max="10" :step="0.02" @change="setScenes()"></el-slider>
+    </el-form-item>
+  </el-form>
+</div>
+</template>
+
+<script>
+/**
+* 组件 - 场景设置
+*
+* 调用说明:
+* @prop    {Object}    viewer                      	Cesium的viewer对象
+*
+*/
+
+/**
+* 修改记录:
+* 2023-08-28   张光辉      首次提交
+*/
+export default {
+  mixins: [cx.mixin.IPlugBase],
+  data()
+  {
+    return {
+      showEarth: true,
+      depthTest: true,
+      flag: 0,
+      value1: 1,
+      value2: 0.2,
+      value3: 1,
+      value4: 1,
+      value5: 0,
+      value6: 1,
+      value7: 1
+    }
+  },
+  created()
+  {
+    this.viewer = this.params.viewer ? window[this.params.viewer] : window.Viewer
+    this.initVal()
+  },
+  mounted()
+  {
+    this.setScenes()
+  },
+  methods: {
+    initVal()
+    {
+      this.showEarth = this.viewer.scene.globe.show
+      this.depthTest = this.viewer.scene.globe.depthTestAgainstTerrain
+      this.value1 = this.viewer.viewer.imageryLayers._layers[0].alpha
+      this.value3 = this.viewer.viewer.imageryLayers.get(0).brightness
+      this.value4 = this.viewer.viewer.imageryLayers.get(0).contrast
+      this.value5 = this.viewer.viewer.imageryLayers.get(0).hue
+      this.value6 = this.viewer.viewer.imageryLayers.get(0).saturation
+      this.value7 = this.viewer.viewer.imageryLayers.get(0).gamma
+    },
+
+    // 透明度
+    transparent()
+    {
+      // 如果地球透明 globe.translucency.enabled 要设置为true
+      if (this.value1 === 1)
+      {
+        window.Viewer.viewer.scene.globe.translucency.enabled = false
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(1 / 255, 19 / 255, 70 / 255, 1)
+      }
+      else
+      {
+        window.Viewer.viewer.scene.globe.translucency.enabled = true
+        window.Viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)
+      }
+      this.viewer.viewer.imageryLayers._layers.forEach(layer =>
+      {
+        layer.alpha = this.value1
+      })
+    },
+    
+   
+    // 场景设置
+    setScenes()
+    {
+      let imageryLayers = this.viewer.viewer.imageryLayers
+      let viewModel = {
+        brightness: 3,
+        contrast: 0,
+        hue: 0,
+        saturation: 0,
+        gamma: 0
+      }
+      Cesium.knockout.track(viewModel)
+
+      let layer = imageryLayers.get(0)
+      layer.brightness = this.value3
+      layer.contrast = this.value4
+      layer.hue = this.value5
+      layer.saturation = this.value6
+      layer.gamma = this.value7
+      let updateViewModel = () =>
+      {
+        if (imageryLayers.length > 0)
+        {
+          let layer = imageryLayers.get(0)
+          viewModel.brightness = layer.brightness
+          viewModel.contrast = layer.contrast
+          viewModel.hue = layer.hue
+          viewModel.saturation = layer.saturation
+          viewModel.gamma = layer.gamma
+        }
+      }
+      imageryLayers.layerAdded.addEventListener(updateViewModel)
+      imageryLayers.layerRemoved.addEventListener(updateViewModel)
+      imageryLayers.layerMoved.addEventListener(updateViewModel)
+      updateViewModel()
+    },
+
+    // 设置地球以及太阳、月亮、天空盒的显示隐藏
+    setEarth()
+    {
+      this.viewer.scene.sun.show = this.showEarth              // 太阳显示控制
+      this.viewer.scene.moon.show = this.showEarth
+      this.viewer.scene.globe.show = this.showEarth            // 不显示地球
+      this.viewer.scene.skyBox.show = this.showEarth
+      this.viewer.scene.skyAtmosphere.show = this.showEarth
+      if (this.showEarth)
+        this.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)
+      else
+        this.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 1)
+    },
+
+    // 设置是否开启深度检测
+    setDepthTestAgainstTerrain()
+    {
+      this.viewer.scene.globe.depthTestAgainstTerrain = this.depthTest
+    }
+  }
+}
+</script>
+

package/src/plugins/zbcxCesium/pub/ShowEffect.vue

@@ -0,0 +1,216 @@
+<style lang='scss' scoped>
+.formFull{display: flex;align-items: center;justify-content: center;margin-top: 4%;}
+</style>
+
+<template>
+  <div style="position:relative">
+    <div class='cx-full-12px'>
+      <el-form label-position="right" class="formFull">
+        <el-form-item>
+          <el-button
+            :type="button.type"
+            :plain="button.plain"
+            :round="button.round"
+            @click="onRain()">
+              雨
+          </el-button>
+          <el-button
+            :type="button.type"
+            :plain="button.plain"
+            :round="button.round"
+            @click="onSnow()">
+              雪
+          </el-button>
+          <el-button
+            :type="button.type"
+            :plain="button.plain"
+            :round="button.round"
+            @click="onFog()">
+              雾
+          </el-button>
+          <el-button
+            :type="button.type"
+            :plain="button.plain"
+            :round="button.round"
+            @click="onRemove()">
+              清除
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * 组件--特效
+ * 罗志远
+ *
+ * 增加雾特效
+ * zoujinyun 20210311
+ */
+const STATE_RAIN = 1
+const STATE_SNOW = 2
+const STATE_FOG = 3
+
+export default {
+  mixins: [cx.mixin.IPlugBase, cx.mixin.IFormBase],
+  data()
+  {
+    return {
+      flag: 0
+    }
+  },
+  created()
+  {
+    this.viewer = this.params.viewer ? window[this.params.viewer] : window.Viewer
+  },
+  unmounted()
+  {
+    this.onRemove()
+  },
+  mounted()
+  {
+  },
+  methods: {
+    // 天气
+    weather(flag)
+    {
+      // eslint-disable-next-line no-unreachable
+      let collection = this.viewer.scene.postProcessStages
+      let fsState
+      if (flag === STATE_RAIN)
+        fsState = this.FS_Snow()
+      else if (flag === STATE_SNOW)
+        fsState = this.FS_rain()
+      else if (flag === STATE_FOG)
+        fsState = this.FS_Fog()
+      let process = new Cesium.PostProcessStage({
+        name: 'czm_snow',
+        fragmentShader: fsState
+      })
+      collection.add(process)
+
+      this.viewer.scene.skyAtmosphere.hueShift = -0.8
+      this.viewer.scene.skyAtmosphere.saturationShift = -0.7
+      this.viewer.scene.skyAtmosphere.brightnessShift = -0.33
+      this.viewer.scene.fog.density = 0.001
+      this.viewer.scene.fog.minimumBrightness = 0.8
+    },
+    // 定义下雪场景着色器
+    FS_Snow()
+    {
+      // eslint-disable-next-line no-multi-str
+      return 'uniform sampler2D colorTexture;\n\
+      varying vec2 v_textureCoordinates;\n\
+      \n\
+      float snow(vec2 uv,float scale)\n\
+      {\n\
+          float time = czm_frameNumber / 60.0;\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)*0.01);\n\
+          return k*w;\n\
+      }\n\
+      \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 = 0.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\
+          gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5); \n\
+      \n\
+      }\n\
+      '
+    },
+    // 定义下雨场景着色器
+    FS_rain()
+    {
+      // eslint-disable-next-line no-multi-str
+      return 'uniform sampler2D colorTexture;\n\
+        varying vec2 v_textureCoordinates;\n\
+        \n\
+        float hash(float x){\n\
+          return fract(sin(x*133.3)*13.13);\n\
+      }\n\
+      \n\
+      void main(void){\n\
+      \n\
+        float time = czm_frameNumber / 60.0;\n\
+      vec2 resolution = czm_viewport.zw;\n\
+      \n\
+      vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
+      vec3 c=vec3(.6,.7,.8);\n\
+      \n\
+      float a=-.4;\n\
+      float si=sin(a),co=cos(a);\n\
+      uv*=mat2(co,-si,si,co);\n\
+      uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
+      \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\
+      \n\
+      gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5);  \n\
+      }\n\
+    '
+    },
+    // 定义起雾场景着色器
+    FS_Fog()
+    {
+      return 'uniform sampler2D colorTexture;\n' +
+            '  uniform sampler2D depthTexture;\n' +
+            '  varying vec2 v_textureCoordinates;\n' +
+            '  void main(void)\n' +
+            '  {\n' +
+            '      vec4 origcolor=texture2D(colorTexture, v_textureCoordinates);\n' +
+            '      vec4 fogcolor=vec4(0.8,0.8,0.8,0.5);\n' +
+            '      float depth = czm_readDepth(depthTexture, v_textureCoordinates);\n' +
+            '      vec4 depthcolor=texture2D(depthTexture, v_textureCoordinates);\n' +
+            '      float f=(depthcolor.r-0.55)/0.5;\n' +
+            '      if(f<0.0) f=0.0;\n' +
+            '      else if(f>1.0) f=1.0;\n' +
+            '      gl_FragColor = mix(origcolor,fogcolor,f);\n' +
+            '   }'
+    },
+
+    // 雪
+    onSnow()
+    {
+      this.flag = STATE_RAIN
+      this.viewer.scene.postProcessStages.removeAll()
+      this.weather(this.flag)
+    },
+    // 雨
+    onRain()
+    {
+      this.flag = STATE_SNOW
+      this.viewer.scene.postProcessStages.removeAll()
+      this.weather(this.flag)
+    },
+    // 雾
+    onFog()
+    {
+      this.flag = STATE_FOG
+      this.viewer.scene.postProcessStages.removeAll()
+      this.weather(this.flag)
+    },
+    // 清除
+    onRemove()
+    {
+      this.viewer.scene.postProcessStages.removeAll()
+    }
+  }
+}
+</script>
+