# 绘制工具

  • vc-draw 组件用于绘制。

# 示例

# 绘制线

# 预览

收起 
  <template>
    <div class="viewer">
      <vc-viewer @ready="ready" scene3DOnly>
        <vc-primitive-tileset :url="modelUrl" @readyPromise="readyPromise"></vc-primitive-tileset>
        <vc-draw ref="drawer" :drawStyle="drawStyle" :show="show" :mode="0" @drawStartEvent="drawEvent" @drawEndEvent="drawEvent" @editStartEvent='drawEvent' @editEndEvent='drawEvent'></vc-draw>
      </vc-viewer>
      <div class="demo-tool">
        <el-button size="small" class="md-raised md-accent"  @click="draw('Point')">点</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('Polyline')">线</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('SpacePolyline')">空间线</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('Polygon')">面</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('AttackArrow')">攻击箭头</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('PincerArrow')">钳击箭头</el-button>
        <el-button size="small" class="md-raised md-accent" @click="draw('StraightArrow')">直线箭头</el-button>
        <el-button size="small" class="md-raised md-accent" @click="startEdit()">开启编辑功能</el-button>
        <el-button size="small" class="md-raised md-accent" @click="stopEdit()">结束编辑</el-button>
        <el-button size="small" class="md-raised md-accent" @click="cancleEdit()">取消编辑</el-button>
        <el-button size="small" class="md-raised md-accent" @click="closeEdit()">关闭编辑功能</el-button>
        <el-button size="small" class="md-raised md-accent" @click="stopDraw()">停止标绘</el-button>        
        <el-button size="small" class="md-raised md-accent" @click='clear'>清除</el-button>
        <el-button size="small" class="md-raised md-accent" @click='show=!show'>隐藏标绘</el-button>
      </div>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          modelUrl: '/statics/SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json',
          pointDrawing: false,
          polylineDrawing: false,
          polygonDrawing: false,
          clampToGround: false,
          drawer:null,
          show:true,
          drawStyle:{
            name: "",
            showLabel: false, // 是否显示文字标注
            fontSize: 18, // 字体大小
            labelColor: "red", // 文字颜色
            labelOutlineColor:"",
            labelOutlineWidth: "" // 文字边框大小
          }
        }
      },
      methods: {
        ready(cesiumInstance) {
          const { Cesium, viewer } = cesiumInstance
          this.cesiumInstance = cesiumInstance
          var scene = viewer.scene
          scene.debugShowFramesPerSecond = true      
          scene.globe.depthTestAgainstTerrain = true  
        },
        drawEvent(eventData){
          console.log(eventData)
        },
        draw(type){
          this.$refs.drawer.startDraw(type)
        },
        stopDraw(){
          this.$refs.drawer.stopDraw()
        },
        clear(){
          this.$refs.drawer.clear()
        },
        startEdit(){
           this.$refs.drawer.startEdit()
        },
        stopEdit(){
           this.$refs.drawer.stopEdit(true)
        },
        cancleEdit(){
           this.$refs.drawer.stopEdit(false)
        },
        closeEdit(){
          this.$refs.drawer.closeEdit()
        },
         readyPromise(tileset) {
          const { viewer } = this.cesiumInstance
          viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0))
        } 
      }
    }
  </script>

# 属性

# vc-drawing

属性名 类型 默认值 描述
mode Number 1 optional 绘制模式，0 连续绘制，1 绘制一次就结束。
show Boolean true optional 指定绘制对象是否可见。
drawStyle Object {showLabel: false} optional 指定绘制样式

# 事件

事件名 参数 描述
drawStartEvent 绘制开始时触发。
drawEndEvent { isCancle, data,type} 绘制结束触发。返回绘制对象的坐标点或者关联的控制点对象。
editStartEvent 编辑开始时触发
editEndEvent { positions, custom} 编辑结束时触发。返回绘制对象的坐标点或者关联的控制点对象。

# 方法

方法名 参数 描述
startDraw type 开始绘制
stopDraw 停止绘制
clear 清除绘所有制对象
startEdit 开启编辑功能
closeEdit 关闭编辑功能
stopEdit okOrCancle 结涑编辑，okOrCancle 为 true 应用本次编辑，反之则取消本次编辑

← 飞行路线 →