gmap-ol/dist/WfsUtil/WfsUtil.js

A set of helper classes for working with openLayers.

import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
import { Vector as VectorSource, TileWMS } from 'ol/source';
import { getLayerByName } from '../LayerUtil/LayerUtil';
import { GeoJSON } from 'ol/format';

// 添加 WMS 图层
export function addWmsLayer(olmap, wmsOptions) {
  if (olmap === null || olmap === undefined) {
    return; // 终止函数执行
  }
  const { layerName = '', url = '', layers, filter = [], visible = true, zIndex = 5 } = wmsOptions;
  const cql_filter = filter.length > 0 ? filter : '';
  if (cql_filter) {
    wmsOptions.CQL_FILTER = filter;
  }
  const wmsLayer = new TileLayer({
    source: new TileWMS({
      url: `${url}/wms`,
      params: {
        layers: layers,
        ...wmsOptions.params,
      },
      serverType: 'geoserver',
      crossOrigin: 'anonymous',
    }),
    visible,
    zIndex: zIndex,
  });
  wmsLayer.set('layerName', `${layerName ? layerName : ''}`);
  olmap.addLayer(wmsLayer);
}

// 添加 WFS 图层
export function addWfsLayer(olmap, wfsOptions) {
  const { layerName = '', url = '', layers, style, filter = [], visible = true, zIndex = 5 } = wfsOptions;
  const cql_filter = filter.length > 0 ? `&cql_filter=${filter.join(' and ')}` : '';
  const view = olmap.getView();
  const projection = view.getProjection().getCode();
  const wfsLayer = new VectorLayer({
    source: new VectorSource({
      projection: projection,
      format: new GeoJSON(),
      url: () => {
        return (
          `${url}/wfs?service=WFS&` +
          `version=1.1.0&request=GetFeature&typename=${layers}&` +
          `outputFormat=application/json&srsname=${projection}&` +
          `&outputFormat=application/json${cql_filter}`
        );
      },
    }),
    style,
    visible,
    zIndex: zIndex,
  });
  wfsLayer.set('layerName', `${layerName ? layerName : ''}`);
  olmap.addLayer(wfsLayer);
}

// 点击 WMS 瓦片图层，WMS 获取图像信息 (瓦片图层)
export function getWmsFeature(olmap, wfsOptions, getFeatureCallbackFn) {
  const { layerName = '', layers = '' } = wfsOptions;
  const wmsLayer = getLayerByName(olmap, layerName);
  // 地图点击事件
  olmap.on('singleclick', async (event) => {
    const view = event.map.getView();
    const viewResolution = view.getResolution();
    if (wmsLayer && wmsLayer.getVisible()) {
      const url = wmsLayer.getSource().getFeatureInfoUrl(event.coordinate, viewResolution, view.getProjection(), {
        INFO_FORMAT: 'application/json',
        FEATURE_COUNT: 5,
        query_layers: layers,
        ...wfsOptions.params,
      });
      if (url) {
        fetch(url)
          .then((response) => response.json())
          .then((data) => {
            if (data.features.length > 0) {
              getFeatureCallbackFn ? getFeatureCallbackFn(data.features) : null;
            }
          });
      }
    }
  });

  olmap.on('pointermove', function (evt) {
    if (evt.dragging) {
      return;
    }
    const data = wmsLayer.getData(evt.pixel);
    const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
    evt.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });
}

// 更新WFS过滤  olmap, wfsOptions,
export function updateWfsFilter(olmap, wfsOptions) {
  const { layerName = '', filter = [] } = wfsOptions;
  const wfsLayer = getLayerByName(olmap, layerName);
  const urls = wfsLayer.getSource().getUrl().split('?');
  // 创建 URLSearchParams 对象
  const searchParams = new URLSearchParams(urls[1]);
  // 获取所有参数的键值对 { name: 'john', age: '30' }
  const urlParams = Object.fromEntries(searchParams.entries());
  if (filter.length > 0) {
    urlParams['cql_filter'] = filter.join(' and ');
  } else {
    delete urlParams.cql_filter;
  }
  const nParms = [];
  for (const key in urlParams) {
    if (Object.hasOwnProperty.call(urlParams, key)) {
      nParms.push(`${key}=${urlParams[key]}`);
    }
  }
  const nUrl = urls[0] + '?' + nParms.join('&');
  wfsLayer.getSource().setUrl(nUrl);
  wfsLayer.getSource().refresh();
}