|
@@ -1,168 +0,0 @@
|
|
|
-<!--
|
|
|
- * @Author: zhangyu
|
|
|
- * @Date: 2020-06-03 17:21:15
|
|
|
- * @Info:
|
|
|
- * @LastEditTime: 2020-06-20 14:33:27
|
|
|
--->
|
|
|
-<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 { SPoint } from "@saga-web/draw/lib";
|
|
|
-import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem } from "@saga-web/big";
|
|
|
-import { SPolygonItem } from "./mapClass/SPolygonItem";
|
|
|
-import { FloorView } from "./../lib/FloorView"
|
|
|
-import { FloorScene } from "./../lib/FloorScene"
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- appName: "万达可视化系统",
|
|
|
- key: "23f30a832a862c58637a4aadbf50a566",
|
|
|
- mapServerURL: "/wanda",
|
|
|
- fmapID: "1001724_29",
|
|
|
- fmap: null,
|
|
|
- canvasWidth: 700,
|
|
|
- canvasHeight: 800,
|
|
|
- fParser: null,
|
|
|
- scene: null,
|
|
|
- view: 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 FloorScene();
|
|
|
- this.fmap = new SFengParser(
|
|
|
- "fengMap",
|
|
|
- this.mapServerURL,
|
|
|
- this.key,
|
|
|
- this.appName,
|
|
|
- null
|
|
|
- );
|
|
|
- console.log(this.fmap);
|
|
|
- this.fmap.parseData("1001724_29", 6, res => {
|
|
|
- console.log(res);
|
|
|
- this.fParser = new SFloorParser(null);
|
|
|
- console.log(this.fParser);
|
|
|
- this.fParser.parseData(res);
|
|
|
- this.fParser.spaceList.forEach(t => {
|
|
|
- t.connect('clicjnnmnk', 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.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.status = 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 SImageItem(null);
|
|
|
- // item.moveTo(event[0].x, event[0].y)
|
|
|
- // item.url = 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056'
|
|
|
- // 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;
|
|
|
- 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>
|