baseEditerzy.vue 4.8 KB

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