geoServerWFS 服务实现空间查询 - 使用 ES6 Promise.all 处理异步请求

前言

日常积累，欢迎指正

Promise.all的使用场景

某方法需要在多个异步操作完成后执行就可以使用Promise.all来优雅的解决，对应的还有一个Promise.race,关于它的使用和使用场景暂不讨论

实例

我的实例场景

在实现 GIS 功能中的空间查询时，我的查询对象是两个服务，并且对这两个服务的查询操作都是异步的。任意一个服务查询结果存在就代表我的空间查询操作是成功的，查询操作成功后我需要使用 InfoWindow 来展示我刚才查询到的结果。这就意味着我需要等待两个异步全部完成后才能做后续操作。

我的代码实例

this.调用的变量理解成全局变量即可

// 
this.map.on('click', (evt) => {
  this.evt = evt
  const circle = new Circle(evt.mapPoint)
  this.queryExtent = circle.getExtent()
  if (this.isQuery) {
    this.queryservices(layerTreeData, this.queryExtent) // 方法调用
  }
})


queryservices = (data, queryExtent) => {
  if (data && data.length > 0) {
    const qureyLayers = data.filter(item => item.isQuery) // 获取所有可查询数据源

    const functions: any = []
    for (const queryLayer of qureyLayers) {
      const f: any = this.queryservice(queryLayer.owsurl, queryLayer.layers, queryExtent)
      functions.push(f)
    }
    Promise.all(functions).then((res) => {
      const features: any = res.filter(item => item)
      if (features.length > 0) {
        const arcgisJson = geojsonToArcGIS({
          'type': features[0].geometry.type,
          'coordinates': features[0].geometry.coordinates
        })
        this.createResult(arcgisJson, features[0].properties, this.evt)
      }
    })

  }
}

queryservice = (owcUrl, typeName, queryExtent) => {
  const params = {
    'service': 'WFS',
    'version': '1.0.0',
    'request': 'GetFeature',
    'typeName': `${typeName}`,
    'maxFeatures': 50,
    'outputFormat': 'application/json',
    'CQL_FILTER': `BBOX(the_geom, ${queryExtent.xmin}, ${queryExtent.ymin}, ${queryExtent.xmax}, ${queryExtent.ymax})`
  }
  return new Promise((resolve, reject) => {
    $.ajax({
      url: `${arcgisProxy}?${owcUrl}`,
      type: 'post',
      data: params,
      cache: false,
      dataType: 'json',
      success: (data) => {
        resolve(...data.features)
      },
      error: (err) => {
        reject(err)
      }
    })
  })
}

createResult = (arcgisJson, attr, evt) => {
  esriLoader.loadModules(['esri/InfoTemplate', 'esri/graphic', 'esri/geometry/Polyline',
    'esri/symbols/CartographicLineSymbol',
    'esri/Color',
  ]).then(([InfoTemplate, Graphic, Polyline,
    CartographicLineSymbol,
    Color

  ]) => {
    const line = new CartographicLineSymbol(
      CartographicLineSymbol.STYLE_SOLID,
      new Color([255, 0, 0]), 2,
      CartographicLineSymbol.CAP_ROUND,
      CartographicLineSymbol.JOIN_MITER, 2
    )
    const argisGeometry = new Polyline(arcgisJson)
    const infoTemplate = new InfoTemplate('管道属性',
      `

				

					
管道名称
${attr.Name} 
					
管道编码
${attr.code} 
				
			
`)
    this.map.graphics.clear()
    const graphic = new Graphic(argisGeometry, line)
    this.map.graphics.add(graphic)
    this.map.infoWindow.setContent(infoTemplate.content)
    this.map.infoWindow.setTitle(infoTemplate.title)
    this.map.infoWindow.show(evt.screenPoint, this.map.getInfoWindowAnchor(evt.screenPoint))
  })
}

// queryservices()方法的第一个参数数据结构类似于：
layerTreeData = [
  {
    title: 'xxx',
    pkey: 'xx',
    key: 'xx',
    id: 'xx',
    checked: true,
    isBaseMap: false,
    type: 'WMS',
    url: 'xx',
    subLayerid: '',
    subgeotype: '',
    layers: [],
    imageFormat: 'png',
    isQuery: false
  },
  {
    title: '主管线',
    pkey: '1',
    key: '2',
    id: 'WMS-zhu',
    checked: true,
    isBaseMap: false,
    type: 'WMS',
    url: 'http://xxx.xxx.xxx.xxx:xxxx/geoserver/xx/wms',
    owsurl: 'http://xxx.xxx.xxx.xxx:xxxx/geoserver/xx/ows',
    subLayerid: '',
    subgeotype: '',
    layers: ['xxx:xxx'],
    imageFormat: 'png',
    isQuery: true
  },
  {
    title: 'xxx',
    pkey: '1',
    key: '3',
    id: 'WMS-xxx',
    checked: true,
    isBaseMap: false,
    type: 'WMS',
    url: 'http://xxx.xxx.xxx.xxx:xxxx/geoserver/xx/wms',
    owsurl: 'http://xxx.xxx.xxx.xxx:xxxx/geoserver/xx/ows',
    subLayerid: '',
    subgeotype: '',
    layers: ['xxx:xxx'],
    imageFormat: 'png',
    isQuery: true
  },
  {
    title: 'xxxx',
    pkey: '1',
    key: '4',
    id: 'WMS-xxxx',
    checked: true,
    isBaseMap: false,
    type: 'WMS',
    url: 'http://xxx.xxx.xxx.xxx:xxxx/geoserver/xx/wms',
    subLayerid: '',
    subgeotype: '',
    layers: ['xxxx:xxxx'],
    imageFormat: 'png',
    isQuery: false
  }
]