<!-- 画板 --> <template> <div class="base-map"> <canvas v-loading="loading" id="floorMap3" :width="canvasWidth" :height="canvasHeight" tabindex="0" ></canvas> </div> </template> <script> import { SGraphView, SGraphScene } from "@persagy-web/graph"; import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib"; import { SColor } from "@persagy-web/draw"; // 获取压缩包数据并解压 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.clearImg(); 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; t.connect("onMouseDown", this, this.onMousedown); t.connect("onMouseUp", this, this.onMouseup); t.connect("onMouseLeave", this, this.onMouseleave); t.connect("onMouseEnter", this, this.onMouseenter); // 添加图例 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); }); // 画板是否可拖动 this.view.DragMove = true; this.view.fitSceneToView(); }, // 鼠标点击事件 onMousedown(item, e) { alert("鼠标按下!") console.log("鼠标按下!", item, e); }, // 鼠标抬起事件 onMouseup(item, e) {}, // 鼠标事件移入 onMouseenter(item, e) {}, // 鼠标事件移出 onMouseleave(item, e) {}, // 清空画布 clearImg() { this.scene = new SGraphScene(); if (this.view) { this.view.update(); } }, }, watch: {}, created() { this.clearImg(); }, mounted() { // 获取 canvas 的宽高 this.canvasWidth = 800; this.canvasHeight = 600; // 初始化场景类 this.view = new SGraphView("floorMap3"); if (this.scene) { this.view.scene = this.scene; this.init(); } }, }; </script>