::: details 目录 [[toc]] :::
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
更多属性请查看以下连接
http://doc.sagacloud.cn/api/web/big/globals.html
:::