> mapgis-3d-draw

## # 属性

名称 | 类型 | 默认值 | 描述 | 是否监听
--- | --- | --- | --- | ---
infinite | Boolean | false | 是否允许无限绘制。true：允许无限绘制，false：不允许 | 是
enableControl | Boolean | false | 添加一个自带的能实现基本功能的按钮控件，可通过传入的属性 position 改变其显示的位置 | 否
position | String | 'top-right' | 传入的属性 position 改变其按钮控件的位置 | 否
clampToGround | Boolean | true | 绘制在三维图层上，是否贴地贴模型，true 则贴地贴模型。 | 是
drawStyle | Object | { color: '#FF0000', opacity: 1, //点的边线宽度 outlineWidth: 1, //点的边线颜色 outlineColor: '#FFA500', //线宽 width: 2 } | 绘制点、线、矩形、多边形、圆图形样式。目前不支持矩形、多边形、圆的边线样式设置。 | 否
vueKey | String | default | mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件， 同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。 | 否
vueIndex | Number | (Math.random() * 1000000).toFixed(0) | 当 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-raster-layer
            url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
          />
          <mapgis-3d-igs-m3d
            :autoReset="autoReset"
            :maximumScreenSpaceError="maximumScreenSpaceError"
            :url="m3dUrl"
          >
          </mapgis-3d-igs-m3d>
          <mapgis-3d-draw
            :enableControl="enableControl"
            :drawStyle="drawStyle"
            :clampToGround="clampToGround"
            :position="position"
            :infinite="infinite"
          >
          </mapgis-3d-draw>
        </mapgis-web-scene>
      </div>
    </template>

    <script>
    export default {
      name: "cesiumWmtsLayer",
      data() {
        return {};
      },
      methods: {
        m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa",
        autoReset: true,
        maximumScreenSpaceError: 6,
        enableControl: true,
        position: "top-right",
        drawStyle: {
          color: "#FF8C00",
          opacity: 0.6,
          // outlineColor:'#FFA500',
          // width:4,
          // outlineWidth:2
        },
        clampToGround: true,
        infinite: true,
      },
    };
    </script>

    <style>
    #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>