<!-- 画板 --> <template> <div ref="baseMap1" class="base-map"> <canvas v-loading="loading" id="floorMap1" :width="canvasWidth" :height="canvasHeight" tabindex="0" ></canvas> </div> </template> <script> import { SGraphView, SGraphScene } from "@persagy-web/graph"; import { SColor } from "@persagy-web/draw"; import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib"; // 获取压缩包数据并解压 const map1 = require("../../../public/assets/map/1.json"); export default { data() { return { canvasWidth: 0, // 画布的宽 canvasHeight: 0, // 画布的高 view: null, // 视图 view scene: null, // 场景类 dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径 mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key loading: false, isShowColumn: false, //是否展示柱子 isShowWall: false, //是否显示墙 isShowVirtualWall: false, //是否显示虚拟墙 isShowDoor: false, // 是否显示门 isShowWindow: false, //是否显示窗户 isSpaceSelectable: true, //是否显示空间 }; }, methods: { // 初始化 init() { this.view ? (this.view.scene = this.scene) : null; // 解析数据并放入压缩包中 setTimeout(() => { this.parserData(map1.EntityList[0].Elements); }); }, // 解析数据并注入 scene 类中 parserData(data) { let parser = new SFloorParser(); parser.parseData(data); parser.spaceList.forEach((t) => { ///////////////////////////////////////// // 样式调整 // 是否显示实例 t.visible = this.isSpaceSelectable; //是否展示名称 t.showBaseName = false; // 显示边框色 t.strokeColor = new SColor("#F0F3F7"); // 填充色 t.fillColor = new SColor("#F0F3F7"); // 边框线宽 t.lineWidth = 1; // 添加图例 this.scene.addItem(t); }); parser.wallList.forEach((t) => { // 是否显示实例 t.visible = this.isShowWall; this.scene.addItem(t); }); parser.virtualWallList.forEach((t) => { // 是否显示实例 t.visible = this.isShowVirtualWall; this.scene.addItem(t); }); parser.doorList.forEach((t) => { // 是否显示实例 t.visible = this.isShowDoor; this.scene.addItem(t); }); parser.columnList.forEach((t) => { // 是否显示实例 t.visible = this.isShowColumn; this.scene.addItem(t); }); parser.casementList.forEach((t) => { // 是否显示实例 t.visible = this.isShowWindow; this.scene.addItem(t); }); // 画板是否可拖动 if (this.view) { this.view.DragMove = true; this.view.fitSceneToView(); } }, // 清空画布 clearImg() { this.scene = new SGraphScene(); if (this.view) { this.view.update(); } }, }, created() { this.clearImg(); }, mounted() { // 获取 canvas 的宽高 this.canvasWidth = 800; this.canvasHeight = 600; // 初始化场景类 this.view = new SGraphView("floorMap1"); if (this.scene) { this.view.scene = this.scene; this.init(); } }, }; </script>