## 快速上手
::: 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;
});
```
3. 获取 json 数据通过解析器转换成实例
``` js
// 引入
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 将实例添入场景中完成绘制
``` js
// 解析数据并注入 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](http://doc.sagacloud.cn/api/web/big/globals.html)
:::