如何用js代码获取坐标
2026-04-10 17:27
青罗 前台管理员
2026-04-13 09:59

参考以下代码:

// 二次开发API参考 https://www.shanhaibi.com/docs/v1/tx9rigt2ff6e0m1h/


export class SampleExtension {
  /*
   * 定义属性
   * 如果只想在类内部使用属性变量,不需要将属性变量展示在自定义设置项中,
   * 可以把它设置成 Private 属性,JavaScript 用"#"代表 Private 属性
   * 定义的属性可以使用中文名称
   */
  场景 = Element.empty();
  #isLinstenEvent = false;
  #clickObservable = null;
  #scene = null;
  #enableClick = false;
  #stopListenEvent = false;
  #currentPosition = "";
  #updateLineAxisFn = null;

  initEventListen() {
    if (this.#isLinstenEvent) return;
    if (!this.场景?.name) return;

    const { getScene, worldToScreen } = this.场景.getMountedInstance() || {};
    const { pickPositionOnSurface, updateLineAxis } = this.场景._getExtension("pick");
    this.#updateLineAxisFn = updateLineAxis;

    if (!getScene) return;
    this.#isLinstenEvent = true;
    this.#scene = getScene();
    this.#clickObservable = this.#scene.onPointerObservable.add(async (pointerInfo) => {
      if(!this.#enableClick || this.#stopListenEvent) return;
      const { type, event } = pointerInfo;
      const positionStr = await pickPositionOnSurface(pointerInfo.event.offsetX, pointerInfo.event.offsetY);
      if(!positionStr) return;
      const position = JSON.parse(positionStr);

      this.#updateLineAxisFn && this.#updateLineAxisFn(true, position);
      if(type !== 32 || event.button !== 0) return;
      if(event.buttons > 0) return;

      this.#currentPosition = `${position.x},${position.y},${position.z}`;

      this.element.emit("点位点击", {
        position: this.#currentPosition,
      });
      this.#stopListenEvent = true;
    })
  }

  removeEventListen() {
    if (!this.#scene) return;
    if (this.#clickObservable) {
      this.#scene.onPointerObservable.remove(this.#clickObservable);
      this.#clickObservable = null;
    }
    this.#isLinstenEvent = false;
  }

  async init() {
    this.element.addEventListener("开启点击交互", (ev)=>{
      this.#enableClick = true;
      this.#stopListenEvent = false;
    });

    this.element.addEventListener("关闭点击交互", (ev)=>{
      this.#enableClick = false;
      this.#updateLineAxisFn && this.#updateLineAxisFn(false);
    });

    this.initEventListen();
  }
  /**
   * 生命周期函数 组件销毁时调用,一般在此处清空监听事件
   *
   */
  destroy() {
    if (this.#isLinstenEvent) {
      this.removeEventListen();
    }
  }
}

相关问题

山海鲸发布之后 在浏览器中访问 渲染引擎使用的是 three.js 吗?
通过API 进行接入数据源,我接口有参数可以进行数据筛选 。我希望在不同组件上用同一个数据源 但是给不同的 组件绑定不同的 参数进行传递,获取对应的数据 进行 展示,这个需要怎么操作?
如何用AI调整大屏样式
如何点击确定按钮,获取到下拉和时间控件的值?
请问在二次开发的时候,会通过一个websocket连接来更新多个Echarts图表的数据和3d模型里的显示,可以在顶级图层使用二次开发的js代码来完成所有操作吗
想山海鲸接入自己的一个代码,可以接入吗?怎么接入呢?
如何用程序控制翻页?比如我搞了个跟PPT一样的翻页笔,山海鲸可视化能够用翻页笔进行翻页吗?不是自动翻,是我按一下翻一下,或者有没有类似的功能?用翻页笔上的指定按键点开页面上的某个按钮
在三维场景中,加入geojson文件,如何控制导入线段的颜色和线宽?
中国地图飞线层 我用示例数据可以显示 但是更改了数据就不行了 坐标数据在高德地图只能获得起点的 终点的怎么获取?
json格式的数据导入软件后类别无法勾选到折线图上
扫描关注公众号

更多数字孪生可视化干货内容等你发现

了解更多内容

扫一扫
加入官方微信群
咨询热线0571-88650917
地址 公司 邮箱

杭州市文一西路海创科技中心 311121

杭州多算科技有限公司

support@shanhaibi.com

关注山海鯨官方qq群,了解更多内容

QQ群号:788095444

Copyright © 2020-2026 多算科技, All Rights Reserved. 浙ICP备20006837号-5