XbsjEarthUI性能优化：大规模POI加载与渲染优化技巧-开发者社区

XbsjEarthUI性能优化：大规模POI加载与渲染优化技巧

【免费下载链接】XbsjEarthUIXbsjEarthUI是基于Cesium和EarthSDK的三维GIS/BIM的UI模板，可以基于此定制自己的三维App项目地址: https://gitcode.com/gh_mirrors/xb/XbsjEarthUI

XbsjEarthUI是基于Cesium和EarthSDK的三维GIS/BIM UI模板，在处理海量POI（兴趣点）时，加载效率和渲染性能往往成为项目瓶颈。本文将分享5个实用优化技巧，帮助开发者在保持视觉效果的同时，实现数万级POI的流畅加载与交互。

一、Canvas批处理渲染：告别单个POI绘制瓶颈

传统的DOM元素渲染方式在POI数量超过1000时会出现明显卡顿，而Canvas批处理技术能将所有POI绘制到单个画布上，大幅减少渲染开销。XbsjEarthUI提供了CzmCanvasPoi组件，通过自定义绘制逻辑实现高效渲染：

// 创建POI上下文 const pc = new CzmPoisContext(earth.czm.viewer); // 批量创建1024个POI for (let i = 0; i < 1024; ++i) { const p = new CzmCanvasPoi(MyCanvasPointPoi, pc); p.winPosFromCartesian.cartesian = Cesium.Cartesian3.fromDegrees( 108.9567474 + Math.random() * i / 10000, 34.2182464 + Math.random() * i / 20000, 524.57 + Math.random() * i ); }

关键优化点在于自定义POI类中重写draw和drawForPick方法，避免重复创建Canvas上下文。项目示例可参考Apps/Examples/earth-massivePois.html中的MyCanvasPointPoi实现。

二、视域剔除：只渲染可见范围内的POI

通过设置POI的可视距离范围（near和far属性），可以自动过滤掉相机视域外或距离过远的POI。这种空间裁剪技术能将渲染压力降低60%以上：

// 设置POI可见范围为0-10000米 p.near = 0; p.far = 10000;

配合地球的LOD（细节层次）系统，当用户缩放地图时，远距离POI会自动隐藏，近距离POI则显示完整信息。这种动态调整机制在Static/XbsjEarth-Plugins2/customPrimitive/customPrimitive.js中通过WebGL着色器实现底层优化。

三、数据分块加载：避免一次性加载压力

面对10万+级POI数据，采用分块加载策略是必要的。XbsjEarthUI推荐按地理区域或层级进行数据分割，通过XE.HTML.loadJS动态加载：

// 分区域加载POI数据 const loadPoiChunk = (region) => XE.HTML.loadJS(`../../assets/poi/chunks/${region}.js`); // 监听相机移动事件，动态加载视口区域数据 earth.camera.moveEndEvent.disposableOn(() => { const visibleRegions = getVisibleRegions(earth.camera); visibleRegions.forEach(loadPoiChunk); });

项目中大雁塔3D模型的分块加载实现可参考Apps/assets/dayanta/tileset.json的组织结构，这种方式同样适用于POI数据。

四、样式简化：降低绘制复杂度

复杂的POI样式（如阴影、渐变、多文本）会显著增加GPU负担。优化建议包括：

使用简单几何形状替代图片图标
减少文本标签数量，远距离隐藏文字
合并相似样式的POI为批次绘制

// 简化绘制逻辑，移除阴影和描边 function drawPoint(ctx, mbx, mby, w, fillStyle) { ctx.beginPath(); ctx.arc(mbx, mby, w, 0, Math.PI * 2); ctx.fillStyle = fillStyle; ctx.fill(); // 仅保留填充，去除stroke和shadow }

对比优化前后的性能数据，简化样式可使帧率提升30%以上，尤其在低配设备上效果明显。

五、交互优化：延迟响应与事件节流

POI的鼠标交互（悬停、点击）在数量庞大时会导致事件响应延迟。通过以下方式优化：

使用事件委托替代单个POI事件绑定
对高频事件（如鼠标移动）进行节流处理
仅在POI密度较低时启用悬停效果

// 使用DivBoxPicker实现批量选择 const divBoxPicker = new DivBoxPicker(earth.czm.viewer.canvas.parentElement); divBoxPicker.pickRectEvent.disposableOn(pickRect => { pois.forEach(poi => { const [left, top] = poi.canvasPoi.winPos; poi.canvasPoi.actived = BoxPicker.contains(left, top, pickRect); }); });

这种批量交互方式在Apps/Examples/earth-massivePois.html中已实现，可支持框选1000+POI的高效操作。