getStart1.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!-- 画板 -->
  2. <template>
  3. <div ref="baseMap" class="base-map">
  4. <canvas
  5. v-loading="loading"
  6. id="floorMap1"
  7. :width="canvasWidth"
  8. :height="canvasHeight"
  9. tabindex="0"
  10. ></canvas>
  11. </div>
  12. </template>
  13. <script>
  14. import { SGraphView, SGraphScene } from "@persagy-web/graph";
  15. import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
  16. import { SColor } from "@persagy-web/draw";
  17. export default {
  18. data() {
  19. return {
  20. canvasWidth: 0, // 画布的宽
  21. canvasHeight: 0, // 画布的高
  22. view: null, // 视图 view
  23. scene: null, // 场景类
  24. dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
  25. mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
  26. loading: false,
  27. isShowColumn: false, //是否展示柱子
  28. isShowWall: false, //是否显示墙
  29. isShowVirtualWall: false, //是否显示虚拟墙
  30. isShowDoor: false, // 是否显示门
  31. isShowWindow: false, //是否显示窗户
  32. isSpaceSelectable: true, //是否显示空间
  33. };
  34. },
  35. methods: {
  36. // 初始化
  37. init() {
  38. this.clearImg();
  39. this.view ? (this.view.scene = this.scene) : null;
  40. // 获取压缩包数据并解压
  41. this.getMapBlob();
  42. },
  43. // 请求获取地图的压缩包
  44. getMapBlob() {
  45. const url = this.mapUrl + this.dataKey;
  46. this.loading = true;
  47. getJsonz(url)
  48. .then((data) => {
  49. // 解析数据并放入压缩包中
  50. this.parserData(data);
  51. this.loading = false;
  52. })
  53. .catch(() => {
  54. this.loading = false;
  55. });
  56. },
  57. // 解析数据并注入 scene 类中
  58. parserData(data) {
  59. let parser = new SFloorParser();
  60. parser.parseData(data);
  61. parser.spaceList.forEach((t) => {
  62. // 是否显示
  63. t.visible = this.isSpaceSelectable;
  64. //是否展示名称
  65. t.showBaseName = false;
  66. t.strokeColor = new SColor("#F0F3F7");
  67. t.fillColor = new SColor("#F0F3F7");
  68. t.lineWidth = 1;
  69. // 添加图例
  70. this.scene.addItem(t);
  71. });
  72. parser.wallList.forEach((t) => {
  73. // 是否显示
  74. t.visible = this.isShowWall;
  75. this.scene.addItem(t);
  76. });
  77. parser.virtualWallList.forEach((t) => {
  78. // 是否显示
  79. t.visible = this.isShowVirtualWall;
  80. this.scene.addItem(t);
  81. });
  82. parser.doorList.forEach((t) => {
  83. // 是否显示
  84. t.visible = this.isShowDoor;
  85. this.scene.addItem(t);
  86. });
  87. parser.columnList.forEach((t) => {
  88. // 是否显示
  89. t.visible = this.isShowColumn;
  90. this.scene.addItem(t);
  91. });
  92. parser.casementList.forEach((t) => {
  93. // 是否显示
  94. t.visible = this.isShowWindow;
  95. this.scene.addItem(t);
  96. });
  97. // 画板是否可拖动
  98. this.view.DragMove = true;
  99. this.view.fitSceneToView();
  100. },
  101. // 清空画布
  102. clearImg() {
  103. this.scene = new SGraphScene();
  104. if (this.view) {
  105. this.view.update();
  106. }
  107. },
  108. },
  109. watch: {
  110. // 监听key
  111. dataKey: {
  112. handler(val) {
  113. if (val) {
  114. this.init();
  115. }
  116. },
  117. immediate: true,
  118. },
  119. },
  120. created() {
  121. this.clearImg();
  122. },
  123. mounted() {
  124. // 获取 canvas 的宽高
  125. this.canvasWidth = 800;
  126. this.canvasHeight = 600;
  127. // 初始化场景类
  128. this.view = new SGraphView("floorMap1");
  129. if (this.scene) {
  130. this.view.scene = this.scene;
  131. }
  132. },
  133. };
  134. </script>