qe-view-shed

这个组件主要用于三维中添加淹没分析,支持新增、修改、暂停、删除操作。三维可视域分析是在场景的地形或模型数据表面，相对于某个观察点，基于一定的水平视角、垂直视角及指定范围半径，分析该区域内所有通视点的集合。分析结果用绿色区域表示在观察点处可见，红色区域表示在观察点处不可见。

---

实例

隐藏代码

<template>
  <div class="container">
   <div  style="position: absolute;top: 365px;right: 429px;z-index: 2;">
       <el-button type="primary" size="mini" @click="horizontalViewAngle-=2">
        水平夹角-2
      </el-button>
       <el-button type="primary" size="mini" @click="horizontalViewAngle+=2">
        水平夹角+2
      </el-button>
       <el-button type="primary" size="mini" @click="verticalViewAngle-=2">
        垂直夹角-2
      </el-button>
       <el-button type="primary" size="mini" @click="verticalViewAngle+=2">
        垂直夹角+2
      </el-button>
    </div>
    <qe-viewer
      :imagery-type="'AMap'"
      :default-view="defaultView"
      :location-bar="false"
      :viewer-mode="'3D'"
       @ready="handler"
    >
      <qe-primitive-layer :visible="true" :name="'倾斜摄影图层'">
        <qe-tileset
          v-for="(url, index) in testJson"
          :key="index"
          :url="url"
          :is-zoom-to="false"
          :tileset-options="tilesetOptions"
          @ready="handleTileset"
        />
      </qe-primitive-layer>
       <qe-view-shed
        :view-heading="viewHeading"
        :view-pitch="viewPitch"
        :horizontal-view-angle="horizontalViewAngle"
        :vertical-view-angle="verticalViewAngle"
        :visible-area-color="visibleAreaColor"
        :invisible-area-color="invisibleAreaColor"
        :show-frustum="showFrustum"
        :view-area-opacity="viewAreaOpacity"
        :position="position"
        :viewdistance="viewdistance"
        @ready="handlerViewShed"
      />
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer,QeViewShed,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,
    QeViewShed
  },
  data() {
    return {
      testJson: ['http://221.226.186.58:8025/qearth-tileset/tileset.json'],
      defaultView: [122.06093549, 40.74575037, 130.83, 20.58193367614743, -25.56186530558363, 359.99970772781137],
      position: [122.06194088, 40.74718754, 0],
      viewdistance: 300,
      viewHeading: 0,
      viewPitch: 0,
      horizontalViewAngle: 90,
      verticalViewAngle: 60,
      visibleAreaColor: 'rgba(23, 149, 71, 0.5)',
      invisibleAreaColor: 'rgba(255, 0, 0, 0.5)',
      showFrustum: true,
      viewAreaOpacity: 0.7,
      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: {
    handlerViewShed(viewshed) {
      this.viewshed = viewshed
    },
    handleTileset(tileset) {
      tileset.setHeight(0)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 450px;
 
}
</style>

Attributes

参数	说明	类型	可选值	默认值
position	视角点坐标，格式参照示例代码 [lng-经度,lat-纬度,alt-高度]	array	—	—
viewdistance	观测距离（单位米）	number	—	100
viewHeading	航向角（单位度)	number	—	0
viewPitch	俯仰角（单位度)	number	—	0
horizontalViewAngle	可视域水平夹角（单位度)	number	—	90
verticalViewAngle	可视域垂直夹角（单位度)	number	—	60
visibleAreaColor	可视区域颜色	string	—	rgba(23, 149, 71, 0.5)
invisibleAreaColor	不可视区域颜色	string	—	rgba(255, 0, 0, 0.5)
showFrustum	是否显示视锥框线	Boolean	—	true
viewAreaOpacity	可视区域渲染透明度	number	—	0.7

Events

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

---

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