可编辑直线示例

目录

查看代码

<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 lang="ts">
    import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
    import { SFloorParser } from "@persagy-web/big/lib";
    import { Component, Vue } from "vue-property-decorator";

    @Component
    export default class MapDemoCanvas extends Vue {
        view: SGraphView | undefined;
        scene: SGraphScene | undefined;
        map1 = require('../../../public/assets/map/1.json');
        map2 = require('../../../public/assets/map/2.json');

        mounted():void{
            this.view = new SGraphView("mapDemo");
            this.init()
        };
        init(){
            this.showMap('1');
        };
        showMap(id:string){
            const scene = new SGraphScene();
            this.view!!.scene = scene;
            let parser = new SFloorParser();
            // @ts-ignore
            parser.parseData(this[`map${id}`].EntityList[0].Elements);
            parser.spaceList.forEach(t => scene.addItem(t));
            parser.wallList.forEach(t => scene.addItem(t));
            parser.virtualWallList.forEach(t => scene.addItem(t));
            parser.doorList.forEach(t => scene.addItem(t));
            parser.columnList.forEach(t => scene.addItem(t));
            parser.casementList.forEach(t => scene.addItem(t));
            this.view!!.fitSceneToView();
        }
    }
</script>


<style scoped>
    canvas{
        border: 1px solid #eeeeee;
        outline: none;
    }
</style>