123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <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>
|