# qe-flood

这个组件主要用于三维中添加淹没分析,支持新增、修改、暂停、删除操作。淹没分析是指根据指定的最大、最小高程值及淹没速度，动态模拟某区域水位由最小高程涨到最大高程的淹没过程。该功能应用于地形、倾斜模型等数据。

# 实例

隐藏代码

<template>
  <div class="container">
    <div class="bar" style="position: absolute;
  top: 340px;
  right: 228px;">
      <el-form label-width="70px">
        <el-form-item label="最低海拔">
          <el-input v-model="minHeiht" />
        </el-form-item>
        <el-form-item label="最高海拔">
          <el-input v-model="maxHeight" />
        </el-form-item>
        <el-form-item label="淹没速度">
          <el-input v-model="speed" />
        </el-form-item>
        <el-form-item label="分析区域">
          <el-button type="primary" size="mini" @click="drawPolygon()">
            绘制图形
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="add()">
            分析
          </el-button>
          <el-button type="info" size="mini" @click="pause()">
            暂停
          </el-button>
          <el-button type="danger" size="mini" @click="clear()">
            清除
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <qe-viewer
      :imagery-type="'AMap'"
      :default-view="defaultView"
      :location-bar="false"
      :viewer-mode="'3D'"
      @ready="readyHandler"
    >
      <qe-primitive-layer :visible="true" :name="'倾斜摄影图层'">
        <qe-tileset
          v-for="(url, index) in testJson"
          :key="index"
          :url="url"
          :is-zoom-to="true"
          :tileset-options="tilesetOptions"
          @ready="handleTileset"
        />
      </qe-primitive-layer>
      <qe-flood
        ref="flood"
        :positions="positions"
        :speed="speed"
        :min-heiht="minHeiht"
        :max-height="maxHeight"
        :flood-color="floodColor"
        @ready="handlerFlood"
      />
    </qe-viewer>
  </div>
</template>

<script>
import { PrimitivePlot } from '@qycloud/qearth'
import { QeViewer,QeFlood,QePrimitiveLayer,QeTileset } 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 {
  name: 'TestAnalysis',
  components: {
    QeViewer,
    QeTileset,
    QePrimitiveLayer,
    QeFlood
  },
  data() {
    return {
      testJson: ['http://221.226.186.58:8025/qearth-tileset/tileset.json'],
      defaultView: [122.06502636, 40.7235578, 1672, 357.62, -10.82, 359.99],
      positions: [
        [122.070346, 40.74897, 0],
        [122.060904, 40.749976, 0],
        [122.056038, 40.748859, 0],
        [122.054289, 40.746575, 0],
        [122.052546, 40.74403, 0],
        [122.062438, 40.738918, 0],
        [122.061701, 40.735537, 0],
        [122.061014, 40.731852, 0],
        [122.059006, 40.730159, 0],
        [122.069271, 40.724039, 0],
        [122.0791, 40.735799, 0],
        [122.071142, 40.740778, 0]
      ],
      speed: 3,
      minHeiht: 22,
      maxHeight: 160,
      floodColor: 'rgba(40,150,200,0.6)',
      floodoptions: {
        speed: 1,
        minHeiht: 2,
        maxHeight: 30,
        floodColor: 'rgba(0,100,0,0.6)'
      },
      tilesetOptions: {
        maximumMemoryUsage: 32,
        maximumScreenSpaceError: 16,
        baseScreenSpaceError: 1024,
        skipLevelOfDetail: true,
        dynamicScreenSpaceError: true,
        cullWithChildrenBounds: true,
        cullRequestsWhileMoving: true,
        preloadWhenHidden: true,
        preloadFlightDestinations: true,
        preferLeaves: true,
        loadSiblings: false
      }
    }
  },
  created() {

  },
  methods: {
    readyHandler(e) {
      window.viewer = e
      window.plotInstance = new PrimitivePlot(window.viewer, {
          usePrimitive: true,
          useMeasure: false,
          useContextMenu: true
        })
      window.plotInstance.on('drawEnd', e => {
        this.positions = e?.data?.positions
      })
      window.plotInstance.on('change', e => {
        this.positions = e?.data?.positions
      })
    },
    handlerFlood(flood, viewer) {
      this.flood = flood
      this.viewer = viewer
    },
    handleTileset(tileset) {
      tileset.setHeight(0)
    },
    add() {
      window.plotInstance.clear()
      this.flood.start()
    },
    clear() {
      window.plotInstance&&window.plotInstance.terminate()
      window.plotInstance && window.plotInstance.clear()
      this.flood.clear()
    },
    drawPolygon() {
      window.plotInstance&&window.plotInstance.terminate()
      window.plotInstance&&window.plotInstance.clear()
      window.plotInstance && window.plotInstance.draw('Polygon2D', {})
    },
    pause() {
      this.flood.pause()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 650px;
  width:940px;
}
.bar {
  
  padding: 20px 15px 0px 12px;
  border: 2px solid #008aff70;
  .el-form {
    ::v-deep .el-form-item__label {
      color: #fff;
      font-size: 14px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 130px;
      color: #fff;
      border-radius: 2px;
      background-color: transparent;
    }
    ::v-deep .el-form-item {
    margin-bottom: 10px;
}
::v-deep .el-form-item:nth-child(5) {
  .el-form-item__content{
      margin-left: 5px!important;
    }
}

  }
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 2;
  background-color: rgba(23, 49, 71, 0.8);
}
</style>

# Attributes

参数	说明	类型	可选值	默认值
positions	多边形坐标串，格式参照示例代码 `[[lng-经度,lat-纬度,alt-高度],[],...]`	array	—	—
speed	淹没分析速度	number	—	—
minHeiht	淹没分析最小高度	number	—	—
maxHeight	淹没分析最大高度	number	—	—
floodColor	淹没	string	—	rgba(40,150,200,0.6)

# Methods

   //1.开始分析
    flood.start()
   //2.清除
    flood.clear()
    //3.暂停
    flood.pause()

# Events

覆盖物事件的使用请参照上面Flood 实例

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

← qe-tool-box qe-limit-height →