qe-effect

三维特效组件，其中包括：雾、雨、雪、动画圆、雷达扫描等特效。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <el-button-group>
        <el-button 
          type="primary" 
          size="mini" 
          @click="handler('rain')">
          雨
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handler('snow')">
          雪
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handler('fog')">
          雾
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handler('stormy')">
          雷电
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handler('stormyRain')">
          雷雨
        </el-button>
        <el-button 
          type="primary" 
          size="mini" 
          @click="handler('circleScan')">
          圆环扫描
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handler('radarScan')">
          雷达扫描
        </el-button>
      </el-button-group>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-effect
        :effect-type="effectType"
        :effect-options="effectOptions"
        :position="[118.78600228, 31.9135434, 1.66113721]"
      >
      </qe-effect>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer,QeEffect } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementUI)
export default {
  components: {
    QeViewer, 
    QeEffect
  },
  data () {
    return {
      viewer: null,
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      effectType: 'snow',
      effectOptions: {}
    };
  },
  methods: {
    handler(type) {
      this.effectType = type
      switch (type) {
        case "snow":
          this.effectOptions = {}
          break;
        case "rain":
          this.effectOptions = {}
          break;
        case "stormy":
          this.effectOptions = {}
          break;
        case "stormyRain":
          this.effectOptions = {}
          break;
        case "fog":
          this.effectOptions = {
            fogByDistance: {near: 60,nearValue: 0.5,far: 2000,farValue: 1.0}
          }
          break;  
        case "circleScan":
          this.effectOptions = {
            radius: 1000,
            duration: 1
          }
          break;
        case "radarScan":
          this.effectOptions = {
            radius: 1000,
            duration: 1,
            color: 'green'
          }
          break;
        default:
          break;
      }
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
effectType	特效类型	string	参照 effectType 说明	—
effectOptions	特效可选参数	object	参照 effectType 说明	—
position	圆环扫描和雷达扫描的圆心坐标 [lng, lat, alt]	array	—	—

effectType-说明

// 雪
{
  effectType: 'snow',
  effectOptions: {
    id: 'xxxxxxxx' // 唯一 id 可自定义，也有默认值
  }
}
// 雨
{
  effectType: 'rain',
  effectOptions: {
    id: 'xxxxxxxx' // 唯一 id 可自定义，也有默认值
  }
}
// 闪电
{
  effectType: 'stormy',
  effectOptions: {
    id: 'xxxxxxxx' // 唯一 id 可自定义，也有默认值
  }
// 雷雨
{
  effectType: 'stormyRain',
  effectOptions: {
    id: 'xxxxxxxx' // 唯一 id 可自定义，也有默认值
  }
}
}
// 雾
{
  effectType: 'fog',
  effectOptions: {
    id: 'xxxxxxxx', // 唯一 id 可自定义，也有默认值
    fogByDistance: {near: 10,nearValue: 0,far: 2000,farValue: 1.0}, // 距离可见
    color: "red" // 雾颜色,一般不用调整
  }
}
// 扫描圈
{
  effectType: 'circleScan',
  effectOptions: {
    id: 'xxxxxxxx', // 唯一 id 可自定义，也有默认值
    radius: 100, // 半径(米)
    duration: 1, // 动画时间（秒）
    color: "red" // 颜色
  }
}
// 雷达扫描圈
{
  effectType: 'radarScan',
  effectOptions: {
    id: 'xxxxxxxx', // 唯一 id 可自定义，也有默认值
    radius: 100, // 半径(米)
    duration: 1, // 动画时间（秒）
    color: "red" // 颜色
  }
}

Events

事件的使用请参照上面Effect 实例

---

// 可选事件
"ready" // 组件装载后，返回当前实例对象