## 快速上手 ::: 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) :::