persagy-web-doc/docs/guides/tDInsert/addPicture.md

添加二次绘制的数据

根据业务我们常常会在平面图上做一些二次的绘制以满足业务需求
所以业务一般是这样的

1. 接口请求平面底图(具体看“快速上手”);
2. 接口请求二次绘制的区域类图和点

绘制示例

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

数据格式

::: 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));
        }
      });
    },

:::