cesium2

<template>
  <div class="hello">
    <el-row class="btns">
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click="positionWH">威海</el-button>
      <el-button type="success" @click="AddRainEffect">下雨</el-button>
      <el-button type="info" @click="RemoveRainEffect">停</el-button>
      <el-button type="warning" @click="AddRainEffect('1')">下雪</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      viewer: null,
      _rainEffect: null,
    };
  },
  mounted() {
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYTFiMTI0MS1kN2IwLTQ0MTctODE2Ni04ZWE0MTJkYzUzMmYiLCJpZCI6ODA2NjcsImlhdCI6MTY0MzA4NzcwNX0.kj35MO4cTZMlBibX1MiB54MZ7D9LS2rvrEB0grmjIwQ";
    this.earthInit();
  },
  methods: {
    earthInit() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false, //是否显示图层选择器
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: true, //是否显示geocoder小器件，右上角查询按钮
        homeButton: true, //是否显示Home按钮
        infoBox: false, //是否显示信息框
        sceneModePicker: false, //是否显示3D/2D选择器
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, //是否显示时间轴
        navigationHelpButton: false, //是否显示右上角的帮助按钮
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        clock: new Cesium.Clock(), //用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
        imageryProviderViewModels:
          Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
        terrainProviderViewModels:
          Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
        //瓦片地址地图
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
        //地形
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,
          requestWaterMask: true,
        }),
        fullscreenElement: document.body, //全屏时渲染的HTML元素,
        useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
        targetFrameRate: undefined, //使用默认render loop时的帧率
        showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
        automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
        contextOptions: undefined, //传递给Scene对象的上下文参数（scene.options）
        sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
        mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
        dataSources: new Cesium.DataSourceCollection(),
        //需要进行可视化的数据源的集合
        clock: new Cesium.Clock({
          currentTime: Cesium.JulianDate.fromDate(new Date()),
        }),
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
      // 数值越大越远
      Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.8; //摄像机视口远近参数，可设置地球大小
      //定位到中国
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        73.0,
        3.0,
        135.0,
        53.0
      );
      this.viewer.camera.flyHome(5);
    },
    //定位到威海
    positionWH() {
      // camera 相机 定位到威海
      // 参数精度，维度，高度
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          122.116394,
          37.509691,
          28000.0
        ),
      });
    },
    //下雨着色器
    FragmentShader_Rain() {
      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 / 200.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\
    ";
    },

    //定义下雪场景 着色器
    FragmentShader_Snow() {
      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\
  ";
    },

    //添加下雨
    AddRainEffect(type) {
      let fs_rain;
      if (type == "1") {
        //雪
        fs_rain = this.FragmentShader_Snow();
      } else {
        fs_rain = this.FragmentShader_Rain();
      }
      let collection = this.viewer.scene.postProcessStages;

      this._rainEffect = new Cesium.PostProcessStage({
        name: "czm_rain",
        fragmentShader: fs_rain,
      });
      collection.add(this._rainEffect);
    },
    //移除
    RemoveRainEffect() {
      this.viewer.scene.postProcessStages.remove(this._rainEffect);
      this._rainEffect = null;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  height: 100%;

  #cesiumContainer {
    height: 100%;
  }
}
.btns {
  position: absolute;
  z-index: 1;
}
</style>