对于大规模城市场景，在cesium端流行的方法是使用工具将GIS数据shp建筑白模或geojson白模直接转换成3dtiles格式。然后使用着色器代码对白模贴图，常见的就是渐变色贴图效果。

但是这种贴图效果…唉，说实话吧，就是看着别扭！根本不能很好的表达真实建筑纹理。而且这种网格mesh啊，它也不能很好表达建筑属性，比如屋顶属性。主要原因是shp直接转换3dtiles并没有屋顶结构。现在面临的问题啊， 客户要求1、没有无人机倾斜摄影数据， 百感交集。 直接基于白模贴图；2、能部分独立贴图，部分批量贴图，贴图要能反应建筑纹理；3、实现L3级别的mesh结构，包含屋顶结构；4、能导出3dtiles格式；5、能在3dtiles中拾取任意楼栋buffer被拉满了。我们来尝试解决吧…唉。

下图是上海市60w+建筑数据…看着就让人心疼啊，PUA。！

核心问题和解决方案

问题一：没有倾斜摄影数据？

这个问题嘛…其实也还好。我们可以用白模嘛！关键在于如何让这些白模看起来“像那么回事”。我们需要高质量的纹理贴图来覆盖这些模型。 最后强调一点。 当然了如果只是简单的渐变色...那简直是对艺术的侮辱。

问题二：部分独立贴图和批量贴图？

观感极佳。 这个就比较麻烦了。对于一些重要的地标性建筑或者客户特别要求的建筑物，我们可以采用独立的材质贴图进行精细化处理。而对于其他的大量建筑呢？那就只能批量处理了。关键是要找到一个平衡点，既要保证整体的美观度，又要控制工作量。

问题三：L3级别的Mesh结构？

换个角度。 L3级别意味着我们需要有更详细的模型结构，包括屋顶结构等等。这需要我们在建模阶段就考虑到这一点。简单的说就是增加模型的细节程度。

问题四：导出和地理对齐？

Cesium支持3dtiles格式的数据加载和渲染。地理对齐嘛…其实就是把模型放到正确的位置上，YYDS！。

问题五：单体化拾取？

这个功能非常重要！用户需要能够点击某个建筑物并获取相关信息或者进行操作。

技术实现

戳到痛处了。 .n; //模型简单提亮 = new 3DTileStyle * 1.1" }); //鼠标点击事件处理 const handler = new ; { const pickedObject = ; if && pickedObject&&pickedObject){ //点击了单体化围墙 alert) }else if { const content = ; const uri = || content.url || ; if { // 提取 b3dm 文件名 const b3dmName = .pop.split; // 防缓存参数 var modelinfo = await ).json; const worldPoint = ; = modelinfo; if ) { //1、获取模型点击的经纬度和高度。 var modellnglat = _ /* 2、查询点所在的轮廓。 !!!演示文件通过前端来查询点在轮廓内。!!!实际应用中需通过后端查询，避免GIS数据泄漏! 内置属性解释 https:///bfs/article/@ 如果一个建筑体包含多个gis轮廓数据。在Geobuilding软件内对建筑体的gis数据-打组。打组后这些gis数据有相同的属性值groupid 误差 if ){ var demheight=result ;;var clickheight=-demheight ;if){ hitgeo=result break;} } }if{ return;}//原始geojson 数据//alert)// 对hitgeo 并进行偏移转换 相对于模型 hitgeo=;// 将geojson转换成cesium世界坐标 添加单体化高亮围墙var wallpos=..map{return})if{};wall=new , duration:, materialType :} );=hitgeo ;}else{;}}}},_CLICK);});

性能优化

技巧来实现这一目标。

• Draco压缩
• 模型切片
• LOD控制

产品对比

现在我们成功实现了L3级别的数字城市效果！！并且支持单体化操作……可以应用于城市精细化治理啦！。虽然过程很艰辛……但是后来啊还是值得的！希望这篇文章能帮到大家！阿门!