# # 雨组件

> mapgis-3d-rain-effect

## # 属性

### # `speed`

- 类型: `Number`
- 默认值: `1.0`
- 侦听属性
- 描述: 雨的速度，取值范围为[0,+∞]，数值越大，雨的速度越大

### # `angle`

- 类型: `Number`
- 默认值: `0`
- 侦听属性
- 描述: 雨丝下落的角度，取值范围为[0,180]

### # `enable`

- 类型: `Boolean`
- 默认值: `true`
- 侦听属性
- 描述: 控制雨组件的显示

## # 雨组件使用方法

    <template>
      <mapgis-web-scene
          lib-path="static/libs/cdn/cesium/Cesium.js"
          plugin-path="static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
      >
        <mapgis-3d-ogc-wmts-layer
            :baseUrl="urlT"
            :wmtsLayer="layer"
            :tileMatrixSet="tileMatrixSetID"
            :format="format"
            :tilingScheme="srs"
            :token="token"
        />
        <mapgis-3d-igs-m3d
            :auto-reset="autoReset"
            :maximum-screen-space-error="maximumScreenSpaceError"
            :url="m3dUrl"
        >
        </mapgis-3d-igs-m3d>
        <mapgis-3d-rain-effect :speed="speed" :angle="angle" :enable="enable" ref="rain">
        </mapgis-3d-rain-effect>
        <mapgis-ui-button @click="changeSpeed" class="changeSpeed">加快速度</mapgis-ui-button>
        <mapgis-ui-button @click="changeAngle" class="changeAngle">改变角度</mapgis-ui-button>
        <mapgis-ui-button @click="changeShow" class="changeShow">改变显示</mapgis-ui-button>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      name: "rain_cesium",
      data() {
        return {
          //天地图参数
          urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
          tileMatrixSetID: "c",
          srs: "EPSG:4326",
          layer: "img",
          format: "tiles",
          token: {
            key: "tk",
            value: "f5347cab4b28410a6e8ba5143e3d5a35"
          },
          m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
          autoReset: true,
          maximumScreenSpaceError: 8,
          speed: 5.0,
          angle:0,
          enable:false,
        }
      },
      methods: {
        changeSpeed() {
          this.speed += 5;
        },
        changeAngle(){
          this.angle += 5;
          console.log("angle",this.angle)
        },
        changeShow() {
          let vm = this;
          vm.enable = !(vm.enable);
        }
      }
    }
    </script>

    <style scoped>
    .changeSpeed {
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .changeAngle {
      position: absolute;
      top: 20px;
      left: 200px;
    }
    .changeShow {
      position: absolute;
      top: 20px;
      left: 400px;
    }
    </style>