Skip to main content

坐标拾取和地图事件

使用Picking类来获取地图上的坐标，并使用MapEvents类来监听地图事件。

一、调用案例​

import THEngine from "@tuh/engine";

let picking = THEngine.scene.Interaction.Picking(viewer);

  picking = new THEngine.scene.Interaction.Picking(viewer);
        // 处理左键单击事件
        picking.on("LEFT_CLICK", (position, re) => {
          let ob = picking.getObject(position);
          console.log("鼠标左键点击", position, re, ob);
        });
        // 处理左键双击事件
        picking.on("LEFT_DOUBLE_CLICK", (position, re) => {
          console.log("鼠标左键双击", position, re);
        });
        // 处理右键单击事件
        picking.on("RIGHT_CLICK", (position, re) => {
          console.log("鼠标右键点击", position, re);
        });
        //鼠标中键点击
        picking.on("MIDDLE_CLICK", (position, re) => {
          console.log("鼠标中键点击", position, re);
        });
        // 处理鼠标移动事件
        picking.on(
          "MOUSE_MOVE",
          (position, re) => {
            //console.log("鼠标移入", position, re);
          },
          100
        );


在线案例 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=init/mouseEvent.html.

二、支持的事件类型​

事件类型描述适用设备
MOUSE_MOVE鼠标在视口内移动时触发鼠标设备
LEFT_DRAG按住鼠标左键并在视口内拖动时触发鼠标设备
MIDDLE_DRAG按住鼠标中键并在视口内拖动时触发鼠标设备
RIGHT_DRAG按住鼠标右键并在视口内拖动时触发鼠标设备
LEFT_CLICK在视口内点击鼠标左键时触发鼠标设备
MIDDLE_CLICK在视口内点击鼠标中键时触发鼠标设备
RIGHT_CLICK在视口内点击鼠标右键时触发鼠标设备
WHEEL滚动鼠标滚轮时触发鼠标设备
TOUCH_MOVE在触摸设备屏幕上移动手指时触发触摸设备
TOUCH_START在触摸设备屏幕上开始触摸（手指按下）时触发触摸设备
TOUCH_END在触摸设备屏幕上结束触摸（手指抬起）时触发触摸设备
DOUBLE_TAP在触摸设备屏幕上快速双击时触发触摸设备
CLICK鼠标左键点击或触摸设备上的单次触摸时触发鼠标、触摸设备
DRAG鼠标拖拽（左、中、右键）或触摸设备上满足条件的触摸移动时触发鼠标、触摸设备

三、Picking类提供的方法​

类说明​

Picking 类用于处理地图的点击交互，通过监听不同类型的屏幕空间事件，实现获取屏幕坐标、世界坐标、经纬度坐标以及拾取到的对象等功能。

构造函数​

(1) constructor(viewer)​

  • 参数：
    • viewer (Viewer)：场景对象。

实例方法​

(2) on(eventType, handler, moveInterval = 10)​

  • 功能：添加指定类型事件的监听。
  • 参数：
    • eventType (ScreenSpaceEventType)：事件的类型。
    • handler (Function)：回调方法，回调的第一个参数是屏幕坐标，第二个参数会包含世界坐标、经纬度坐标、拾取到的对象等。
    • moveInterval (Number)：鼠标移动事件的触发间隔毫秒数，变化超过间隔才会触发，可节省性能并提高有效帧率，默认 0 为不限制，建议为接近 1000/屏幕刷新率 的较小值。
  • 返回值：Object，返回 this，方便链式设置多个监听事件。

(3) remove(eventType)​

  • 功能：移除指定类型的事件监听。
  • 参数：
    • eventType (ScreenSpaceEventType)：要移除的事件类型。

(4) off()​

  • 功能：关闭所有事件监听，销毁事件处理器。

(5) hitTest(event, objectsToExclude, limit = 0)​

  • 功能：通过鼠标事件拾取坐标和模型，根据不同的场景条件（如是否开启深度检测、场景模式等）采用不同的拾取方式。
  • 参数：
    • event (Event)：鼠标事件回调参数。
    • objectsToExclude (Array)：禁止鼠标拾取的对象数组。
    • limit (number)：限制 pick 的数量，如果数量足够多，最后一个会是地面（开启深度检测的情况下），数量越多越卡顿，默认 0 时以速度高几十倍的 pickPosition 来获取坐标，如果要拾取对象，则 limit 传入需要 pick 的对象数量。
  • 返回值：Promise，resolve(result)，其中 result.screenPoint 为屏幕笛卡尔 2 坐标，result.position 为鼠标拾取处的笛卡尔 3 坐标（有模型是模型上坐标，没模型是地面坐标），result.results 为拾取的模型及坐标点（如果开启深度检测，则最后一个拾取到的对象是地面，没深度检测则地面为空）；reject()，如果在地球外则为 undefined，报失败。

(6) getObject(options)​

  • 功能：获取鼠标拾取对象。
  • 参数：
    • options (cartesian2)：鼠标拾取屏幕点，若 options.x 未定义，则会从 options.position 或 options.endPosition 中获取。
  • 返回值：object，返回拾取对象。

(7) getPositionByRay(windowPositionOrEvent)​

  • 功能：通过射线获取鼠标拾取点椭球体表面的笛卡尔坐标，当加载 DEM 时，利用该方法获取的坐标更精确。
  • 参数：
    • windowPositionOrEvent (Cartesian2 或鼠标回调事件)：屏幕笛卡尔 2 坐标或者鼠标回调事件。
  • 返回值：cartesian3，返回笛卡尔坐标。

(8) getPickFromRay(windowPosition, objectsToExclude)​

  • 功能：通过相机射线获取鼠标拾取对象，支持排除被拾取的对象列表。
  • 参数：
    • windowPosition (cartesian2)：鼠标拾取屏幕点。
    • objectsToExclude (Object[])：被排除的对象，可以是 Entity、primitives 等。
  • 返回值：object，返回拾取对象。

(9) getPositionByEllipsoid(windowPosition)​

  • 功能：获取鼠标拾取点椭球体表面的笛卡尔坐标，当加载 DEM 时获取的坐标误差较大。
  • 参数：
    • windowPosition (cartesian2)：鼠标拾取屏幕点。
  • 返回值：cartesian3，返回笛卡尔坐标。

(10) getPosition(windowPosition)​

  • 功能：获取鼠标拾取点笛卡尔坐标，获取的椭球体表面坐标误差较大。
  • 参数：
    • windowPosition (cartesian2)：鼠标拾取屏幕点。
  • 返回值：cartesian3，返回笛卡尔坐标。

(11) setCursor(type)​

  • 功能：设置鼠标光标样式。
  • 参数：
    • type (string)：光标样式。

(12) reset(resetCursor = true)​

  • 功能：移除所有类型的监听事件，也可以顺便帮助重置鼠标到默认样式，方便重用而不需要重新创建。
  • 参数：
    • resetCursor (Boolean)：是否要重置鼠标，默认 true。

(13) destroy()​

  • 功能：销毁 Picking 实例，包括移除所有监听事件、关闭事件处理器以及销毁自身相关资源。

静态方法​

(14) getPickFromRay(viewer, windowPosition, objectsToExclude)​

  • 功能：通过相机射线获取鼠标拾取对象，支持排除被拾取的对象列表（静态方法）。
  • 参数：
    • viewer (Viewer)：场景对象。
    • windowPosition (cartesian2)：鼠标拾取屏幕点。
    • objectsToExclude (Object[])：被排除的对象，可以是 Entity、primitives 等。
  • 返回值：object，返回拾取对象。

(15) verticalDrillPickFromRay(viewer, startPoint, option = {})​

  • 功能：在某点垂直方向做射线拾取（静态方法）。
  • 参数：
    • viewer (Viewer)：场景对象。
    • startPoint (cartesian3)：起点。
    • option (Object)：包含 limit（射线拾取数量）、objectsToExclude（不包含的要素）、width（拾取的像素宽度）等属性的对象。
  • 返回值：根据射线拾取的结果。

(16) axisDrillPickFromRay(viewer, startPoint, endPoint, option = {})​

  • 功能：连接起点和终点做射线拾取（静态方法）。
  • 参数：
    • viewer (Viewer)：场景对象。
    • startPoint (cartesian3)：起点。
    • endPoint (cartesian3)：终点。
    • option (Object)：包含 limit（射线拾取数量）、objectsToExclude（不包含的要素）、width（拾取的像素宽度）等属性的对象。
  • 返回值：根据射线拾取的结果。