baseEditer.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <div id="baseEditer">
  3. <div id="fengMap"></div>
  4. <div class="canvas-container" ref="graphy">
  5. <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import { SFengParser } from "@saga-web/feng-map";
  11. import { SFloorParser, SImageItem,STextItem } from "@saga-web/big";
  12. // import { DirectRelationItem } from "@saga-web/topology/lib/items/DirectRelationItem.js";
  13. import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
  14. import { SPolygonItem } from "./mapClass/SPolygonItem";
  15. import {FloorView} from "./../lib/FloorView"
  16. export default {
  17. data() {
  18. return {
  19. appName: "万达可视化系统",
  20. key: "23f30a832a862c58637a4aadbf50a566",
  21. mapServerURL: "/wanda",
  22. fmapID: "1001724_29",
  23. fmap: null,
  24. canvasWidth: 700,
  25. canvasHeight: 800,
  26. fParser: null
  27. };
  28. },
  29. mounted() {
  30. this.canvasWidth = this.$refs.graphy.offsetWidth;
  31. this.canvasHeight = this.$refs.graphy.offsetHeight;
  32. this.init()
  33. },
  34. methods: {
  35. init() {
  36. document.getElementById(`canvas`).focus()
  37. this.clearGraphy();
  38. this.scene = new SGraphyScene();
  39. this.fmap = new SFengParser(
  40. "fengMap",
  41. this.mapServerURL,
  42. this.key,
  43. this.appName,
  44. null
  45. );
  46. console.log(this.fmap);
  47. this.fmap.parseData("1001724_29", 1, res => {
  48. console.log(res);
  49. this.fParser = new SFloorParser(null);
  50. console.log(this.fParser);
  51. this.fParser.parseData(res);
  52. this.fParser.spaceList.forEach(t => this.scene.addItem(t));
  53. this.fParser.wallList.forEach(t => this.scene.addItem(t));
  54. this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
  55. this.fParser.doorList.forEach(t => this.scene.addItem(t));
  56. this.fParser.columnList.forEach(t => this.scene.addItem(t));
  57. this.fParser.casementList.forEach(t => this.scene.addItem(t));
  58. this.addPolyLine();
  59. this.DirectRelationItem();
  60. this.view.scene = this.scene;
  61. this.view.fitSceneToView();
  62. });
  63. },
  64. // 引入构建多边形类
  65. addPolyLine() {
  66. const data = {
  67. PointList: [
  68. { X: -138.71000000089407, Y: -17.5 },
  69. { X: -130.31000000052154, Y: -17.5 },
  70. { X: -130.31000000052154, Y: -25.5 },
  71. { X: -138.71000000089407, Y: -25.5 }
  72. ]
  73. };
  74. const Polylines = new SPolygonItem(null);
  75. Polylines.setStatus =2;
  76. this.scene.addItem(Polylines);
  77. this.scene.grabItem = Polylines;
  78. },
  79. // 引入折线
  80. DirectRelationItem() {
  81. const data = {
  82. PointList: [
  83. { X: -138.71000000089407, Y: -17.5 },
  84. { X: -130.31000000052154, Y: -17.5 }
  85. ]
  86. };
  87. const directRelationItem = new DirectRelationItem(null, data);
  88. this.scene.addItem(directRelationItem);
  89. },
  90. clearGraphy() {
  91. if (this.view) {
  92. this.view.scene = null;
  93. return;
  94. }
  95. this.view = new FloorView("canvas");
  96. document.getElementById('canvas').focus()
  97. },
  98. spaceClick(space, event) {
  99. // const item = new SImageItem(null, {
  100. // Width: 32,
  101. // Height: 32,
  102. // Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
  103. // })
  104. const item = new STextItem(null);
  105. item.moveTo(event[0].x, event[0].y)
  106. item.font.size = 12;
  107. item.zOrder = 999;
  108. item.connect('mousedown', this, this.iconClick)
  109. this.scene.addItem(item)
  110. setInterval(()=>{item.text+='魔'},1000)
  111. },
  112. iconClick(item, event) {
  113. console.log(2222222222222)
  114. },
  115. changeFloor() { },
  116. changeStatus(name) {
  117. switch (name) {
  118. case '选择':
  119. // test init
  120. this.init();
  121. break;
  122. case '画线':
  123. this.scene.isLining = true;
  124. console.log('lining')
  125. break;
  126. case '画文字':
  127. this.scene.isTexting = true;
  128. break;
  129. case '画图片':
  130. this.scene.isImging = true;
  131. break;
  132. default:
  133. console.log(name)
  134. break;
  135. }
  136. }
  137. }
  138. };
  139. </script>
  140. <style lang="less" scoped>
  141. #baseEditer {
  142. background: #ccc;
  143. width: 100%;
  144. height: 100%;
  145. // position: relative;
  146. #fengMap {
  147. position: absolute;
  148. width: 100px;
  149. height: 100px;
  150. z-index: -1;
  151. }
  152. .canvas-container {
  153. width: 100%;
  154. height: 100%;
  155. }
  156. }
  157. </style>