MapDemo.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. /**
  13. * 场景对象示例
  14. *
  15. * @author 郝洁 <haojie@persagy.com>
  16. */
  17. @Component
  18. export default class MapDemoCanvas extends Vue {
  19. /** 实例化 view */
  20. view: SGraphView | undefined;
  21. /** 命令所属的场景类 */
  22. scene: SGraphScene | undefined;
  23. /** json 文件 1 */
  24. map1 = require('../../../public/assets/map/1.json');
  25. /** json 文件 2 */
  26. map2 = require('../../../public/assets/map/2.json');
  27. /**
  28. * 页面挂载
  29. */
  30. mounted(): void {
  31. this.view = new SGraphView("mapDemo");
  32. this.init()
  33. };
  34. /**
  35. * 初始化加载
  36. */
  37. init() {
  38. this.showMap('1');
  39. };
  40. /**
  41. * 绘制地图
  42. * @param id 图 Id
  43. */
  44. showMap(id: string) {
  45. const scene = new SGraphScene();
  46. this.view!!.scene = scene;
  47. let parser = new SFloorParser();
  48. // @ts-ignore
  49. parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));
  50. parser.spaceList.forEach(t => scene.addItem(t));
  51. parser.wallList.forEach(t => scene.addItem(t));
  52. parser.virtualWallList.forEach(t => scene.addItem(t));
  53. parser.doorList.forEach(t => scene.addItem(t));
  54. parser.columnList.forEach(t => scene.addItem(t));
  55. parser.casementList.forEach(t => scene.addItem(t));
  56. this.view!!.fitSceneToView();
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. canvas {
  62. border: 1px solid #eeeeee;
  63. outline: none;
  64. }
  65. </style>