1、内部属性单体

官网案例：https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html
image.png

  1. // A demo of interactive 3D Tiles styling
  2. // Styling language Documentation: https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
  3. // Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
  4. var viewer = new Cesium.Viewer("cesiumContainer", {
  5.   terrainProvider: Cesium.createWorldTerrain(),
  6. });
  8. viewer.scene.globe.depthTestAgainstTerrain = true;
  10. // Set the initial camera view to look at Manhattan
  11. var initialPosition = Cesium.Cartesian3.fromDegrees(
  12.   -74.01881302800248,
  13.   40.69114333714821,
  14.   753
  15. );
  16. var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
  17.   21.27879878293835,
  18.   -21.34390550872461,
  19.   0.0716951918898415
  20. );
  21. viewer.scene.camera.setView({
  22.   destination: initialPosition,
  23.   orientation: initialOrientation,
  24.   endTransform: Cesium.Matrix4.IDENTITY,
  25. });
  27. // Load the NYC buildings tileset.
  28. var tileset = new Cesium.Cesium3DTileset({
  29.   url: Cesium.IonResource.fromAssetId(75343),
  30. });
  31. viewer.scene.primitives.add(tileset);
  33. // Color buildings based on their height.
  34. function colorByHeight() {
  35.   tileset.style = new Cesium.Cesium3DTileStyle({
  36.     color: {
  37.       conditions: [
  38.         ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
  39.         ["${Height} >= 200", "rgb(102, 71, 151)"],
  40.         ["${Height} >= 100", "rgb(170, 162, 204)"],
  41.         ["${Height} >= 50", "rgb(224, 226, 238)"],
  42.         ["${Height} >= 25", "rgb(252, 230, 200)"],
  43.         ["${Height} >= 10", "rgb(248, 176, 87)"],
  44.         ["${Height} >= 5", "rgb(198, 106, 11)"],
  45.         ["true", "rgb(127, 59, 8)"],
  46.       ],
  47.     },
  48.   });
  49. }
  51. // Color buildings by their latitude coordinate.
  52. function colorByLatitude() {
  53.   tileset.style = new Cesium.Cesium3DTileStyle({
  54.     defines: {
  55.       latitudeRadians: "radians(${Latitude})",
  56.     },
  57.     color: {
  58.       conditions: [
  59.         ["${latitudeRadians} >= 0.7125", "color('purple')"],
  60.         ["${latitudeRadians} >= 0.712", "color('red')"],
  61.         ["${latitudeRadians} >= 0.7115", "color('orange')"],
  62.         ["${latitudeRadians} >= 0.711", "color('yellow')"],
  63.         ["${latitudeRadians} >= 0.7105", "color('lime')"],
  64.         ["${latitudeRadians} >= 0.710", "color('cyan')"],
  65.         ["true", "color('blue')"],
  66.       ],
  67.     },
  68.   });
  69. }
  71. // Color buildings by distance from a landmark.
  72. function colorByDistance() {
  73.   tileset.style = new Cesium.Cesium3DTileStyle({
  74.     defines: {
  75.       distance:
  76.         "distance(vec2(radians(${Longitude}), radians(${Latitude})), vec2(-1.291777521, 0.7105706624))",
  77.     },
  78.     color: {
  79.       conditions: [
  80.         ["${distance} > 0.0012", "color('gray')"],
  81.         [
  82.           "${distance} > 0.0008",
  83.           "mix(color('yellow'), color('red'), (${distance} - 0.008) / 0.0004)",
  84.         ],
  85.         [
  86.           "${distance} > 0.0004",
  87.           "mix(color('green'), color('yellow'), (${distance} - 0.0004) / 0.0004)",
  88.         ],
  89.         ["${distance} < 0.00001", "color('white')"],
  90.         [
  91.           "true",
  92.           "mix(color('blue'), color('green'), ${distance} / 0.0004)",
  93.         ],
  94.       ],
  95.     },
  96.   });
  97. }

2、矢量面叠加单体化：通过classificationType属性来进行单体化

  1. 首先添加3dtiles模型
  2. 绘制矢量面，其中矢量面的坐标可手动绘制，保存；
  3. 矢量面叠加到3dtiles模型上
  4. 添加一个移动的面及样式，绑定移动事件，移动时获取当前选中的面的坐标，设定移动面的坐标为当前选中的面

    3、primitives添加模型，通过classificationType属性来进行单体化

官网案例：https://sandcastle.cesium.com/?src=Classification.html&label=All
image.png

  1. 先添加primitive模型

    1. var treeHighlight3 = scene.primitives.add(new Cesium.ClassificationPrimitive({
    2.  geometryInstances : new Cesium.GeometryInstance({
    3.      geometry : new Cesium.EllipsoidGeometry({
    4.          radii : new Cesium.Cartesian3(2.45, 2.45, 3.0)
    5.      }),
    6.      modelMatrix : modelMatrix,
    7.      attributes : {
    8.          color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#004FFF').withAlpha(0.5)),
    9.          show : new Cesium.ShowGeometryInstanceAttribute(true)
    10.      },
    11.      id : 'volume 3'
    12.  }),
    13.  classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    14. }));

  2. 加入鼠标移入事件设定样式

    1. var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    2. handler.setInputAction(function(movement) {
    3.  var pickedObject = scene.pick(movement.endPosition);
    4.  if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
    5.      if (pickedObject.id === currentObjectId) {
    6.          return;
    7.      }
    9.      if (Cesium.defined(currentObjectId)) {
    10.          attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
    11.          attributes.color = currentColor;
    12.          attributes.show = currentShow;
    13.          currentObjectId = undefined;
    14.          currentPrimitive = undefined;
    15.          currentColor = undefined;
    16.          currentShow = undefined;
    17.      }
    18.  }
    20.  if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.primitive) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.primitive.getGeometryInstanceAttributes)) {
    21.      currentObjectId = pickedObject.id;
    22.      currentPrimitive = pickedObject.primitive;
    23.      attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
    24.      currentColor = attributes.color;
    25.      currentShow = attributes.show;
    26.      if (!scene.invertClassification) {
    27.          attributes.color = [255, 0, 255, 128];
    28.      }
    29.      attributes.show = [1];
    30.  } else if (Cesium.defined(currentObjectId)) {
    31.      attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
    32.      attributes.color = currentColor;
    33.      attributes.show = currentShow;
    34.      currentObjectId = undefined;
    35.      currentPrimitive = undefined;
    36.      currentColor = undefined;
    37.  }
    38. }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    image.png
    image.png