|
@@ -1,39 +1,84 @@
|
|
<!-- 底图 -->
|
|
<!-- 底图 -->
|
|
<template>
|
|
<template>
|
|
<div id='floor_base'>
|
|
<div id='floor_base'>
|
|
- <canvas id='map' :width='initWidth' height='700'></canvas>
|
|
|
|
|
|
+ <div id="fengMap"></div>
|
|
|
|
+ <div class="canvas-container" ref="graphy">
|
|
|
|
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { ZoneScene } from '@saga-web/cad-engine/lib'
|
|
|
|
-import { FloorView } from '@saga-web/cad-engine/lib/FloorView'
|
|
|
|
-// import { SPainter, SPoint, SLinearGradient } from "@saga-web/draw/lib";
|
|
|
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
|
+import { SFloorParser } from "@saga-web/big";
|
|
|
|
+import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- view: null, //视图
|
|
|
|
- ZoneScene: null, //场景类
|
|
|
|
- initWidth: null, //初始化得宽度
|
|
|
|
- mapUrl: '/api/download/daas//b2b5a2130cf511eabf9667e7f714e00e.jsonz'
|
|
|
|
|
|
+ appName: "万达可视化系统",
|
|
|
|
+ key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
|
+ mapServerURL: "/wanda",
|
|
|
|
+ fmapID: "1001724_29",
|
|
|
|
+ fmap: null,
|
|
|
|
+ canvasWidth: 700,
|
|
|
|
+ canvasHeight: 800,
|
|
|
|
+ fParser: null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- // clearImg() {
|
|
|
|
- // if (!this.ZoneScene) {
|
|
|
|
- // this.ZoneScene = new ZoneScene();
|
|
|
|
- // }
|
|
|
|
- // // this.ZoneScene.clearMap();
|
|
|
|
- // },
|
|
|
|
|
|
+ init() {
|
|
|
|
+ this.clearGraphy();
|
|
|
|
+ this.scene = new SGraphyScene();
|
|
|
|
+ this.fmap = new SFengParser(
|
|
|
|
+ "fengMap",
|
|
|
|
+ this.mapServerURL,
|
|
|
|
+ this.key,
|
|
|
|
+ this.appName,
|
|
|
|
+ null
|
|
|
|
+ );
|
|
|
|
+ console.log(this.fmap);
|
|
|
|
+ this.fmap.parseData("1001724_29", 1, res => {
|
|
|
|
+ console.log(res);
|
|
|
|
+ this.fParser = new SFloorParser(null);
|
|
|
|
+ console.log(this.fParser);
|
|
|
|
+ this.fParser.parseData(res);
|
|
|
|
+ this.fParser.spaceList.forEach(t => {
|
|
|
|
+ t.connect('click', this, this.spaceClick)
|
|
|
|
+ this.scene.addItem(t)
|
|
|
|
+ });
|
|
|
|
+ this.fParser.wallList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.fParser.doorList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.fParser.columnList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.fParser.casementList.forEach(t => this.scene.addItem(t));
|
|
|
|
+ this.view.scene = this.scene;
|
|
|
|
+ this.view.fitSceneToView();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ clearGraphy() {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.scene = null;
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.view = new SGraphyView("canvas");
|
|
|
|
+ },
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- // 将场景赋给view对图进行绘制
|
|
|
|
- this.initWidth = document.documentElement.clientWidth
|
|
|
|
- this.view = new FloorView(`map`)
|
|
|
|
- this.ZoneScene = new ZoneScene()
|
|
|
|
- // this.ZoneScene.loadUrl(this.mapUrl).then(res => {
|
|
|
|
- // this.view.scene = this.ZoneScene;
|
|
|
|
- // this.view.fitSceneToView();
|
|
|
|
- // });
|
|
|
|
- }
|
|
|
|
|
|
+ this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
|
+ this.canvasHeight = this.$refs.graphy.offsetHeight;
|
|
|
|
+ },
|
|
}
|
|
}
|
|
-</script>
|
|
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+ #floor_base{
|
|
|
|
+ #fengMap {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ z-index: -1;
|
|
|
|
+ }
|
|
|
|
+ .canvas-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|