1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <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>
- import { SGraphScene, SGraphView } from "@saga-web/graph/lib";
- import { SFloorParser } from "@saga-web/big/lib";
- export default {
- name: "mapDemo",
- data(){
- return{
- view:null,
- scene:null,
- map1: require('../../../../public/assets/map/1.json'),
- map2: require('../../../../public/assets/map/2.json'),
- }
- },
- mounted(){
- this.view = new SGraphView("mapDemo");
- this.init()
- },
- methods:{
- init(){
- this.showMap(1);
- },
- showMap(id){
- this.scene = new SGraphScene();
- this.view.scene = this.scene;
- let parser = new SFloorParser();
- parser.parseData(this[`map${id}`].EntityList[0].Elements);
- parser.spaceList.forEach(t => this.scene.addItem(t));
- parser.wallList.forEach(t => this.scene.addItem(t));
- parser.virtualWallList.forEach(t => this.scene.addItem(t));
- parser.doorList.forEach(t => this.scene.addItem(t));
- parser.columnList.forEach(t => this.scene.addItem(t));
- parser.casementList.forEach(t => this.scene.addItem(t));
- this.view.fitSceneToView();
- }
- }
- }
- </script>
- <style scoped>
- canvas{
- border: 1px solid #eeeeee;
- outline: none;
- }
- </style>
|