Cesium中加载WMS、WMTS、WFS三类服务，并进行点击查询

近期工作中需要使用Cesium加载各类服务，并进行点击查询。故针对不同的服务对加载方法和点击查询方法进行了整理。

一、加载方法
1.1加载WMS

export function wmsService(url,layer){
   
    let wms=new Cesium.WebMapServiceImageryProvider({
   
        url : url,//如'http://106.12.xxx/geoserver/xxx/wms'
        layers : layer,//'数据源:图层名'
        parameters: {
   
          service : 'WMS',
          format: 'image/png',//返回格式为png格式
          transparent: true,
        }
      })
      return wms;
}
//调用
let wmsservice = _this.viewer.imageryLayers.addImageryProvider(wmsService(url, layer))

1.2加载WMTS

export function wmtsService(url,layer){
   
  let wmts=new Cesium.WebMapTileServiceImageryProvider({
   
    url : url,//如'http://106.12.253.xxx/geoserver/xxx/service/wmts'
    layer : layer,//'数据源:图层名'
    style : '',
    format : 'image/png',
    tileMatrixSetID :'EPSG:4326',//坐标系
    tileMatrixLabels :['EPSG:4326:0','EPSG:4326:1','EPSG:4326:2',
                      'EPSG:4326:3','EPSG:4326:4','EPSG:4326:5',
                      'EPSG:4326:6','EPSG:4326:7','EPSG:4326:8','EPSG:4326:9',
                      'EPSG:4326:10','EPSG:4326:11','EPSG:4326:12','EPSG:4326:13',
                      'EPSG:4326:14','EPSG:4326:15','EPSG:4326:16','EPSG:4326:17',
                      'EPSG:4326:18','EPSG:4326:19','EPSG:4326:20','EPSG:4326:21',],//查看geoserver，看切了几层
    maximumLevel: 19,//设置最高显示层级
    tilingScheme:new Cesium.GeographicTilingScheme(),//必要
  });
    return wmts;
}
//调用
let wmtsservice= _this.viewer.imageryLayers.addImageryProvider(wmtsService(url, layer))

1.3加载WFS

export function wfsService(url,layer){
   
  return axios({
   
    methods: "GET",
    url: url,//如'http://106.12.253.xxx/geoserver/xxx/service/ows'
    params: {
   
      service: "WFS",
      version: "1.0.0",
      request: "GetFeature",
      typeName: layer, //'数据源:图层名'
      outputFormat: "application/json",
    },
  })
}
//调用
let wfsservice = wfsService(url, layer)
              wfsservice.then((res) => {
   
                let datasource=Cesium.GeoJsonDataSource.load(res.data,{
   
                  stroke: Cesium.Color.RED,   // 边框颜色
                  strokeWidth: 3, // 边框宽度
                  markerColor:Cesium.Color.RED,
                });
                _this.viewer.dataSources.add(datasource)

二、点击查询
2.1 WMS点击查询

//点击WMS查询
    clickWMSLayers () {
   
      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas)
      let _this = this
      this.handler.setInputAction(async function (click) {
   
        _this.viewer.selectedEntity = undefined
        var pickRay = _this.viewer.camera.getPickRay(click.position)
        var featuresPromise = await _this.viewer.imageryLayers.pickImageryLayerFeatures(pickRay,

Cesium中加载WMS、WMTS、WFS三类服务，并进行点击查询

悦读