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: SGraphView | undefined;
-
- scene: SGraphScene | undefined;
-
- map1 = require('../../../public/assets/map/1.json');
-
- map2 = require('../../../public/assets/map/2.json');
-
- mounted(): void {
- this.view = new SGraphView("mapDemo");
- this.init()
- };
-
- init() {
- this.showMap('1');
- };
-
- showMap(id: string) {
- const scene = new SGraphScene();
- this.view!!.scene = scene;
- let parser = new SFloorParser();
-
- 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>
|