MapDemo.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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: SGraphView | undefined;
  15. scene: SGraphScene | undefined;
  16. map1 = require('../../../public/assets/map/1.json');
  17. map2 = require('../../../public/assets/map/2.json');
  18. mounted():void{
  19. this.view = new SGraphView("mapDemo");
  20. this.init()
  21. };
  22. init(){
  23. this.showMap('1');
  24. };
  25. showMap(id:string){
  26. const scene = new SGraphScene();
  27. this.view!!.scene = scene;
  28. let parser = new SFloorParser();
  29. // @ts-ignore
  30. parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));
  31. parser.spaceList.forEach(t => scene.addItem(t));
  32. parser.wallList.forEach(t => scene.addItem(t));
  33. parser.virtualWallList.forEach(t => scene.addItem(t));
  34. parser.doorList.forEach(t => scene.addItem(t));
  35. parser.columnList.forEach(t => scene.addItem(t));
  36. parser.casementList.forEach(t => scene.addItem(t));
  37. this.view!!.fitSceneToView();
  38. }
  39. }
  40. </script>
  41. <style scoped>
  42. canvas{
  43. border: 1px solid #eeeeee;
  44. outline: none;
  45. }
  46. </style>