CESIUM例子学习（七）——Classification Types

这是一个非常有用的例子。主要讲的是在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"。效果如下图：