1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <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>
|