CESIUM例子学习（七）

#CESIUM例子学习（七）| 来源: 网络整理| 查看: 265

这是一个非常有用的例子。主要讲的是在3dtiles倾斜摄影上的绘制与单体化实现。

一、在倾斜摄影上绘制线（失败！）原因找到了，版本问题

该例子的第一个是以三种模式绘制线，即帖地模式、帖3dtiles模式和两同时绘制模式。

1、例子原码： var polyline = viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ -75.60217330403601, 40.04102882709425, -75.59968252414251, 40.04093615560871, -75.598020153828, 40.04079437042357, -75.59674934074435, 40.040816173283304, -75.59630042791713, 40.03986900370842, -75.59563636849978, 40.03930996506271, -75.59492397899098, 40.03873932846581, -75.59457991226778, 40.038392701955786, -75.59424838652453, 40.03775403572295, -75.59387104290336, 40.03677022167725, -75.59355000490342, 40.03588760913535, ]), width: 8, material: new Cesium.PolylineOutlineMaterialProperty({ color: Cesium.Color.YELLOW, outlineWidth: 2, outlineColor: Cesium.Color.BLACK, }), clampToGround: true, }, });

代码中也没有什么特别的，主要是： clampToGround: true。然后就是在下拉菜单中配置了

polyline.polyline.classificationType = Cesium.ClassificationType.CESIUM_3D_TILE;

从而实现了在3dtiles表面绘制线的功能。实现的效果，如下图：

图中可以看到，地面与3dtiles上都绘制了线。

2、加载线的原码 function drawPolyline () { let linePoints = [ 110.09626992048491, 22.604435413684214, 110.09772947885747, 22.6044007535433, 110.10042821679957, 22.604406197660317, 110.10077969573116, 22.60444694171489, 110.10333075940922, 22.6045239767194, 110.104544609548, 22.604631795978776, 110.10523390730035, 22.60469426643001, 110.10780977717386, 22.605159958646965 ] var polyline = viewer.entities.add({ id: "polyline", polyline: { positions: Cesium.Cartesian3.fromDegreesArray(linePoints), width: 8, material: new Cesium.PolylineOutlineMaterialProperty({ color: Cesium.Color.YELLOW, outlineWidth: 2, outlineColor: Cesium.Color.BLACK, }), clampToGround: true, }, }); polyline.polyline.classificationType = Cesium.ClassificationType.BOTH; }

但是我的代码实现的结果却是无法在3dtiles上绘制线。如下图：

我已经放弃了，因为找了好想了很久都没找到原因，后面找到原因再来更新。

二、倾斜摄影单体化效果

四年前就接触过倾斜摄影模型，当时各种转换之后，加载到world wind的三维引擎中，没有实现LOD，效果非常不好，单机本地加载都卡，也没有实现单体化。其实现在的cesium，也没有去真正实现单体化，比如：把建筑物从周边环境中单体化出来，从达到的效果来看，cesium应该是可以实现的，但是没必要了。从可视化效果来说，看上去是单体化的就行了。实现代码如下：

function addPolygon () { let polygonHierarchy = new Cesium.PolygonHierarchy([ { x: -2024823.5909592435, y: 5532370.714988579, z: 2436302.25492001 }, { x: -2024826.5283445264, y: 5532369.096897423, z: 2436303.7183121936 }, { x: -2024819.1251608054, y: 5532363.621243293, z: 2436322.269562056 }, { x: -2024791.4827142982, y: 5532376.632168545, z: 2436315.3573567793 }, { x: -2024796.595963898, y: 5532380.507406193, z: 2436302.7104098746 }, { x: -2024816.0491223074, y: 5532372.296575263, z: 2436305.244446241 }, { x: -2024818.6768914957, y: 5532374.524629378, z: 2436299.36777942 }, { x: -2024827.1131517782, y: 5532369.755417354, z: 2436301.917306005 }]) var polygon = viewer.entities.add({ id: "polygon", polygon: { hierarchy: polygonHierarchy, material: Cesium.Color.RED.withAlpha(0.9), classificationType: Cesium.ClassificationType.CESIUM_3D_TILE, }, }); }

看上去没什么特别的。只一句： classificationType: Cesium.ClassificationType.CESIUM_3D_TILE就搞定。但是底层的应该是做了很多计算，也就是要从瓦片中找出在绘制多边形内的构成模型的三角面或者点。效果如下图：

三、倾斜摄影单体化效果纹理

跟上面加载多边形代码一样，只是把material值改成纹理的url即可。即：material = "../images/Cesium_Logo_Color.jpg"。效果如下图：

【本文地址】

公司简介

联系我们