当前位置: 首页 > article >正文

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

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

  • 需求背景
  • 解决效果
  • 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('点击时间')
}

http://www.kler.cn/a/589570.html

相关文章:

  • 网络性能指标
  • 五金打磨车间降温设备都哪些?
  • 在 TypeScript 中,两个看似相同的字符串用 `==` 比较返回 `false`
  • 【Agent】OpenManus-Prompt组件详细分析
  • C3P0数据库连接池技术详解及实战
  • 【网站检测工具Web-Check】Web-Check本地部署与远程访问解决方案全面掌控网站状态
  • CentOS 7 更换 YUM 源为国内
  • Android视频渲染SurfaceView强制全屏与原始比例切换
  • 【Go】go语言指针
  • 计算机网络:(二)计算机网络在我国发展与网络类别与性能 (附带图谱更好对比理解)
  • python | 输入日期,判断这一天是这一年的第几天
  • 基于CPLD电力/轨道交通3U机箱开关量输出板(DO)
  • KV 缓存简介
  • 最长最短单词(信息学奥赛一本通-1143)
  • 京东Taro小程序原生端接入操作
  • 第四十八篇——数学和其它学科:为什么数学是更底层的工具?
  • provide/inject源码实现
  • 光猫 和 全光 WiFi
  • conda、poetry,pip相关
  • vue3 + css 列表无限循环滚动+鼠标移入停止滚动+移出继续滚动