qe-tileset(带剖切)

这个组件主要用于三维中添加模型剖切,支持场景模型剖切分析的添加、清除。

---

实例

隐藏代码

<template>

   <div style="height: 450px;">
    <div style=" position: absolute;top: 279px;z-index: 2; padding: 20px 15px 0px 12px;">
     <el-button type="primary" @click="add('out')">
        模型切割(外)
      </el-button>
      <el-button type="primary" @click="add('inner')">
        模型切割
      </el-button>
      <el-button type="danger" @click="clear()">
        删除
      </el-button>
    </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"
          :clip-options="clipOptions"
          :tileset-options="tilesetOptions"
          @ready="handleTileset"
        />
      </qe-primitive-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { Cesium, Position,PrimitivePlot } from '@qycloud/qearth'
import { QeViewer,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 {
  components: {
    QeViewer,
    QeTileset,
    QePrimitiveLayer
  },
  data() {
    return {
       type: 'inner',
      testJson: ['http://221.226.186.58:8025/qearth-tileset/tileset.json'],
      defaultView: [117.21215, 31.794547, 1672, 357.62, -10.82, 359.99],
      clipOptions: {
        positions: [
          [122.06194088, 40.74718754, 0],
          [122.05914138, 40.74408676, 0],
          [122.06296352, 40.74212553, 0],
          [122.06530647, 40.74492714, 0]
        ],
        unionClippingRegions: false,
        edgeColor: 'rgba(55,0,0,0.5)',
        edgeWidth: 5.0
      },
      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.clear()
        this.clipOptions = {
          positions: this.positions,
          unionClippingRegions: this.type !== 'inner',
          edgeColor: 'rgba(5,200,0,0.5)',
          edgeWidth: 5.0
        }
      })
    },
    handleTileset(tileset) {
      window.tileset=tileset
    },
      add(key) {
      this.type = key
      this.clipOptions = {}
      window.plotInstance && window.plotInstance.terminate()
      window.plotInstance.draw('Polygon2D', {})
    },
    clear() {
      window.plotInstance.terminate()
      window.plotInstance && window.plotInstance.clear()
      this.clipOptions = {}
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
url	模型资源地址	string/Resource	—	—
isZoomTo	是否将视图定位到当前模型处	boolean	—	true
isFlyTo	是否将视图定位到当前模型处,有飞行动画	boolean	—	false
clipOptions	剖切参数，{positions: [[lng-经度,lat-纬度,alt-高度],...],edgeColor:Cesium.Color.GREEN,edgeWidth:2.0}	object	—	—

Events

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

---

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