## 添加二次绘制的数据
根据业务我们常常会在平面图上做一些二次的绘制以满足业务需求<br>
所以业务一般是这样的<br>
1. 接口请求平面底图(具体看“快速上手”);
2. 接口请求二次绘制的区域类图和点

### 绘制示例
(为保持文档文档，底图将不走接口，用本地数据、若涉及到底图相关，请移步“快速上手”)
<tDInsert-addPicture/>
注，本次直接引入设备与空间数据模拟接口请求返回

#### 数据格式

::: details 空间接口返回参数(必要返回参数)
<<< @/docs/.vuepress/components/tDInsert/data/spacelist.js
:::

::: details 设备接口返回参数(必要返回参数)
<<< @/docs/.vuepress/components/tDInsert/data/equipmentList.js
:::

::: tip
更多数据格式相关看 “数据格式” 模块！
:::

#### 示例代码

::: details 示例代码
<<< @/docs/.vuepress/components/tDInsert/addPicture.vue
:::

####  源码

::: details MarkItem源码
<<< @/docs/.vuepress/components/tDInsert/addPictrueClass/MarkItem.ts
:::
::: details FloorView源码
<<< @/docs/.vuepress/components/tDInsert/addPictrueClass/FloorView.ts
:::

#### 源码解析
::: details 源码解析
1. 绘制平面图
移步 “快速上手”
2. 绘制空间
```js
// 引入空间解析器
import {SZoneParser } from "@persagy-web/big/lib";

  // 解析业务空间
    mapSpace(val) {
      if (!this.scene) return;
      const parse = new SZoneParser();
    //   将空间数据传入 parseData 方法中
      parse.parseData(val);
      parse.zoneList.forEach((item) => {
        // 添加到场景
        this.scene.addItem(item);
      });
    },
```
3. 绘制坐标类（引擎包中未提供解析器）

```js
// 引入 mark 坐标
import { MarkItem } from "./addPictrueClass/MarkItem";
    // 将设备数组传入该方法
    mapEquipment(val) {
      val.forEach((item) => {
        if (item.bimLocation) {
            // 解析坐标
          const arr = item.bimLocation.split(",");
           //   mark存入必要参数
           //  其他数据也可以绑入，item.data中存储，方便交互
          const mark = {
            Id: item.equipId,
            ElementType: "Mark",
            equipId: item.equipId,
            Name: item.equipName,
            x: Number(arr[0]),
            y: Number(arr[1]),
            width: item.width,
            height: item.height,
            url:require('./../../public/assets/img/mark.png')
          };
          this.scene.addItem(new MarkItem(null,mark));
        }
      });
    },
```

:::