cesium 加载wms服务以及WMS点击查询

就是添加地图服务，geoserice等地图服务。 

添加wms服务 

  addFilterWmslayer(url, layerName, filter) {
    var wms = new Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: layerName,
      parameters: {
        transparent: true, //透明配置
        service: 'WMS',
        format: 'image/png',
        srs: 'EPSG:4326',
        CQL_FILTER: filter //过滤条件
      }
    })
    let wmsLayer = this.viewer.imageryLayers.addImageryProvider(wms)
    return wmsLayer
  },

在加载WMS服务时，WebMapServiceImageryProvider 的主要属性如下：

1. url: WMS服务的基础URL，通常以http://或https://开头。

2. layers: 指定要加载的图层名称，可以是一个或多个图层，多个图层用逗号分隔。

3. parameters: 可选参数，允许你指定WMS请求的附加参数，例如：

   • transparent: 是否允许透明背景，设置为true表示支持透明。
   • format: 请求的图像格式，常见的有image/png和image/jpeg。

4. rectangle: 定义地图的范围，通常使用Cesium.Rectangle对象，指定图层可视区域。

5. minimumTerrainLevel 和 maximumTerrainLevel: 指定地形的最小和最大级别，控制渲染时的细节级别。

6. maximumSimultaneousRequests: 允许的最大并发请求数，控制性能。

CQL_FILTER 是用于 WMS 请求中的一种过滤机制，它使用 CQL（Common Query Language）语法来指定要返回的地理要素的条件。您可以通过设置这个参数来限制 WMS 响应中包含的要素，从而只获取满足特定条件的数据。 

点击查询wms 

 

  /**
   * 点击查询wms
   */
  queryMwsLayer() {
    var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
    handler.setInputAction(async function (event) {
      this.viewer.selectedEntity = undefined
      var pickRay = this.viewer.camera.getPickRay(event.position)
      var featuresPromise = await this.viewer.imageryLayers.pickImageryLayerFeatures(pickRay, this.viewer.scene)
      console.log('featuresPromise:', featuresPromise[0].data)

      // state.feature.position = featuresPromise[0].position
      // state.feature.name = featuresPromise[0].name
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  },

2

const findYtgqLAYER = (lngLat, typeName, comispay) => {
  var urlString = window.geoserverParam.geoserverWfsUrl
  var param = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName,
    outputFormat: 'application/json',
    maxFeatures: 3200,
    srsName: 'EPSG:4326',
    CQL_FILTER: 'INTERSECTS(geom,POINT(' + lngLat[0] + ' ' + lngLat[1] + '))'
  }

  let paramStr = ''
  for (let key in param) {
    paramStr = paramStr + key + '=' + param[key] + '&'
  }
  paramStr = paramStr.substr(0, paramStr.length - 1)
  axios({
    methods: 'GET',
    url: urlString + '?' + paramStr,
    // get请求用params携带请求信息(这里无请求信息，所以是个空对象)
    params: {}
  })
    .then((res) => {
      if (res.data.features) {
        console.log('JFJFJFJFJFJ:', res.data)
        console.log('ispay111111:', res.data.features[0].properties)
        addDKPop(lngLat, res.data.features[0].properties.layer) //弹窗
      } else {
      }
    })
    .catch((error) => {
     
      console.log('请求失败，失败信息' + error)
    })
}

findYtgqLAYER在点击事件里面执行

 var mouseClickHandle = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
  // 对鼠标按下事件的监听
  mouseClickHandle.setInputAction(function (event) {
    //获取加载地形后对应的经纬度和高程：地标坐标
    var ray = viewer.camera.getPickRay(event.position)
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene)
    if (Cesium.defined(cartesian)) {
      // 转换为经纬度
      const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
      const longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
      const latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
      const height = viewer.scene.globe.getHeight(cartographic)
      findYtgqLAYER([longitudeString, latitudeString], jfztLayer)
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)