## 鹰眼模式 ::: details 目录 [[toc]] ::: ### 绘制示例 ### 源码 ::: details 示例demo <<< @/docs/.vuepress/components/tuopu/baseTopu9.vue ::: ::: details 鹰眼 view 类 <<< @/docs/.vuepress/components/tuopu/items/EagleView.ts ::: ### 源码解析 ```js // 添加鹰眼图,首先要和展示大图一样,有新的view、scene、parse // 然后通过事件等相互联动;以下为 demo 解析: // // 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_enlarge; } // 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 是回调 this.view.connect("onMouseWheel", this, this.wheelScale); // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调 this.view.connect("leftMove", this, this.midMouseMove); // 监听标准视图的事件, 回调函数是 mouseMove this.enlarge_view.connect("viewMouseMove", this, this.mouseMove); // 5. FloorView.ts 中新增移动回调 protected onMouseMove(event: MouseEvent): void { super.onMouseMove(event); // 按左键移动 let se = new SMouseEvent(event); if (se.buttons & SMouseButton.LeftButton) { this.origin.x += se.x - this._leftKeyPos.x; this.origin.y += se.y - this._leftKeyPos.y; this.update() // 鼠标左键拖动 this.$emit('leftMove', se) }; ...... } // Function onMouseMove() ```