MapDemo.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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>
  9. import { SGraphScene, SGraphView } from "@saga-web/graph/lib";
  10. import { SFloorParser } from "@saga-web/big/lib";
  11. export default {
  12. name: "mapDemo",
  13. data(){
  14. return{
  15. view:null,
  16. scene:null,
  17. map1: require('../../../../public/assets/map/1.json'),
  18. map2: require('../../../../public/assets/map/2.json'),
  19. }
  20. },
  21. mounted(){
  22. this.view = new SGraphView("mapDemo");
  23. this.init()
  24. },
  25. methods:{
  26. init(){
  27. this.showMap(1);
  28. },
  29. showMap(id){
  30. this.scene = new SGraphScene();
  31. this.view.scene = this.scene;
  32. let parser = new SFloorParser();
  33. parser.parseData(this[`map${id}`].EntityList[0].Elements);
  34. parser.spaceList.forEach(t => this.scene.addItem(t));
  35. parser.wallList.forEach(t => this.scene.addItem(t));
  36. parser.virtualWallList.forEach(t => this.scene.addItem(t));
  37. parser.doorList.forEach(t => this.scene.addItem(t));
  38. parser.columnList.forEach(t => this.scene.addItem(t));
  39. parser.casementList.forEach(t => this.scene.addItem(t));
  40. this.view.fitSceneToView();
  41. }
  42. }
  43. }
  44. </script>
  45. <style scoped>
  46. canvas{
  47. border: 1px solid #eeeeee;
  48. outline: none;
  49. }
  50. </style>