切片微件是一种 3D 分析工具,可用于显示 SceneView 中遮挡的内容。切片微件可应用于任何图层类型,从而可以查看建筑物内部或探索地质表面。
要使用该微件,请实例化它并将其添加到视图中:
const slice = new Slice({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(slice, {
position: "bottom-left"
});
切片形状始终是平面。默认情况下,平面为水平或垂直。若要允许平面的倾斜角度,请将 SliceViewModel.tiltEnabled 设置为 true
。切片将隐藏曲面前面的任何内容。平面两侧的句柄可用于调整切片平面的大小、航向、倾斜度和位置。可以使用 SliceViewModel.shape 设置或检索 SlicePlane。
创建切片后,可以从切片中排除图层。例如,要查看 BuildingSceneLayer 内部的内部元素,可以从切片微件中排除窗口或家具图层。
构造函数
属性概述
名称 | 类型 | 描述 | 类: | |
---|---|---|---|---|
SliceAnalysis | 更多详情 微件创建或修改的切片分析对象。 | 更多详情 | Slice | |
String|HTMLElement | 更多详情 表示包含微件的 DOM 元素的 ID 或节点。 | 更多详情 | Widget | |
String | 更多详情 类的名称。 | 更多详情 | Accessor | |
Number | 更多详情 指示用于“排除的图层”标题的标题级别。 | 更多详情 | Slice | |
String | 更多详情 微件的默认 CSS 图标类。 | 更多详情 | Slice | |
String | 更多详情 创建微件时分配给微件的唯一 ID。 | 更多详情 | Widget | |
String | 更多详情 微件的默认标注。 | 更多详情 | Slice | |
SceneView | 更多详情 对 SceneView 的引用。 | 更多详情 | Slice | |
SliceViewModel | 更多详情 此微件的视图模型。 | 更多详情 | Slice | |
Boolean | 更多详情 指示微件是否可见。 | 更多详情 | Widget |
属性详细信息
-
起始版本:GeoScene API for JavaScript 4.23
-
微件创建或修改的切片分析对象。此属性是 SliceViewModel.analysis 的别名。
此属性可以在微件构建期间设置,以便为微件提供现有分析以进行修改。将分析的属性分配给微件后,也可以对其进行修改。
如果在微件构造期间未提供分析,则微件会自动创建自己的分析并将其添加到视图中。在这种情况下,当微件被销毁时,分析也将自动从视图中移除。
- 另请参阅:
示例:// Construct a slice analysis object outside of the widget const analysis = new SliceAnalysis({ shape: { type: "plane", // autocasts as new SlicePlane() position: { type: "point", x: -0.1, y: 51.5 }, width: 50, height: 50, tilt: 45 }, tiltEnabled: true }); // Ensure that the analysis is added to the view view.analyses.add(analysis); // Frame the analysis in the view view.goTo(analysis.extent); // Pass the analysis object as a constructor parameter to modify it using the widget const widget = new Slice({ analysis: analysis, view: view });
-
-
表示包含微件的 DOM 元素的 ID 或节点。此属性只能设置一次。以下示例是使用微件时的所有有效用例。
示例:// Create the HTML div element programmatically at runtime and set to the widget's container const basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div") }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
// Specify an already-defined HTML div element in the widget's container const basemapGallery = new BasemapGallery({ view: view, container: basemapGalleryDiv }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" }); // HTML markup <body> <div id="viewDiv"></div> <div id="basemapGalleryDiv"></div> </body>
// Specify the widget while adding to the view's UI const basemapGallery = new BasemapGallery({ view: view }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
-
类的名称。声明的类名格式为
geoscene.folder.className
。
-
headingLevel Number起始版本:GeoScene API for JavaScript 4.20
-
指示用于“排除的图层”标题的标题级别。默认情况下,这呈现为 3 级标题(例如
<h3>Excluded layers</h3>
)。根据微件在应用中的位置,您可能需要调整此标题以获得正确的语义。这对于满足辅助功能标准非常重要。- 默认值:3
- 另请参阅:
示例:slice.headingLevel = 2;
-
iconClass String
-
微件的默认 CSS 图标类。
-
创建微件时分配给构件的唯一 ID。如果未由开发人员设置,它将默认为容器 ID,或者如果不存在,则将自动生成。
-
label String
-
-
viewModel SliceViewModelautocast
-
此微件的视图模型。这是一个类,其中包含控制此微件行为的属性和方法。
-
指示微件是否可见。
如果
false
,则该微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如,如果此微件是与视图 UI 右上角关联的三个微件中的第一个,则当此微件变为不可见时,其他微件将重新定位。有关详细信息,请参阅"none"
的 CSS 显示值。- 默认值:true
示例:// Hides the widget in the view widget.visible = false;
方法概述
名称 | 返回类型 | 描述 | 类: | |
---|---|---|---|---|
String | 更多详情 用于为微件的 | 更多详情 | Widget | |
更多详情 销毁微件实例。 | 更多详情 | Widget | ||
Boolean | 更多详情 在实例上发出事件。 | 更多详情 | Widget | |
Boolean | 更多详情 指示实例上是否存在与提供的事件名称匹配的事件侦听器。 | 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Object | 更多详情 在实例上注册事件处理程序。 | 更多详情 | Widget | |
更多详情 微件拆解助手。 | 更多详情 | Widget | ||
更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | ||
Object | 更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | |
更多详情 立即将微件渲染给 DOM。 | 更多详情 | Widget | ||
更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | ||
Promise | 更多详情
| 更多详情 | Widget |
方法详细信息
-
用于为微件的
class
属性构建值的实用程序方法。这有助于简化 CSS 类设置。参数:repeatable 类名称
返回:类型 说明 String 计算的类名。 - 另请参阅:
示例:// .tsx syntax showing how to set CSS classes while rendering the widget render() { const dynamicIconClasses = { [CSS.myIcon]: this.showIcon, [CSS.greyIcon]: !this.showIcon }; return ( <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} /> ); }
-
destroy()inherited
-
销毁微件实例。
-
在实例上发出事件。仅当创建此类的子类时,才应使用此方法。
参数:type String事件的名称。
event Objectoptional事件负载。
返回:类型 说明 Boolean true
如果听取了侦听者的通知
-
起始版本:GeoScene API for JavaScript 4.19
-
isFulfilled()
可用于验证是否满足类的创建实例(已解决或已拒绝)。如果已完成,将返回true
。返回:类型 说明 Boolean 指示是否已完成创建类的实例(已解决或已拒绝)。
-
起始版本:GeoScene API for JavaScript 4.19
-
isRejected()
可用于验证创建类的实例是否被拒绝。如果被拒绝,将返回true
。返回:类型 说明 Boolean 指示创建类的实例是否已被拒绝。
-
起始版本:GeoScene API for JavaScript 4.19
-
isResolved()
可用于验证是否解析了类的创建实例。如果被解析,将返回true
。返回:类型 说明 Boolean 指示是否已解析创建类的实例。
-
在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩。
参数:要侦听的事件或事件数组。
listener Function事件激发时要调用的函数。
返回:类型 说明 Object 返回具有 remove()
方法的事件处理程序,应调用该方法以停止侦听事件。属性 类型 说明 remove Function 调用时,从事件中删除侦听器。 示例:view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint); });
-
own(handles)inherited
-
微件拆解助手。当微件被销毁时,添加到其中的任何句柄都将自动删除。
参数:handles WatchHandle|WatchHandle[]在微件被销毁后标记为删除的句柄。
-
postInitialize()inherited
-
此方法主要由开发人员在实现自定义微件时使用。在微件准备好进行渲染后执行。
-
此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。
返回:类型 说明 Object 渲染的虚拟节点。
-
renderNow()inherited
-
立即将微件渲染给 DOM。
-
scheduleRender()inherited
-
此方法主要由开发人员在实现自定义微件时使用。计划微件渲染。此方法对于影响 UI 的更改很有用。
-
起始版本:GeoScene API for JavaScript 4.19
-
when()
可以在创建类的实例后利用。此方法采用两个输入参数:callback
函数和errback
函数。在类的实例加载时执行callback
。如果类的实例无法加载,则执行errback
。参数:callback Functionoptional解析 promise 时要调用的函数。
errback Functionoptionalpromise 失败时要执行的函数。
返回:类型 说明 Promise 返回回调结果的新 promise, callback
结果可用于链接其他函数。示例:// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way let bmGallery = new BasemapGallery(); bmGallery.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });