解决Cesium错误拾取贴地多边形的问题,对拾取到的GroundPrimitive Polygon 进行精确拾取检测

问题:

在cesium地表上绘制 PolygonGeometry 的GroundPrimitive,即贴地多边形时,存在拾取错误的问题,可能是因为cesium射线检测误拾取到了多个位置不同的多边形构成的大包围盒,也可能是刚加载完。数据还没有变换完成导致了误拾取。测试重现 偏向是第一种原因。

解决:

精确判断点击的点是否在GroundPrimitive多边形内,对拾取到的GroundPrimitive Polygon 进行精确拾取检测

  /**
   * 判断三维空间中的点是否在多边形内(支持复杂多边形和孔洞)
   * @param position 待检测点
   * @param polygon 多边形
   * @param scene
   * @returns 是否在多边形内
   */
isPointInGeometry (position: Cartesian3, polygon: any, scene: Scene) {
    const ray = scene.camera.getPickRay(position)

    if (!ray) {
      console.error('const ray = _scene.camera.getPickRay(position) 点击位置发出的射线失败')
      return false
    }
    try {
      // 获取待检测点(世界坐标)
      const worldPosition = scene.globe.pick(ray, scene) // 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。

      if (!worldPosition) {
        console.error('const worldPosition = _scene.globe.pick(ray, _scene) 未能获得点击位置射线的世界坐标')
        return false
      }
      // 获取多边形坐标
      const vertices = getPolygonCoordinates(polygon)
      // ----------------------------
      // 步骤1: 坐标转换
      // ----------------------------
      // 将世界坐标转换为经纬度
      const pointCarto = Cartographic.fromCartesian(worldPosition)
      const pointLonLat = [pointCarto.longitude, pointCarto.latitude]

      // console.log('坐标转换 pointCarto', pointCarto)
      // ----------------------------
      // 步骤2: 提取几何体顶点
      // ----------------------------
      const polygonLonLat: number[][] = []

      for (let i = 0; i < vertices.length; i++) {
        // 提取顶点笛卡尔坐标
        const vertex = vertices[i]
        // 转换为经纬度
        const vertexCarto = Cartographic.fromCartesian(vertex)

        polygonLonLat.push([vertexCarto.longitude, vertexCarto.latitude])
      }
      // console.log('提取几何体顶点 polygonLonLat', polygonLonLat)
      // 空顶点直接返回
      if (polygonLonLat.length === 0) return false

      // ----------------------------
      // 步骤3: 确保多边形闭合
      // ----------------------------
      const first = polygonLonLat[0]
      const last = polygonLonLat[polygonLonLat.length - 1]

      if (!Math.equalsEpsilon(first[0], last[0], 1e-10) ||
        !Math.equalsEpsilon(first[1], last[1], 1e-10)) {
        polygonLonLat.push([first[0], first[1]])
      }
      // console.log('确保多边形闭合 polygonLonLat', polygonLonLat)
      // console.groupEnd()
      // ----------------------------
      // 步骤4: 使用射线法判断包含性
      // ----------------------------
      return rayCasting(pointLonLat, polygonLonLat)
    } catch (error) {
      console.error('Geometry containment check failed:', error)
      return false
    }
  }
}
/**
   * 获取多边形坐标(支持带洞的多边形)
   * @param polygon 多边形
   * @returns
   */
function getPolygonCoordinates (polygon: PolygonGraphics) {
  // 获取 PolygonHierarchy 对象
  const hierarchy = polygon.hierarchy?.getValue(JulianDate.now())

  if (!hierarchy) return []

  // 递归提取所有层级的坐标
  const extractPositions = (hierarchy: PolygonHierarchy): Cartesian3[] => {
    const positions = [...hierarchy.positions]

    if (hierarchy.holes) {
      hierarchy.holes.forEach((hole) => positions.push(...extractPositions(hole)))
    }
    return positions
  }

  return extractPositions(hierarchy)
}

/**
   * 射线法判断点是否在多边形内;从待检测点向右发射一条水平射线,统计射线与多边形边的交点数量
   * y轴
   *   ______1________
   * 4|              |
   *  |        .------------>
   * |              |2
   * |______________| x轴
   *         3
   * 1、3 Y坐标不在边的Y范围内(F F);4射线y坐标下的x值小于交点X (F);2 射线y坐标下的x值大于交点X (T)
   * @param point 点坐标 [经度, 纬度](弧度)
   * @param polygon 多边形顶点 [[经度, 纬度], ...](弧度)
   */
function rayCasting (point: number[], polygon: number[][]): boolean {
  let inside = false
  const [x, y] = point

  // 遍历多边形的每条边
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const [xi, yi] = polygon[i]
    const [xj, yj] = polygon[j]

    // 计算射线与边的交点
    const intersect = (
      (yi > y) !== (yj > y) && // 点Y坐标在边的Y范围内
      x < ((xj - xi) * (y - yi)) / (yj - yi) + xi // 交点X坐标在射线右侧
    )

    if (intersect) inside = !inside
  }
  return inside
}
### 实现 Cesium 中 GeoJSON 数据的拾取 为了实现在 Cesium 中对 GeoJSON 数据的拾取功能,可以采用监听鼠标事件的方式,并通过 `Cesium.ScreenSpaceEventHandler` 来处理这些事件。当检测到鼠标移动时,程序会查询当前屏幕坐标下的实体,并改变其样式以达到高亮的效果。 #### 创建 GeoJSON 图层并绑定交互逻辑 首先,在初始化阶段加载 GeoJSON 文件: ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); fetch('/path/to/your.geojson') .then(response => response.json()) .then(data => { const dataSource = new Cesium.GeoJsonDataSource(); dataSource.load(data, { clampToGround: true, stroke: Cesium.Color.HOTPINK, fill: Cesium.Color.PINK.withAlpha(0.5), strokeWidth: 3 }).then(function () { viewer.dataSources.add(dataSource); viewer.zoomTo(dataSource); setupHoverEffect(viewer, dataSource.entities.values); // 设置悬浮效果函数 }); }); ``` 接着定义用于管理 hover 效果的帮助函数: ```javascript function setupHoverEffect(viewer, entities) { let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); function highlightEntity(entity) { if (entity && entity.polygon) { // 假设是多边形类型的特征 entity.polygon.material = Cesar.Color.YELLOW; // 改变颜色为黄色表示选中状态 } } function resetHighlight() { entities.forEach((entity) => { if (entity.polygon) { entity.polygon.material = Cesium.Color.PINK.withAlpha(0.5); // 还原默认材质属性 } }); } handler.setInputAction(function(movement){ var pickedObject = viewer.scene.pick(movement.endPosition); resetHighlight(); // 清除之前的高亮 if(Cesium.defined(pickedObject)){ highlightEntity(pickedObject.id); // 高亮新选取的对象 } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); } ``` 此代码片段展示了如何利用 `ScreenSpaceEventHandler` 对象捕捉鼠标的移动动作,并针对被选中的要素应用不同的视觉风格[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值