《学习笔记》VueCesium第六篇：淹没分析

VueCesium提供了一个简单的淹没分析组件VcAnalysisFlood,组件原理是用分类图元（vc-primitive-classification）加载一个多边形(vc-geometry-polygon),通过动态修改多边形的拉伸高度（extrudedHeight）来实现简易的淹没分析。

属性

属性名	类型	默认值	描述
polygonHierarchy	VcPolygonHierarchy		required 指定构建淹没分析多边形的经纬度数组。
minHeight	number	-1	最小高程
maxHeight	number	8888	最大高程
speed	number	10	指定每帧增加的高度
color	VcColor	'rgba(40,150,200,0.6)'	指定淹没分析对象颜色。
loop	boolean	false	指定到达最大高度后是否重新开始。

注意 需要场景加载地形或 3DTiles。

代码

<template>
  <el-row ref="viewerContainer" class="demo-viewer">
    <vc-viewer
      :base-layer-picker="true"
      :info-box="true"
      @ready="onViewerReady"
    >
      <vc-navigation></vc-navigation>
      <vc-analysis-flood
        @ready="ready"
        ref="flood"
        :min-height="minHeight"
        :max-height="maxHeight"
        :speed="speed"
        :polygon-hierarchy="polygonHierarchy"
        color="rgba(186,69,12,.8)"
        @stop="onStoped"
      >
      </vc-analysis-flood>

      <vc-layer-imagery>
        <vc-imagery-provider-arcgis></vc-imagery-provider-arcgis>
      </vc-layer-imagery>
      <vc-terrain-provider-cesium></vc-terrain-provider-cesium>
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="cia_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
    <el-row class="demo-toolbar">
      <el-button type="danger" round @click="unload">销毁</el-button>
      <el-button type="danger" round @click="load">加载</el-button>
      <el-button type="danger" round @click="reload">重载</el-button>
      <el-button type="danger" round @click="start">开始</el-button>
      <el-button :disabled="!starting" type="danger" round @click="pause">{{
        pausing ? "继续" : "暂停"
      }}</el-button>
      <el-button type="danger" round @click="stop">结束</el-button>
    </el-row>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      minHeight: -1,
      maxHeight: 2000,
      speed: 10,
      polygonHierarchy: [
        [138.57, 35.12],
        [138.92, 35.12],
        [138.92, 35.5],
        [138.57, 35.5],
      ],
      pausing: false,
      starting: false,
    };
  },
  methods: {
    ready(cesiumInstance) {
      console.log(cesiumInstance);
    },
    onViewerReady({ Cesium, viewer }) {
      window.vm = this;
      viewer.scene.globe.depthTestAgainstTerrain = true;
    },
    unload() {
      this.$refs.flood.unload();
    },
    load() {
      this.$refs.flood.load();
    },
    reload() {
      this.$refs.flood.reload();
    },
    start() {
      this.$refs.flood.start();
      this.pausing = false;
      this.starting = true;
    },
    pause() {
      this.$refs.flood.pause();
      this.pausing = !this.pausing;
    },
    stop() {
      this.$refs.flood.stop();
      this.pausing = false;
      this.starting = false;
    },
    onStoped(e) {
      this.pausing = false;
      this.starting = false;
      console.log(e);
    },
  },
};
</script>

<style></style>