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

柳晓黑胡椒

已于 2025-03-24 15:45:05 修改

阅读量543

点赞数 11

CC 4.0 BY-SA版权

分类专栏： # cesium实践(原生) 文章标签： geoserver ogc cesium

于 2025-03-17 20:52:55 首次发布

柳晓黑胡椒

本文链接：https://blog.youkuaiyun.com/hr_beginner/article/details/146325346

cesium实践(原生) 专栏收录该内容

12 篇文章

订阅专栏

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

需求背景
解决效果
getFeatureInfo

需求背景

在用 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('点击时间')
}