原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Classification%20Types.html&label=All

效果如下视频所示：

示例代码如下：

代码中有针对该属性的注释，翻译自官方api文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.scene.debugShowFramesPerSecond = true;

try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866);
  viewer.scene.primitives.add(tileset);

  const boundingSphere = tileset.boundingSphere;
  viewer.camera.viewBoundingSphere(
    boundingSphere,
    new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius + 500.0),
  );
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
} catch (error) {
  console.log(`tileset加载出错: ${error}`);
}

//红色半透明的多边形(若未设置高度，则会贴合地面，若设置高度为0，则会禁用贴合功能)
const polygon = viewer.entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromRadiansArray([
        -1.3194369277314022, 0.6988062530900625, -1.3193955980204217,
        0.6988091578771254, -1.3193931220959367, 0.698743632490865,
        -1.3194358224045408, 0.6987471965556998,
      ]),
    ),
    material: Cesium.Color.RED.withAlpha(0.5),
    classificationType: Cesium.ClassificationType.BOTH,
  },
});

//黄色黑色轮廓的折线
const 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,
  },
});

/**
 * classificationType属性：
 * 获取或设置 ClassificationType 属性，指定此多边形在地面上时是对地形和/或 3D 瓦片进行分类。
 * - TERRAIN: 将仅对 terrain 进行分类。
 * - CESIUM_3D_TILE: 只有 3D 瓦片将被分类。
 * - BOTH: 地形和 3D 瓦片都将被分类。
 */
const classificationOptions = [
  {
    text: "地形和 3D 瓦片都将被分类",
    onselect: function () {
      polygon.polygon.classificationType = Cesium.ClassificationType.BOTH;
      polyline.polyline.classificationType = Cesium.ClassificationType.BOTH;
    },
  },
  {
    text: "仅对地形分类",
    onselect: function () {
      polygon.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
      polyline.polyline.classificationType = Cesium.ClassificationType.TERRAIN;
    },
  },
  {
    text: "仅对3D瓦片分类",
    onselect: function () {
      polygon.polygon.classificationType =
        Cesium.ClassificationType.CESIUM_3D_TILE;
      polyline.polyline.classificationType =
        Cesium.ClassificationType.CESIUM_3D_TILE;
    },
  },
];

const materialOptions = [
  {
    text: "红色材质",
    onselect: function () {
      polygon.polygon.material = Cesium.Color.RED.withAlpha(0.5);
    },
  },
  {
    text: "纹理材质",
    onselect: function () {
      if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
        window.alert(
          "该平台不支持地形实体材质",
        );
      }
      polygon.polygon.material = "../images/Cesium_Logo_Color.jpg";
    },
  },
];

Sandcastle.addToolbarMenu(classificationOptions);
Sandcastle.addToolbarMenu(materialOptions);