persagy-web-doc/docs/.vuepress/components/big/MapDemo.vue

<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(JSON.parse(JSON.stringify(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>