|
@@ -0,0 +1,163 @@
|
|
|
+<!--
|
|
|
+ * @Author: zhangyu
|
|
|
+ * @Date: 2020-06-03 17:21:15
|
|
|
+ * @Info:
|
|
|
+ * @LastEditTime: 2020-06-03 17:25:05
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div id="baseEditer">
|
|
|
+ <div id="fengMap"></div>
|
|
|
+ <div class="canvas-container" ref="graphy">
|
|
|
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
+import { SFloorParser, SImageItem,STextItem } from "@saga-web/big";
|
|
|
+// import { DirectRelationItem } from "@saga-web/topology/lib/items/DirectRelationItem.js";
|
|
|
+import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
|
|
|
+import { SPolygonItem } from "./mapClass/SPolygonItem";
|
|
|
+import {FloorView} from "./../lib/FloorView"
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ appName: "万达可视化系统",
|
|
|
+ key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
+ mapServerURL: "/wanda",
|
|
|
+ fmapID: "1001724_29",
|
|
|
+ fmap: null,
|
|
|
+ canvasWidth: 700,
|
|
|
+ canvasHeight: 800,
|
|
|
+ fParser: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.canvasWidth = this.$refs.graphy.offsetWidth;
|
|
|
+ this.canvasHeight = this.$refs.graphy.offsetHeight;
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ document.getElementById(`canvas`).focus()
|
|
|
+ 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 => 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.addPolyLine();
|
|
|
+ this.DirectRelationItem();
|
|
|
+ this.view.scene = this.scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 引入构建多边形类
|
|
|
+ addPolyLine() {
|
|
|
+ const data = {
|
|
|
+ PointList: [
|
|
|
+ { X: -138.71000000089407, Y: -17.5 },
|
|
|
+ { X: -130.31000000052154, Y: -17.5 },
|
|
|
+ { X: -130.31000000052154, Y: -25.5 },
|
|
|
+ { X: -138.71000000089407, Y: -25.5 }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const Polylines = new SPolygonItem(null);
|
|
|
+ Polylines.setStatus =2;
|
|
|
+ this.scene.addItem(Polylines);
|
|
|
+ this.scene.grabItem = Polylines;
|
|
|
+ },
|
|
|
+ // 引入折线
|
|
|
+ DirectRelationItem() {
|
|
|
+ const data = {
|
|
|
+ PointList: [
|
|
|
+ { X: -138.71000000089407, Y: -17.5 },
|
|
|
+ { X: -130.31000000052154, Y: -17.5 }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ const directRelationItem = new DirectRelationItem(null, data);
|
|
|
+ this.scene.addItem(directRelationItem);
|
|
|
+ },
|
|
|
+ clearGraphy() {
|
|
|
+ if (this.view) {
|
|
|
+ this.view.scene = null;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.view = new FloorView("canvas");
|
|
|
+ document.getElementById('canvas').focus()
|
|
|
+ },
|
|
|
+ spaceClick(space, event) {
|
|
|
+ // const item = new SImageItem(null, {
|
|
|
+ // Width: 32,
|
|
|
+ // Height: 32,
|
|
|
+ // Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
|
|
|
+ // })
|
|
|
+ const item = new STextItem(null);
|
|
|
+ item.moveTo(event[0].x, event[0].y)
|
|
|
+ item.font.size = 12;
|
|
|
+ item.zOrder = 999;
|
|
|
+ item.connect('mousedown', this, this.iconClick)
|
|
|
+ this.scene.addItem(item)
|
|
|
+ setInterval(()=>{item.text+='魔'},1000)
|
|
|
+ },
|
|
|
+ iconClick(item, event) {
|
|
|
+ console.log(2222222222222)
|
|
|
+ },
|
|
|
+ changeFloor() { },
|
|
|
+ changeStatus(name) {
|
|
|
+ switch (name) {
|
|
|
+ case '选择':
|
|
|
+ // test init
|
|
|
+ this.init();
|
|
|
+ break;
|
|
|
+ case '画线':
|
|
|
+ this.scene.isLining = true;
|
|
|
+ console.log('lining')
|
|
|
+ break;
|
|
|
+ case '画文字':
|
|
|
+ this.scene.isTexting = true;
|
|
|
+ break;
|
|
|
+ case '画图片':
|
|
|
+ this.scene.isImging = true;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ console.log(name)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#baseEditer {
|
|
|
+ background: #ccc;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // position: relative;
|
|
|
+ #fengMap {
|
|
|
+ position: absolute;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .canvas-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|