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._tilesToRenderconst level = pickedTile[0].data.imagery[0].readyImagery.levelconst offset = 265 - 15 * levelconst 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.featuresreturn item.data.features.length})return dataconsole.timeEnd('点击时间')
}