persagy-web-doc/docs/guides/tuopuInsert/eagle-eyes.md

鹰眼模式

::: details 目录 [[toc]] :::

绘制示例

源码

::: details 示例demo <<< @/docs/.vuepress/components/tuopu/baseTopu9.vue :::

::: details 鹰眼 view 类 <<< @/docs/.vuepress/components/tuopu/items/EagleView.ts :::

源码解析

// 添加鹰眼图，首先要和展示大图一样，有新的view、scene、parse
// 然后通过事件等相互联动；以下为 demo 解析：

// <!-- 1 添加鹰眼canvas -->
    <canvas
      id="enlarge"
      width="200"
      height="150"
      tabindex="0"
      style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
    />
// 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()