WMS + WFS 框选查询完整知识点总结

WFS (Web Feature Service) 查询完整知识点

一、WFS 核心概念

二、WFS 核心操作

三、WFS 请求参数详解 (GetFeature)

const params = {
    // 基础参数
    service: 'WFS',           // 固定值，服务类型
    version: '1.1.0',         // WFS 版本（1.0.0 / 1.1.0 / 2.0.0）
    request: 'GetFeature',    // 请求类型
    
    // 图层参数
    typeName: 'workspace:layer',  // 工作区:图层名
    
    // 输出参数
    outputFormat: 'json',     // 输出格式（json / application/json / gml）
    srsName: 'EPSG:4326',     // 坐标系
    
    // 过滤参数
    CQL_FILTER: "...",        // CQL 过滤条件
    bbox: "...",              // 矩形过滤（与 CQL_FILTER 互斥！）
    propertyName: "id,name",  // 指定返回的字段
    
    // 分页参数
    maxFeatures: 100,         // 最大返回数量
    startIndex: 0,            // 起始索引（分页用）
    sortBy: "id ASC",         // 排序
};

四、WFS 版本对比

⚠️ 重要：WFS 1.1.0 的坐标顺序是 (纬度, 经度)，这是最常见的坑！

五、CQL 空间查询函数

六、WFS 请求完整示例

// URL 方式
const url = '/geoserver/jiesen/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=jiesen:tb_list&outputFormat=json';

// 代码方式
const params = new URLSearchParams();
params.append('service', 'WFS');
params.append('version', '1.1.0');
params.append('request', 'GetFeature');
params.append('typeName', 'jiesen:tb_list');
params.append('outputFormat', 'json');

示例 2：属性过滤（CQL）

// 过滤：task_id 等于某个值，且 del_flag = 0
const cql = "task_id='fc9cb975-8570-4249-9454-3703c54bb65f' AND del_flag = 0";
params.append('CQL_FILTER', cql);

示例 3：空间过滤（BBOX - 正确坐标顺序）

// ⚠️ 注意：BBOX 参数顺序是 (纬度, 经度)
const bboxCondition = `BBOX(tb_shape, ${minLat}, ${minLon}, ${maxLat}, ${maxLon})`;
params.append('CQL_FILTER', bboxCondition);

示例 4：混合过滤（属性 + 空间）

const cqlFilter = "task_id='xxx' AND del_flag = 0";
const bboxCondition = `BBOX(tb_shape, ${minLat}, ${minLon}, ${maxLat}, ${maxLon})`;
params.append('CQL_FILTER', `${cqlFilter} AND ${bboxCondition}`);

示例 5：完整 WFS 查询代码

async function queryWFS(minLon, minLat, maxLon, maxLat, taskId) {
    const wfsUrl = '/geoserver/jiesen/wfs';
    
    const params = new URLSearchParams();
    params.append('service', 'WFS');
    params.append('version', '1.1.0');
    params.append('request', 'GetFeature');
    params.append('typeName', 'jiesen:tb_list');
    params.append('outputFormat', 'json');
    params.append('srsName', 'EPSG:4326');
    params.append('CQL_FILTER', `task_id='${taskId}' AND BBOX(tb_shape, ${minLat}, ${minLon}, ${maxLat}, ${maxLon})`);
    
    const response = await fetch(`${wfsUrl}?${params.toString()}`);
    const geojson = await response.json();
    return geojson;
}

七、常见错误及解决方案

八、WFS vs WMS 选择指南

九、GeoServer 配置检查清单

十、最佳实践总结

1. 版本选择：优先使用 WFS 1.1.0 + outputFormat=json

2. 坐标顺序：牢记 WFS 1.1.0 的 BBOX 是 (纬度, 经度) 顺序

3. 字段确认：必先用 DescribeFeatureType 确认几何字段名

4. CQL 一致性：WMS 和 WFS 使用完全相同的 CQL_FILTER

5. 分步测试：先测试无过滤 → 属性过滤 → 空间过滤 → 混合过滤

6. 错误处理：捕获 JSON 解析异常，检查是否为 XML 错误报告

7. 性能优化：使用 BBOX 而非复杂几何函数，添加 maxFeatures 限制

8. 数据转换：WFS 返回的 GeoJSON 属性名是下划线格式（task_id），需转换为驼峰（taskId）

WMS + WFS 框选查询完整知识点总结

一、核心概念

二、架构设计

text

┌─────────────────────────────────────────────────────────────┐
│                      前端 Cesium 应用                        │
├─────────────────────────────────────────────────────────────┤
│  WMS 图层显示              │  WFS 框选查询                   │
│  ┌─────────────────┐      │  ┌─────────────────┐           │
│  │ addWMS()        │      │  │ initBoxSelect() │           │
│  │ - 加载瓦片图层   │      │  │ - 绘制选框      │           │
│  │ - 应用 CQL 过滤 │      │  │ - 获取矩形范围  │           │
│  │ - 显示地图      │      │  │ - 调用 WFS 查询 │           │
│  └────────┬────────┘      │  └────────┬────────┘           │
│           │                │           │                     │
│           ▼                │           ▼                     │
│  ┌─────────────────┐      │  ┌─────────────────┐           │
│  │   相同 CQL 过滤  │◄─────┼──│ queryWFS...()   │           │
│  └─────────────────┘      │  │ - BBOX 空间过滤 │           │
│                           │  │ - 返回 GeoJSON  │           │
│                           │  └─────────────────┘           │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
                    ┌─────────────────┐
                    │    GeoServer    │
                    │  /jiesen/wms    │
                    │  /jiesen/wfs    │
                    └─────────────────┘

三、WMS 图层加载代码

public async addWMS(Bounds?: number[], CQL?: any) {
    this.clearAllSelections();
    this.removeWmsLayer();
    
    const url = process.env.NODE_ENV === 'development' 
        ? '/地址/wms' 
        : `${window.location.origin}/地址/wms`;
    const layers = '图层名';

    // 设置矩形范围
    let rectangle: Cesium.Rectangle | undefined = undefined;
    if (Bounds && Bounds.length === 4) {
        rectangle = Cesium.Rectangle.fromDegrees(Bounds[0], Bounds[1], Bounds[2], Bounds[3]);
        this.rectangle = rectangle;
    }

    // 构建 CQL 过滤条件
    let parameters: any = {
        format: 'image/png',
        version: '1.1.1',
        layers: layers,
        transparent: true,
    };
    
    let finalCqlFilter: string;
 
    parameters.CQL_FILTER = finalCqlFilter;
    
    // ✅ 保存当前 CQL，供 WFS 查询使用
    this.currentWmsCql = finalCqlFilter;

    this.wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
        url,
        layers,
        parameters,
        crs: 'EPSG:4326',   // WMS 1.3.0 使用 crs
        srs: 'EPSG:4326',   // WMS 1.1.1 使用 srs
        tilingScheme: new Cesium.GeographicTilingScheme(),
        rectangle: rectangle!,
        minimumLevel: 0,
        maximumLevel: 26,
        enablePickFeatures: false   // 关闭默认拾取，使用 WFS 查询
    });
    
    this.wmsLayer = this.viewer.imageryLayers.addImageryProvider(this.wmsImageryProvider);
    this.wmsLayer.terrainClamp = true;
    this.viewer.imageryLayers.raiseToTop(this.wmsLayer);
    this.wmsLayer.samplingHeight = 100;
    
}

四、框选交互代码（带了一个框，可以自行去掉）

  public initBoxSelect(callback?: (rect: { minLon: number; minLat: number; maxLon: number; maxLat: number; corners: any }) => void) {
    this.handler != null && this.handler.destroy();
    console.log('this.doubleHandler', this.doubleHandler);
    this.offGon();
    // 销毁旧的框选处理器
    this.boxHandler && this.boxHandler.destroy();
    this.boxHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

    let isDrawing = false;
    let startCarto: Cesium.Cartographic | null = null;

    // 移除上次临时显示的矩形
    if (this.activeShape) {
      this.viewer.entities.remove(this.activeShape);
      this.activeShape = null;
    }

    // 左键：第一次左键记录起点，第二次左键结束并回调
    this.boxHandler.setInputAction(async (e: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {
      const position = e?.position;
      if (!position) return;
      const ray = this.viewer.camera.getPickRay(position);
      if (!ray) return;
      const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
      if (!cartesian) return;
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const lon = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);

      if (!isDrawing) {
        // 开始绘制
        startCarto = cartographic;
        isDrawing = true;
        const coords = [lon, lat, lon, lat, lon, lat, lon, lat, lon, lat];
        this.activeShape = this.viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(coords)),
            material: Cesium.Color.YELLOW.withAlpha(0.25),
            outline: true,
            outlineColor: Cesium.Color.YELLOW,
          },
        });
      } else {
        // 结束绘制
        isDrawing = false;
        const startLon = Cesium.Math.toDegrees(startCarto!.longitude);
        const startLat = Cesium.Math.toDegrees(startCarto!.latitude);
        const minLon = Math.min(startLon, lon);
        const maxLon = Math.max(startLon, lon);
        const minLat = Math.min(startLat, lat);
        const maxLat = Math.max(startLat, lat);
        const corners = [
          { lon: minLon, lat: minLat },
          { lon: maxLon, lat: minLat },
          { lon: maxLon, lat: maxLat },
          { lon: minLon, lat: maxLat },
        ];
        // 回调结果
        try {
          if (this.activeShape) {
            this.viewer.entities.remove(this.activeShape);
            this.activeShape = null;
          }
          console.log('点到了', { minLon, minLat, maxLon, maxLat, corners });
          // 在框选结束的回调位置，添加这行
          const data = await this.queryWFSByRectangle(minLon, minLat, maxLon, maxLat);
          callback && callback(data);
        } catch (err) {
          console.error('框选回调错误', err);
        }
        // 销毁事件处理器（如需保留图形，可注释掉下面两行）
        this.boxHandler && this.boxHandler.destroy();
        this.boxHandler = null;
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    // 鼠标移动时更新矩形显示
    this.boxHandler.setInputAction((e: Cesium.ScreenSpaceEventHandler.MotionEvent) => {
      if (!isDrawing || !startCarto) return;
      const pos = e.endPosition;
      const ray = this.viewer.camera.getPickRay(pos);
      if (!ray) return;
      const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
      if (!cartesian) return;
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const lon = Cesium.Math.toDegrees(cartographic.longitude);
      const lat = Cesium.Math.toDegrees(cartographic.latitude);
      const startLon = Cesium.Math.toDegrees(startCarto.longitude);
      const startLat = Cesium.Math.toDegrees(startCarto.latitude);
      const minLon = Math.min(startLon, lon);
      const maxLon = Math.max(startLon, lon);
      const minLat = Math.min(startLat, lat);
      const maxLat = Math.max(startLat, lat);
      const coords = [minLon, minLat, maxLon, minLat, maxLon, maxLat, minLon, maxLat, minLon, minLat];
      if (this.activeShape) {
        (this.activeShape.polygon as any).hierarchy = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(coords));
      } else {
        this.activeShape = this.viewer.entities.add({
          polygon: {
            hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(coords)),
            material: Cesium.Color.YELLOW.withAlpha(0.25),
            outline: true,
            outlineColor: Cesium.Color.YELLOW,
          },
        });
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  }

重点是   

 const data = await this.queryWFSByRectangle(minLon, minLat, maxLon, maxLat);
          callback && callback(data);

五、WFS 框选查询代码

async queryWFSByRectangle(minLon: number, minLat: number, maxLon: number, maxLat: number) {
    const wfsUrl = process.env.NODE_ENV === 'development'
        ? '/地址/wfs'
        : `${window.location.origin}/地址/wfs`;

    // ✅ 使用与 WMS 相同的 CQL 过滤条件
    const cqlFilter = this.currentWmsCql;

    // ✅ 关键：BBOX 的正确顺序是 (纬度, 经度)
    const bboxCondition = `BBOX(tb_shape, ${minLat}, ${minLon}, ${maxLat}, ${maxLon})`;

    const params = new URLSearchParams();
    params.append('service', 'WFS');
    params.append('version', '1.1.0');
    params.append('request', 'GetFeature');
    params.append('typeName', 'jiesen:tb_list');
    params.append('outputFormat', 'json');
    params.append('srsName', 'EPSG:4326');
    params.append('CQL_FILTER', `${cqlFilter} AND ${bboxCondition}`);

    const url = `${wfsUrl}?${params.toString()}`;

    try {
        const response = await fetch(url);
        const geojson = await response.json();
        console.log(`✅ 框选范围内找到 ${geojson.features?.length || 0} 个要素`);
        return geojson;
    } catch (error) {
        console.error('WFS请求失败:', error);
        return { features: [] };
    }
}

七、调用方代码

实例类后

		wayLineShowMap.initBoxSelect(async (rect: { minLon: number; minLat: number; maxLon: number; maxLat: number; corners: number[][] }) => {
			// 调用 WFS 查询获取 GeoJSON
			console.log('rect', rect);}}

八、关键注意事项

geom 的含义

在你的代码中，geom 是一个占位符，需要替换成你实际的几何字段名。

一、geom 是什么？

二、如何找到你实际的几何字段名？

方法1：通过 GeoServer 界面查看

1. 登录 GeoServer → 数据 → 图层

2. 找到 你的图层名，点击图层名称

3. 向下滚动到 "要素类型详细信息" 表格

4. 找到类型为 Geometry 的行，"属性"列的值就是几何字段名

九、常见错误及解决方案

十、数据流向图

text

用户点击地图
    │
    ▼
initBoxSelect() 开启框选
    │
    ├── 第一次点击 ──► 记录起点，显示黄色半透明矩形
    │
    ├── 鼠标移动 ────► 实时更新矩形大小
    │
    └── 第二次点击 ──► 计算矩形范围
              │
              ▼
        callback({ minLon, minLat, maxLon, maxLat })
              │
              ▼
        queryWFSByRectangle()
              │
              ├── 使用 currentWmsCql（与 WMS 一致）
              ├── 构建 BBOX 条件（纬度在前）
              └── 发送 WFS 请求
                      │
                      ▼
                GeoServer
                      │
                      ▼
                GeoJSON 数据
                      │
                      ▼
        convertWfsToDataFormat()
                      │
                      ▼
        后端统一格式数据
                      │
                      ▼
        更新 selectedAreas，显示选中结果