<template> <div> <el-button @click="showMap(1)">查看地图1</el-button> <el-button @click="showMap(2)">查看地图2</el-button> <canvas id="mapDemo" width="740" height="400" tabindex="0"></canvas> </div> </template> <script lang="ts"> import { SGraphScene, SGraphView } from "@persagy-web/graph/lib"; import { SFloorParser } from "@persagy-web/big/lib"; import { Component, Vue } from "vue-property-decorator"; /** * 场景对象示例 * * @author 郝洁 <haojie@persagy.com> */ @Component export default class MapDemoCanvas extends Vue { /** 实例化 view */ view: SGraphView | undefined; /** 命令所属的场景类 */ scene: SGraphScene | undefined; /** json 文件 1 */ map1 = require('../../../public/assets/map/1.json'); /** json 文件 2 */ map2 = require('../../../public/assets/map/2.json'); /** * 页面挂载 */ mounted(): void { this.view = new SGraphView("mapDemo"); this.init() }; /** * 初始化加载 */ init() { this.showMap('1'); }; /** * 绘制地图 * @param id 图 Id */ showMap(id: string) { const scene = new SGraphScene(); this.view!!.scene = scene; let parser = new SFloorParser(); // @ts-ignore parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements))); parser.spaceList.forEach(t => scene.addItem(t)); parser.wallList.forEach(t => scene.addItem(t)); parser.virtualWallList.forEach(t => scene.addItem(t)); parser.doorList.forEach(t => scene.addItem(t)); parser.columnList.forEach(t => scene.addItem(t)); parser.casementList.forEach(t => scene.addItem(t)); this.view!!.fitSceneToView(); } } </script> <style scoped> canvas { border: 1px solid #eeeeee; outline: none; } </style>