## 快速上手
::: details 目录
[[toc]]
:::

### 一、绘制底图

<tDInsert-getStart/>

#### 代码分解

1. mounted、created时候将 view 和scene 初始化并将 scene 赋给 view.
```
 // 清空画布
    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数据）

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

```

3. 获取 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();
    },
```

### 二、绘制修改底图样式

<tDInsert-getStart1/>

#### 代码分解
``` /////////////////////////////////////////
    // 样式调整
    // 是否显示实例
    t.visible = this.isSpaceSelectable;
    //是否展示名称
    t.showBaseName = false;
    // 显示边框色
    t.strokeColor = new SColor("#F0F3F7");
    // 填充色
    t.fillColor = new SColor("#F0F3F7");
    // 边框线宽
    t.lineWidth = 1;
```
::: tip
更多属性请查看以下连接<br>
[http://doc.sagacloud.cn/api/web/big/globals.html](http://doc.sagacloud.cn/api/web/big/globals.html)
:::
