# # 绘制组件 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>