cesium 实现万级管网数据渲染，及pickImageryLayerFeatures原生方法改写

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、CSDN优质创作者
💟 作 者：柳晓黑胡椒❣️
📝 专 栏：vue实践
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

需求背景

在用 geoserver 渲染图层时，会自动触发 GetFeatureInfo ，与服务器通信，在万级海量数据渲染下，这个性能消耗就可以感受到了
需要考虑的点：
1.通过enablePickFeatures，关闭cesium自身调用geoserver服务 (开始的10多秒 -> 毫秒级别 )
2.需要对照cesium源码，模拟pickImageryLayerFeatures拾取wms服务图层模拟，实现pickFeatures 条用服务方法

解决效果

getFeatureInfo

const getFeatureInfo = async (movement) => {
  console.time('点击时间')
  const screenPosition = movement.position;
  const ray = viewer.camera.getPickRay(screenPosition);
  const terrainIntersection = viewer.scene.globe.pick(ray, viewer.scene);
  const cartographic = Cesium.Cartographic.fromCartesian(terrainIntersection);
  const longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度
  const latitude = Cesium.Math.toDegrees(cartographic.latitude);  // 纬度
  const pickedTile = viewer.scene.globe._surface._tilesToRender
  const level = pickedTile[0].data.imagery[0].readyImagery.level
  const offset = 265 - 15 * level
  const deltaLat = offset / 111320;
  const deltaLon = offset / 111320;
  const maxx = Math.max.apply(null,[longitude - deltaLon,longitude + deltaLon])
  const minx = Math.min.apply(null,[longitude - deltaLon,longitude + deltaLon])
  const maxy = Math.max.apply(null,[ latitude - deltaLat,latitude + deltaLat])
  const miny = Math.min.apply(null,[ latitude - deltaLat,latitude + deltaLat])
  const bbox = [minx, miny, maxx, maxy].join()
  const allTypeNameArr = ['zhsw:basic_waterwork', "zhsw:basic_pipeline", "zhsw:basic_pump", "zhsw:basic_node", "zhsw:basic_valve", "zhsw:basic_reservoir"]
  const typeNameArr = viewer.imageryLayers._layers.map(item => item.imageryProvider.layers).reverse().filter(item => allTypeNameArr.includes(item))
  const promiseArr = typeNameArr.map(typeName => wfsGetFeaturei({
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    outputFormat: 'application/json',
    srs: 'EPSG:4326',
    maxFeatures: 5,
    typeName,
    x: 128,
    y: 128,
    width: 256,
    height: 256,
    bbox,
    viewparams:`planId:${globalStore.planObj.id};regionId:${globalStore.planObj.regionId}`,
  }))
  const dataArr = await Promise.all(promiseArr)
  let data = []
  dataArr.some(item => {
    data = item.data.features
    return item.data.features.length
  })
  return data
  console.timeEnd('点击时间')
}