Cesium中GetFeatureInfo请求构造位置在哪？如何修改参数及获取bbox信息

GetFeatureInfo URL构造位置 #

Cesium 中 WMS 服务的 GetFeatureInfo 请求逻辑默认封装在 WebMapServiceImageryProvider 类的 pickFeatures 方法内，URL 构造的核心逻辑就在该方法内部的参数拼接环节。如果使用的是 WMTS 服务，对应逻辑在 WebMapTileServiceImageryProvider 的同名方法中。

替换参数、获取bbox的实现步骤 #

无需修改Cesium源码，直接在Angular项目中重写对应provider的pickFeatures方法即可实现自定义需求：

• 初始化WMS/WMTS影像服务provider后，先保留原始pickFeatures方法的引用
• 在重写逻辑中先计算当前瓦片的bbox参数，赋值到组件属性中供后续业务展示使用
• 自定义拼接GetFeatureInfo请求参数，将原本的x/y参数名替换为i/j，参数值不需要修改
• 可以选择直接发起自定义请求处理返回结果，也可以拼接完成URL后调用原始pickFeatures方法走Cesium默认解析逻辑

Angular 项目代码示例 #

import { Component, OnInit } from '@angular/core';
import { WebMapServiceImageryProvider, Cartesian2, GeographicProjection, Viewer } from 'cesium';

@Component({
  selector: 'app-cesium-map',
  templateUrl: './cesium-map.component.html',
  styleUrls: ['./cesium-map.component.css']
})
export class CesiumMapComponent implements OnInit {
  viewer!: Viewer;
  // 存储bbox供业务展示使用
  currentFeatureInfoBbox = '';

  ngOnInit(): void {
    this.initCesiumViewer();
  }

  private initCesiumViewer(): void {
    this.viewer = new Viewer('cesiumContainer', {
      baseLayer: false
    });

    // 初始化WMS影像服务
    const wmsProvider = new WebMapServiceImageryProvider({
      url: '你的WMS服务地址',
      layers: '你的图层名',
      parameters: {
        service: 'WMS',
        version: '1.1.1',
        format: 'image/png',
        transparent: true
      }
    });
    this.viewer.imageryLayers.addImageryProvider(wmsProvider);

    // 重写pickFeatures方法自定义GetFeatureInfo逻辑
    const originPick = wmsProvider.pickFeatures.bind(wmsProvider);
    wmsProvider.pickFeatures = (x: number, y: number, level: number, longitude: number, latitude: number) => {
      // 计算当前瓦片的bbox
      const tileRect = wmsProvider.tilingScheme.tileXYToRectangle(x, y, level);
      this.currentFeatureInfoBbox = [
        tileRect.west * 180 / Math.PI,
        tileRect.south * 180 / Math.PI,
        tileRect.east * 180 / Math.PI,
        tileRect.north * 180 / Math.PI
      ].join(',');

      // 自定义修改请求参数：替换x/y为i/j
      Object.defineProperties(wmsProvider, {
        getFeatureInfoParameters: {
          value: {
            ...wmsProvider.getFeatureInfoParameters,
            i: x,
            j: y
          },
          configurable: true
        }
      });
      // 调用原始方法执行请求，也可以自己发起fetch请求处理返回结果
      return originPick(x, y, level, longitude, latitude);
    };

    // 绑定地图点击事件触发feature查询
    this.viewer.screenSpaceEventHandler.setInputAction((e: any) => {
      const pickResult = this.viewer.imageryLayers.pickImageryLayerFeatures(e.position, this.viewer.scene);
      pickResult?.then(features => {
        // 处理返回的feature信息 + 已经存储的currentFeatureInfoBbox做业务展示
        console.log('查询到的要素：', features, '对应bbox：', this.currentFeatureInfoBbox);
      });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
}

如果你使用的WMS服务版本为1.3.0，需要同步调整坐标系参数和bbox的坐标顺序，避免查询位置偏移。

内容的提问来源于stack exchange，提问作者Fab83i