123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <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";
- @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>
|