persagy-web-doc/docs/guides/tDInsert/get-start.md

快速上手

::: details 目录 [[toc]] :::

一、绘制楼层平面图

源码展示

::: details 查看代码 <<< @/docs/.vuepress/components/tDInsert/getStart.vue :::

代码分解

::: details 查看代码

1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view. ``` js // 清空画布 clearImg() { this.scene = new SGraphScene(); if (this.view) { this.view.update(); } },

created() {

this.clearImg();

},

mounted() {

// 获取 canvas 的宽高
this.canvasWidth = 800;
this.canvasHeight = 600;
// 初始化场景类(注入id)
this.view = new SGraphView("floorMap");
if (this.scene) {
  this.view.scene = this.scene;
}

},

2. getJsonz 请求jsonz压缩包（该方法自动解压生成json数据）

``` js
<!-- 引入 -->
import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
<!-- 调用 -->
  getJsonz(url)
        .then((data) => {
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });

1. 获取 json 数据通过解析器转换成实例

// 引入

import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";

// 调用

  getJsonz(url)
        .then((data) => {
          this.loading = false;
            this.parserData(data);
        })
        .catch(() => {
          this.loading = false;
        });
          // 解析数据并注入 scene 类中
    parserData(data) {
     // 通过解析器将数据解析成 item
      let parser = new SFloorParser();
      parser.parseData(data);
    },

4 将实例添入场景中完成绘制

// 解析数据并注入 scene 类中
    parserData(data) {
     // 通过解析器将数据解析成 item
      let parser = new SFloorParser();
      parser.parseData(data);
      // 注入场景中
        parser.parseData(data);
      parser.spaceList.forEach((t) => {
        // 添加图例
        this.scene.addItem(t);
      });
      parser.wallList.forEach((t) => {
        this.scene.addItem(t);
      });
      parser.virtualWallList.forEach((t) => {
        this.scene.addItem(t);
      });
      parser.doorList.forEach((t) => {
        this.scene.addItem(t);
      });
      parser.columnList.forEach((t) => {
        this.scene.addItem(t);
      });
      parser.casementList.forEach((t) => {
        this.scene.addItem(t);
      });
      // 画板是否可拖动
      this.view.DragMove = true;
      // 初始化
      this.view.fitSceneToView();
    },

:::

二、修改平面图样式

源码展示

::: details 查看代码 <<< @/docs/.vuepress/components/tDInsert/getStart1.vue :::

代码分解

::: details 查看代码

    // 样式调整
    // 是否显示实例
    t.visible = this.isSpaceSelectable;
    //是否展示名称
    t.showBaseName = false;
    // 显示边框色
    t.strokeColor = new SColor("#F0F3F7");
    // 填充色
    t.fillColor = new SColor("#F0F3F7");
    // 边框线宽
    t.lineWidth = 1;

:::

::: tip 更多属性请查看以下连接
http://doc.sagacloud.cn/api/web/big/globals.html :::