MapDemo.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div>
  3. <el-button @click="showMap(1)">查看地图1</el-button>
  4. <el-button @click="showMap(2)">查看地图2</el-button>
  5. <canvas id="mapDemo" width="740" height="400" tabindex="0"></canvas>
  6. </div>
  7. </template>
  8. <script lang="ts">
  9. import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
  10. import { SFloorParser } from "@persagy-web/big/lib";
  11. import { Component, Vue } from "vue-property-decorator";
  12. @Component
  13. export default class MapDemoCanvas extends Vue {
  14. /** 实例化 view */
  15. view: SGraphView | undefined;
  16. /** 命令所属的场景类 */
  17. scene: SGraphScene | undefined;
  18. /** json 文件 1 */
  19. map1 = require('../../../public/assets/map/1.json');
  20. /** json 文件 2 */
  21. map2 = require('../../../public/assets/map/2.json');
  22. /**
  23. * 页面挂载
  24. */
  25. mounted(): void {
  26. this.view = new SGraphView("mapDemo");
  27. this.init()
  28. };
  29. /**
  30. * 初始化加载
  31. */
  32. init() {
  33. this.showMap('1');
  34. };
  35. /**
  36. * 绘制地图
  37. * @param id 图 Id
  38. */
  39. showMap(id: string) {
  40. const scene = new SGraphScene();
  41. this.view!!.scene = scene;
  42. let parser = new SFloorParser();
  43. // @ts-ignore
  44. parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));
  45. parser.spaceList.forEach(t => scene.addItem(t));
  46. parser.wallList.forEach(t => scene.addItem(t));
  47. parser.virtualWallList.forEach(t => scene.addItem(t));
  48. parser.doorList.forEach(t => scene.addItem(t));
  49. parser.columnList.forEach(t => scene.addItem(t));
  50. parser.casementList.forEach(t => scene.addItem(t));
  51. this.view!!.fitSceneToView();
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. canvas {
  57. border: 1px solid #eeeeee;
  58. outline: none;
  59. }
  60. </style>