ソースを参照

fix:优化鹰眼图

YaolongHan 4 年 前
コミット
f4bc35b460

+ 7 - 0
docs/.vuepress/components/tDInsert/data/equipmentList.js

@@ -6,4 +6,11 @@ export const equipmentList = [
         width: 30,        //设备在视图中展示的大小(1=实际中的1m)
         height: 30,
     },
+    {
+        equipId: "1111122",   //设备id
+        equipName: "xxx22",   //设备名称
+        bimLocation: "80788.48688281251,-58850.65770572917,53800.0",  //设备坐标
+        width: 30,        //设备在视图中展示的大小(1=实际中的1m)
+        height: 30,
+    },
 ]

+ 4 - 4
docs/.vuepress/components/tDInsert/partChange.vue

@@ -18,7 +18,7 @@ import { SColor, SPoint } from "@persagy-web/draw";
 const map1 = require("../../../public/assets/map/1.json");
 import { equipmentList } from "./data/equipmentList.js";
 import { spaceList } from "./data/spacelist.js";
-// import { MarkItem } from "./addPictrueClass/MarkItem";
+import { MarkItem } from "./addPictrueClass/MarkItem";
 import { FloorView } from "./addPictrueClass/FloorView";
 export default {
   data() {
@@ -137,9 +137,9 @@ export default {
             url: require("./../../public/assets/img/mark.png"),
           };
           // vuepress 报错 暂时注掉
-          // const aaa = new MarkItem(null, mark);
-          // aaa.connect("onMouseDown", this, this.equipDown);
-          // this.scene.addItem(aaa);
+          const aaa = new MarkItem(null, mark);
+          aaa.connect("onMouseDown", this, this.equipDown);
+          this.scene.addItem(aaa);
         }
       });
     },

+ 37 - 12
docs/.vuepress/components/tuopu/baseTopu9.vue

@@ -34,6 +34,7 @@ export default {
       view: null, // 视图 view
       enlarge_view: null, //鹰眼图
       scene: null, // 场景类
+      scene_enlarge: null, //鹰眼场景
     };
   },
   methods: {
@@ -41,7 +42,7 @@ export default {
     init() {
       this.clearImg();
       this.view ? (this.view.scene = this.scene) : null;
-      this.enlarge_view ? (this.enlarge_view.scene = this.scene) : null;
+      this.enlarge_view ? (this.enlarge_view.scene = this.scene_enlarge) : null;
       // 获取压缩包数据并解压
       this.getMapBlob();
     },
@@ -100,11 +101,17 @@ export default {
           return obj;
         });
       }
+      // 生成大图解析器
       const parse = new PTopoParser();
       parse.factory = new topuFactory();
-      // 获取数据解析数据再将转化得实例添加到场景中
+      // 生成鹰眼图解析器
+      const parse_enlargee = new PTopoParser();
+      parse_enlargee.factory = new topuFactory();
 
+      // 获取数据解析数据再将转化得实例添加到场景中
       parse.parseData(data.content.elements);
+      parse_enlargee.parseData(data.content.elements);
+
       parse.markers.forEach((item) => {
         item.moveable = false;
         this.scene.addItem(item);
@@ -115,25 +122,42 @@ export default {
           item.setEquipName();
           item.setStatusPointColor("#7ed321");
         }
-
         // 相关事件触发
         item.connect("onMouseDown", this, this.onMousedown);
         item.connect("onMouseUp", this, this.onMouseup);
         item.connect("onMouseLeave", this, this.onMouseleave);
         item.connect("onMouseEnter", this, this.onMouseenter);
-        // 监听放大视图中滚轮放缩事件, wheelScale 是回调
-        this.view.connect("onMouseWheel", this, this.wheelScale);
-        // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
-        this.view.connect("leftMove", this, this.midMouseMove);
-        // 监听标准视图的事件, 回调函数是 mouseMove
-        this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
         this.scene.addItem(item);
-
       });
       parse.relations.forEach((t) => {
         t.moveable = false;
         this.scene.addItem(t);
       });
+
+      // 鹰眼图 获取数据解析数据再将转化得实例添加到场景中
+      parse_enlargee.markers.forEach((item) => {
+        item.moveable = false;
+        this.scene_enlarge.addItem(item);
+      });
+      parse_enlargee.nodes.forEach((item) => {
+        item.moveable = false;
+        // 隐藏信息点名称
+        let msgList = item.getMsgList().forEach((t) => {
+          t.visible = false;
+        });
+        this.scene_enlarge.addItem(item);
+      });
+      parse_enlargee.relations.forEach((t) => {
+        t.moveable = false;
+        this.scene_enlarge.addItem(t);
+      });
+
+      // 监听放大视图中滚轮放缩事件, wheelScale 是回调
+      this.view.connect("onMouseWheel", this, this.wheelScale);
+      // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
+      this.view.connect("leftMove", this, this.midMouseMove);
+      // 监听标准视图的事件, 回调函数是 mouseMove
+      this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
       setTimeout(() => {
         // 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
         const scale = this.canvasHeight / 150;
@@ -146,7 +170,6 @@ export default {
     },
     // 鼠标点击事件
     onMousedown(item, e) {
-      console.log("鼠标按下!", item, e);
       this.$emit("onMousedown", item, e);
     },
     // 放大视图 滚轮放缩事件回调
@@ -201,6 +224,7 @@ export default {
     // 清空画布
     clearImg() {
       this.scene = new SGraphScene();
+      this.scene_enlarge = new SGraphScene();
       if (this.view) {
         this.view.update();
       }
@@ -218,10 +242,11 @@ export default {
     this.canvasHeight = 600;
     // 初始化场景类
     this.view = new FloorView("floor_topu9");
+    // 初始化鹰眼场景类
     this.enlarge_view = new EagleView("enlarge"); // 小图
     if (this.scene) {
       this.view.scene = this.scene;
-      this.enlarge_view.scene = this.scene;
+      this.enlarge_view.scene = this.scene_enlarge;
     }
     this.init();
   },

+ 48 - 7
docs/guides/tuopuInsert/eagle-eyes.md

@@ -20,6 +20,9 @@
 ### 源码解析
 
 ```js
+// 添加鹰眼图,首先要和展示大图一样,有新的view、scene、parse
+// 然后通过事件等相互联动;以下为 demo 解析:
+
 // <!-- 1 添加鹰眼canvas -->
     <canvas
       id="enlarge"
@@ -28,22 +31,60 @@
       tabindex="0"
       style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
     />
-// 2.实例化一个场景(scene), view和鹰眼view共用;
-  this.enlarge_view = new EagleView("enlarge"); // 小图
+// 2.实例化两个场景(scene), view和鹰眼view各用一个;
+  2.1 data() {
+    return {
+      view: null, // 视图 view
+      enlarge_view: null, //鹰眼图
+      scene: null, // 场景类
+      scene_enlarge: null, //鹰眼场景
+      ...
+    };
+  },
+
+  2.2 this.enlarge_view = new EagleView("enlarge"); // 小图
+
     if (this.scene) {
-      this.view.scene = this.scene;
-      this.enlarge_view.scene = this.scene;
+       this.view.scene = this.scene;
+      this.enlarge_view.scene = this.scene_enlarge;
     }
-//3.为场景中展示的元素绑定onMouseMove事件, 参数意义依次为 (事件名, 接收者, 回调函数);
+//  3.生成各自解析器;并注入scene
+ //3.1
+    // 生成大图解析器
+      const parse = new PTopoParser();
+      parse.factory = new topuFactory();
+      // 生成鹰眼图解析器
+      const parse_enlargee = new PTopoParser();
+      parse_enlargee.factory = new topuFactory();
+  //3.2
+    // 新增 鹰眼图 获取数据解析数据再将转化得实例添加到场景中
+      parse_enlargee.markers.forEach((item) => {
+        item.moveable = false;
+        this.scene_enlarge.addItem(item);
+      });
+      parse_enlargee.nodes.forEach((item) => {
+        item.moveable = false;
+        // 隐藏信息点名称
+        let msgList = item.getMsgList().forEach((t) => {
+          t.visible = false;
+        });
+        this.scene_enlarge.addItem(item);
+      });
+      parse_enlargee.relations.forEach((t) => {
+        t.moveable = false;
+        this.scene_enlarge.addItem(t);
+      });
+
+//4.为场景中展示的元素绑定onMouseMove事件, 参数意义依次为 (事件名, 接收者, 回调函数);
 
- // 监听放大视图中滚轮放缩事件, wheelScale 是回调
+      // 监听放大视图中滚轮放缩事件, wheelScale 是回调
         this.view.connect("onMouseWheel", this, this.wheelScale);
         // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
         this.view.connect("leftMove", this, this.midMouseMove);
         // 监听标准视图的事件, 回调函数是 mouseMove
         this.enlarge_view.connect("viewMouseMove", this, this.mouseMove);
 
-// 4. FloorView.ts 中新增移动回调
+// 5. FloorView.ts 中新增移动回调
  protected onMouseMove(event: MouseEvent): void {
         super.onMouseMove(event);
         // 按左键移动