VUE3-Cesium（3dtiles加载与设置）

目录

1. 3dtiles

1.1 3dtiles介绍

1.2 3dtiles加载

1.3 加载tieleset数据案例

1.4 3dtiles性能监控

2. 3dtiles样式设置

2.1 3dtiles样式详解及案例

---

1. 3dtiles

1.1 3dtiles介绍

3D 切片设计用于流式传输和渲染大量 3D 地理空间内容，如摄影测量、3D 建筑、BIM/CAD、实例化要素和点云。它定义了一个分层数据结构和一组提供可呈现内容的磁贴格式。3D磁贴不定义内容可视化的明确规则;客户端可以按照自己认为合适的方式可视化 3D 磁贴数据。

在 3D 切片中，切片集是按空间数据结构（树）组织的一组切片。切片集由至少一个包含切片集元数据和切片对象树的切片集 JSON 文件描述，每个切片集都可以引用以下格式之一的可呈现内容：

格式	使用
批量 3D 模型 （b3dm）	异构 3D 模型。例如，纹理地形和表面，3D建筑外部和内部，大型模型。
实例化 3D 模型 （i3dm）	3D 模型实例。例如树木、风车、螺栓。
点云	大量的点。
复合材料（百万分点）	将不同格式的磁贴连接成一个磁贴。

切片的内容（切片格式的单个实例）是一个二进制 blob，具有特定于格式的组件，包括功能表和批处理表。

内容引用一组要素，例如表示建筑物或树木的 3D 模型，或点云中的点。每个要素的位置和外观属性都存储在磁贴的要素表中，其他特定于应用程序的属性存储在批处理表中。客户端可以选择在运行时选择要素并检索其属性以进行可视化或分析。

批处理 3D 模型和实例化 3D 模型格式基于 glTF 构建，glTF 是一种专为高效传输 3D 内容而设计的开放规范。这些格式的切片内容在二进制正文中嵌入了包含模型几何图形和纹理信息的 glTF 资源。点云格式不嵌入 glTF。

切片在一个树中组织，该树融合了分层细节层次 （HLOD） 的概念，以实现空间数据的最佳呈现。每个切片都有一个边界体积，一个定义空间范围的对象完全包围其内容。树具有空间连贯性;子磁贴的内容完全位于父磁贴的边界卷内。

 切片集可以使用类似于栅格和矢量切片方案（如 Web 地图切片服务 （WMTS） 或 XYZ 方案）的 2D 空间切片方案，后者在多个细节级别（或缩放级别）提供预定义切片。但是，由于切片集的内容通常是不均匀的，或者可能不容易仅在两个维度上进行组织，因此树可以是具有空间一致性的任何空间数据结构，包括 k-d 树、四边树、八叉树和格网。

（可选）可以将 3D 切片样式或样式应用于切片集。样式定义要计算的表达式，这些表达式修改每个要素的显示方式。

1.2 3dtiles加载

使用new Cesium.Cesium3DTileset(options)进行3DTiles数据加载

3D 切片集，用于流式传输大型异构 3D 地理空间数据集。3D 切片集，用于流式传输大型异构 3D 地理空间数据集。

Name	Type	Description
options	Object	Object with the following properties: Name Type Default Description url Resource | String | Promise. | Promise. The url to a tileset JSON file. 切片集 JSON 文件的 url。 show Boolean true optionalDetermines if the tileset will be shown.确定是否显示切片集。 modelMatrix Matrix4 Matrix4.IDENTITY optionalA 4x4 transformation matrix that transforms the tileset's root tile. 一个 4x4 转换矩阵，用于转换切片集的根切片。 shadows ShadowMode ShadowMode.ENABLED optionalDetermines whether the tileset casts or receives shadows from light sources.确定拼贴集是投射还是接收来自光源的阴影。 maximumScreenSpaceError Number 16 optionalThe maximum screen space error used to drive level of detail refinement.用于推动细节层次细化的最大屏幕空间误差。 maximumMemoryUsage Number 512 optionalThe maximum amount of memory in MB that can be used by the tileset.切片集可以使用的最大内存量（以 MB 为单位）。 cullWithChildrenBounds Boolean true optionalOptimization option. Whether to cull tiles using the union of their children bounding volumes.优化选项。是否使用子级边界卷的并集来剔除切片。 cullRequestsWhileMoving Boolean true optionalOptimization option. Don't request tiles that will likely be unused when they come back because of the camera's movement. This optimization only applies to stationary tilesets.优化选项。请勿请求由于摄像机移动而返回时可能未使用的磁贴。此优化仅适用于固定切片集。 cullRequestsWhileMovingMultiplier Number 60.0 optionalOptimization option. Multiplier used in culling requests while moving. Larger is more aggressive culling, smaller less aggressive culling.优化选项。用于在移动时剔除请求的乘数。越大越积极，越小越激进的剔除。 preloadWhenHidden Boolean false optionalPreload tiles when is . Loads tiles as if the tileset is visible but does not render them.tileset.showfalse当 为 时预加载磁贴。加载切片，就好像切片集可见但不渲染切片一样。tileset.showfalse preloadFlightDestinations Boolean true optionalOptimization option. Preload tiles at the camera's flight destination while the camera is in flight.优化选项。在摄像机飞行时在摄像机的飞行目的地预加载磁贴。 preferLeaves Boolean false optionalOptimization option. Prefer loading of leaves first.优化选项。更喜欢先装叶子。 dynamicScreenSpaceError Boolean false optionalOptimization option. Reduce the screen space error for tiles that are further away from the camera.优化选项。减少远离相机的磁贴的屏幕空间错误。 dynamicScreenSpaceErrorDensity Number 0.00278 optionalDensity used to adjust the dynamic screen space error, similar to fog density.密度用于调整动态屏幕空间误差，类似于雾密度。 dynamicScreenSpaceErrorFactor Number 4.0 optionalA factor used to increase the computed dynamic screen space error.用于增加计算的动态屏幕空间误差的因子。 dynamicScreenSpaceErrorHeightFalloff Number 0.25 optionalA ratio of the tileset's height at which the density starts to falloff.切片集高度的比率，密度开始下降。 progressiveResolutionHeightFraction Number 0.3 optionalOptimization option. If between (0.0, 0.5], tiles at or above the screen space error for the reduced screen resolution of will be prioritized first. This can help get a quick layer of tiles down while full resolution tiles continue to load.progressiveResolutionHeightFraction*screenHeight优化选项。如果介于 （0.0， 0.5] 之间，则将首先优先处理屏幕分辨率降低的屏幕空间误差等于或高于屏幕空间误差的磁贴。这有助于在继续加载全分辨率切片的同时快速关闭切片图层。progressiveResolutionHeightFraction*screenHeight foveatedScreenSpaceError Boolean true optionalOptimization option. Prioritize loading tiles in the center of the screen by temporarily raising the screen space error for tiles around the edge of the screen. Screen space error returns to normal once all the tiles in the center of the screen as determined by the Cesium3DTileset#foveatedConeSize are loaded.优化选项。通过临时提高屏幕边缘周围磁贴的屏幕空间误差，优先加载屏幕中心的磁贴。一旦加载了由 Cesium3DTileset#foveatedConeSize 确定的屏幕中心的所有图块，屏幕空间错误将恢复正常。 foveatedConeSize Number 0.1 optionalOptimization option. Used when Cesium3DTileset#foveatedScreenSpaceError is true to control the cone size that determines which tiles are deferred. Tiles that are inside this cone are loaded immediately. Tiles outside the cone are potentially deferred based on how far outside the cone they are and their screen space error. This is controlled by Cesium3DTileset#foveatedInterpolationCallback and Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation. Setting this to 0.0 means the cone will be the line formed by the camera position and its view direction. Setting this to 1.0 means the cone encompasses the entire field of view of the camera, disabling the effect.优化选项。当 Cesium3DTileset#foveatedScreenSpaceError 为 true 时使用，用于控制确定哪些切片被延迟的锥体大小。此锥体内的切片将立即加载。锥体外的磁贴可能会根据其在圆锥体外的距离及其屏幕空间错误而延迟。这由 Cesium3DTileset#foveatedInterpolationCallback 和 Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation 控制。将其设置为 0.0 意味着圆锥体将由相机位置及其视图方向形成的线。将此值设置为 1.0 意味着锥体包含摄像机的整个视场，从而禁用了该效果。 foveatedMinimumScreenSpaceErrorRelaxation Number 0.0 optionalOptimization option. Used when Cesium3DTileset#foveatedScreenSpaceError is true to control the starting screen space error relaxation for tiles outside the foveated cone. The screen space error will be raised starting with tileset value up to Cesium3DTileset#maximumScreenSpaceError based on the provided Cesium3DTileset#foveatedInterpolationCallback优化选项。当 Cesium3DTileset#foveatedScreenSpaceError 为 true 时使用，以控制凹槽锥外瓷砖的起始屏幕空间误差松弛。屏幕空间错误将从 tileset 值开始提高，直到 Cesium3DTileset#maximumScreenSpaceError，基于提供的 Cesium3DTileset#foveatedInterpolationCallback。. foveatedInterpolationCallback Cesium3DTileset.foveatedInterpolationCallback Math.lerp optionalOptimization option. Used when Cesium3DTileset#foveatedScreenSpaceError is true to control how much to raise the screen space error for tiles outside the foveated cone, interpolating between Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation and Cesium3DTileset#maximumScreenSpaceError优化选项。当 Cesium3DTileset#foveatedScreenSpaceError 为 true 时使用，以控制在中央凹锥体外的磁贴的屏幕空间误差提高多少，在 Cesium3DTileset#foveated MinimumScreenSpaceErrorRelaxation 和 Cesium3DTileset#maximumScreenSpaceError 之间进行插值 foveatedTimeDelay Number 0.2 optionalOptimization option. Used when Cesium3DTileset#foveatedScreenSpaceError is true to control how long in seconds to wait after the camera stops moving before deferred tiles start loading in. This time delay prevents requesting tiles around the edges of the screen when the camera is moving. Setting this to 0.0 will immediately request all tiles in any given view.优化选项。当 Cesium3DTileset#foveatedScreenSpaceError 为 true 时使用，以控制在延迟的磁贴开始加载之前，摄像机停止移动后等待的时间（以秒为单位）。此时间延迟可防止在摄像机移动时请求屏幕边缘周围的磁贴。将此值设置为 0.0 将立即请求任何给定视图中的所有磁贴。 skipLevelOfDetail Boolean false optionalOptimization option. Determines if level of detail skipping should be applied during the traversal.优化选项。确定在遍历期间是否应应用细节层次跳过。 baseScreenSpaceError Number 1024 optionalWhen is , the screen space error that must be reached before skipping levels of detail.skipLevelOfDetailtrue当 是 时，在跳过细节层次之前必须达到的屏幕空间错误。skipLevelOfDetailtrue skipScreenSpaceErrorFactor Number 16 optionalWhen is , a multiplier defining the minimum screen space error to skip. Used in conjunction with to determine which tiles to load.skipLevelOfDetailtrueskipLevels当 is 时，定义要跳过的最小屏幕空间误差的乘数。结合使用以确定要加载的磁贴。skipLevelOfDetailtrueskipLevels skipLevels Number 1 optionalWhen is , a constant defining the minimum number of levels to skip when loading tiles. When it is 0, no levels are skipped. Used in conjunction with to determine which tiles to load.skipLevelOfDetailtrueskipScreenSpaceErrorFactor当 is 时，一个常量，定义加载图块时要跳过的最小级别数。当它为 0 时，不会跳过任何级别。结合使用以确定要加载的磁贴。skipLevelOfDetailtrueskipScreenSpaceErrorFactor immediatelyLoadDesiredLevelOfDetail Boolean false optionalWhen is , only tiles that meet the maximum screen space error will ever be downloaded. Skipping factors are ignored and just the desired tiles are loaded.skipLevelOfDetailtrue当 is 时，只会下载满足最大屏幕空间错误的磁贴。跳过因素将被忽略，仅加载所需的磁贴。skipLevelOfDetailtrue loadSiblings Boolean false optionalWhen is , determines whether siblings of visible tiles are always downloaded during traversal.skipLevelOfDetailtrueWhen is ，确定在遍历期间是否始终下载可见切片的同级。skipLevelOfDetailtrue clippingPlanes ClippingPlaneCollection optionalThe ClippingPlaneCollection used to selectively disable rendering the tileset.用于有选择地禁用渲染切片集的剪贴平面集合。 classificationType ClassificationType optionalDetermines whether terrain, 3D Tiles or both will be classified by this tileset. See Cesium3DTileset#classificationType for details about restrictions and limitations.确定地形、3D 切片或两者是否按此切片集进行分类。请参阅 Cesium3DTileset#classificationType，了解有关限制和局限的详细信息。 ellipsoid Ellipsoid Ellipsoid.WGS84 optionalThe ellipsoid determining the size and shape of the globe.确定地球大小和形状的椭圆体。 pointCloudShading Object optionalOptions for constructing a PointCloudShading object to control point attenuation based on geometric error and lighting.用于构造 PointCloudShading 对象的选项，以根据几何误差和光照控制点衰减。 lightColor Cartesian3 optionalThe light color when shading models. When the scene's light color is used instead.undefined着色模型时的浅色。当使用场景的浅色时。undefined imageBasedLighting ImageBasedLighting optionalThe properties for managing image-based lighting for this tileset.用于管理此切片集的基于图像的照明的属性。 backFaceCulling Boolean true optionalWhether to cull back-facing geometry. When true, back face culling is determined by the glTF material's doubleSided property; when false, back face culling is disabled.是否剔除背面几何图形。当为真时，背面剔除由glTF材料的双面属性决定;当 false 时，将禁用背面剔除。 showOutline Boolean true optionalWhether to display the outline for models using the CESIUM_primitive_outline extension. When true, outlines are displayed. When false, outlines are not displayed.是否显示使用CESIUM_primitive_outline扩展的模型的轮廓。如果为 true，则显示轮廓。如果为 false，则不显示轮廓。 vectorClassificationOnly Boolean false optionalIndicates that only the tileset's vector tiles should be used for classification.指示仅应将切片集的矢量切片用于分类。 vectorKeepDecodedPositions Boolean false optionalWhether vector tiles should keep decoded positions in memory. This is used with .Cesium3DTileFeature.getPolylinePositions矢量切片是否应在内存中保留解码位置。这与 一起使用。Cesium3DTileFeature.getPolylinePositions featureIdLabel String | Number "featureId_0" optionalLabel of the feature ID set to use for picking and styling. For EXT_mesh_features, this is the feature ID's label property, or "featureId_N" (where N is the index in the featureIds array) when not specified. EXT_feature_metadata did not have a label field, so such feature ID sets are always labeled "featureId_N" where N is the index in the list of all feature Ids, where feature ID attributes are listed before feature ID textures. If featureIdLabel is an integer N, it is converted to the string "featureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.用于拾取和样式设置的要素 ID 集的标签。对于EXT_mesh_features，这是要素 ID 的标签属性，如果未指定，则为“featureId_N”（其中 N 是 featureIds 数组中的索引）。EXT_feature_metadata没有标签字段，因此此类要素 ID 集始终标记为“featureId_N”，其中 N 是所有要素 ID 列表中的索引，其中要素 ID 属性列在要素 ID 纹理之前。如果 featureIdLabel 是整数 N，则会自动将其转换为字符串“featureId_N”。如果同时存在每个基元和每个实例的特征 ID，则实例特征 ID 优先。 instanceFeatureIdLabel String | Number "instanceFeatureId_0" optionalLabel of the instance feature ID set used for picking and styling. If instanceFeatureIdLabel is set to an integer N, it is converted to the string "instanceFeatureId_N" automatically. If both per-primitive and per-instance feature IDs are present, the instance feature IDs take priority.用于拾取和样式设置的实例要素 ID 集的标签。如果 instanceFeatureIdLabel 设置为整数 N，则会自动将其转换为字符串“instanceFeatureId_N”。如果同时存在每个基元和每个实例的特征 ID，则实例特征 ID 优先。 showCreditsOnScreen Boolean false optionalWhether to display the credits of this tileset on screen.是否在屏幕上显示此图块集的制作者名单。 splitDirection SplitDirection SplitDirection.NONE optionalThe SplitDirection split to apply to this tileset.要应用于此切片集的拆分方向拆分。 debugHeatmapTilePropertyName String optionalThe tile variable to colorize as a heatmap. All rendered tiles will be colorized relative to each other's specified variable value.要着色为热图的磁贴变量。所有渲染的磁贴都将相对于彼此的指定变量值进行着色。 debugFreezeFrame Boolean false optionalFor debugging only. Determines if only the tiles from last frame should be used for rendering.仅用于调试。确定是否只应使用最后一帧的拼贴进行渲染。 debugColorizeTiles Boolean false optionalFor debugging only. When true, assigns a random color to each tile.仅用于调试。如果为 true，则为每个磁贴分配随机颜色。 enableDebugWireframe Boolean optionalFor debugging only. This must be true for debugWireframe to work for ModelExperimental in WebGL1. This cannot be set after the tileset has loaded. debugWireframe Boolean false optionalFor debugging only. When true, render's each tile's content as a wireframe.仅用于调试。这必须是正确的，debugWireframe才能在WebGL1中为ModelExperimental工作。加载切片集后，无法设置此项。 debugShowBoundingVolume Boolean false optionalFor debugging only. When true, renders the bounding volume for each tile.仅用于调试。如果为 true，则将每个磁贴的内容呈现为线框。 debugShowContentBoundingVolume Boolean false optionalFor debugging only. When true, renders the bounding volume for each tile's content. 仅用于调试。如果为 true，则呈现每个磁贴的边界体积。 debugShowViewerRequestVolume Boolean false optionalFor debugging only. When true, renders the viewer request volume for each tile仅用于调试。如果为 true，则呈现每个磁贴的查看器请求量。 debugShowGeometricError Boolean false optionalFor debugging only. When true, draws labels to indicate the geometric error of each tile. 仅用于调试。如果为 true，则绘制标签以指示每个切片的几何误差。 debugShowRenderingStatistics Boolean false optionalFor debugging only. When true, draws labels to indicate the number of commands, points, triangles and features for each tile. 仅用于调试。如果为 true，则绘制标注以指示每个切片的命令、点、三角形和要素的数量。 debugShowMemoryUsage Boolean false optionalFor debugging only. When true, draws labels to indicate the texture and geometry memory in megabytes used by each tile.仅用于调试。如果为 true，则绘制标签以指示每个切片使用的纹理和几何内存（以 MB 为单位）。 debugShowUrl Boolean false optionalFor debugging only. When true, draws labels to indicate the url of each tile.仅用于调试。如果为 true，则绘制标签以指示每个磁贴的 URL。

详见：

铯3DTileset - 铯文档 (cesium.com)https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileset.html?classFilter=cesium

1.3 加载tieleset数据案例

1.加载3dtiles数据

  const tileset = new Cesium.Cesium3DTileset({
    url: "./Assets/tileset.json",
  });

  viewer.scene.primitives.add(tileset);

  tileset.readyPromise.then(function (tileset) {
    viewer.zoomTo(tileset);
  });

2.实现效果

  

1.4 3dtiles性能监控

用于帮助调试 3D 磁贴的检查器小部件

名字	类型	描述
container	元素|字符串	将包含小部件的 DOM 元素或 ID。
scene	Scene	要使用的场景实例。

 案例：

在上述3dtiles文件加载后，可通过以下代码添加调试面板：

// 3dtiles调试面板
  viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);

 实现效果：

2. 3dtiles样式设置

2.1 3dtiles样式详解及案例

VUE3-Cesium（Cesium3DTileStyle-3dtiles样式更改）_HM-hhxx！的博客-CSDN博客Cesium中3dtile模型样式的给更改，Cesium3DTileStyle详解https://blog.csdn.net/damadashen/article/details/125271200?spm=1001.2014.3001.5501