<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>
