# 绘制组件 mapgis-3d-draw

# 属性

# infinite

  • 类型: Boolean
  • 侦听属性
  • 默认值: false
  • 描述: 是否允许无线绘制。true:允许无线绘制,false:不允许

# vueKey

  • 类型: String
  • 可选
  • 非侦听属性
  • 默认值: default
  • 描述:

    mapgis-web-scene 组件的 ID,当使用多个 mapgis-web-scene 组件时,需要指定该值,来唯一标识 mapgis-web-scene 组件,
    同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey,让组件知道应该作用于哪一个 mapgis-web-scene。

# vueIndex

  • 类型: Number
  • 可选
  • 非侦听属性
  • 描述:

    当 mapgis-web-scene 插槽中使用了多个相同组件时,例如多个 mapgis-3d-igs-doc-layer 组件,用来区分组件的标识符。

#

# default

  • Description: Draw 的自定义槽的实现,可以自定义绘制控件样式

# 事件

# @load

  • Description: 在 Draw 加载完毕后发送该事件
  • Payload { Draw ,webGlobe }
  • Draw Draw 对象
  • webGlobe 当前绘制组件所在的 webGlobe

# @unload

  • Description: 在 Draw 注销完毕后发送该事件
  • Payload { Draw }
  • Draw Draw 对象

# @drawCreate

  • Description: 在 Draw 绘制图形完毕后发送该事件
  • Payload { cartoCoordinate ,degreeCoordinate ,webGlobe}
  • cartoCoordinate 笛卡尔坐标集合
  • degreeCoordinate 经纬度坐标集合
  • webGlobe 当前绘制组件所在的 webGlobe

# @drawcreate

  • Description: 使用 CDN 的方式引入,会使用全小写的方式,在 Draw 绘制图形完毕后发送该事件
  • Payload { cartoCoordinate ,degreeCoordinate ,webGlobe}
  • cartoCoordinate 笛卡尔坐标集合
  • degreeCoordinate 经纬度坐标集合
  • webGlobe 当前绘制组件所在的 webGlobe

# 使用方法

<template>
  <div id="app">
    <mapgis-web-scene>
      <mapgis-3d-draw
        ref="drawref"
        v-on:load="handleDrawLoad"
        v-on:drawcreate="handleCreate"
      >
        <div id="toolbar-wrapper">
          <div class="toolbar-item" v-on:click="togglePoint">画点</div>
          <div class="toolbar-item" v-on:click="togglePolyline">画线</div>
          <div class="toolbar-item" v-on:click="toggleRect">矩形</div>
          <div class="toolbar-item" v-on:click="togglePolygon">多边形</div>
          <div class="toolbar-item" v-on:click="toggleDelete">删除</div>
        </div>
      </mapgis-3d-draw>
    </mapgis-web-scene>
  </div>
</template>

<script>
export default {
  name: "cesiumWmtsLayer",
  data() {
    return {};
  },
  methods: {
    handleDrawLoad(drawer) {
      this.drawer = drawer;
    },
    handleCreate(cartesian3, lnglat) {
      console.log("create", cartesian3, lnglat);
    },
    togglePoint(e) {
      //绘制点
      this.drawer && this.drawer.enableDrawPoint();
    },
    togglePolyline() {
      //绘制线
      this.drawer && this.drawer.enableDrawLine();
    },
    togglePolygon() {
      //绘制多边形
      this.drawer && this.drawer.enableDrawPolygon();
    },
    toggleRect() {
      //绘制矩形
      this.drawer && this.drawer.enableDrawRectangle();
    },
    toggleDelete() {
      //删除绘制
      this.drawer && this.drawer.removeEntities();
    }
  }
};
</script>

<style scoped>
#app {
  height: 100vh;
  width: 100vw;
}
#toolbar-wrapper {
  position: absolute;
  z-index: 9999;
  display: inline-flex;
  overflow-x: hidden;
  overflow-y: visible;
  top: 20px;
  left: 20px;
}
.toolbar-item {
  background: #ffffff;
  border: 1px dashed #666666;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  height: fit-content;
  padding: 6px 16px;
  cursor: pointer;
}
</style>