LineOfSight 微件是一个 3D 分析工具,允许您在 SceneView 中执行可见性分析。给定观察点和多个目标点之间的可见性是根据视图中当前显示的内容(包括地面、集成格网和 3D 对象(如建筑物或树木))计算的。
分析结果显示为直线,其中指示观察点可以看到的内容的可见部分显示为绿色。遮挡的目标显示为红色球体,视线的遮挡部分也显示为红色。可见目标以绿色球体和全绿色视线显示。当无法计算视线时,它将以灰色显示。当目标或观察点不在视图中,或者当它们都不在视图中时,就会发生这种情况。
要使用该微件,请实例化它并将其添加到视图中:
const lineOfSight = new LineOfSight({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(lineOfSight, {
position: "bottom-left"
});
使用交互式微件,您可以在场景中单击一次以设置观察点,然后再次单击以设置一个或多个目标。观察点和目标点都可以通过拖动来移动。
使用 LineOfSightViewModel,您还可以以编程方式设置观察点和目标。在 LineOfSightViewModel 文档中阅读有关它的详细信息,或浏览视线示例中的代码。
LineOfSight 仅适用于 SceneView。视线显示的结果是暂时的,不能保留在 WebScene 或幻灯片中。
构造函数
属性概述
名称 | 类型 | 描述 | 类: | |
---|---|---|---|---|
LineOfSightAnalysis | 更多详情 由微件创建或修改的视线分析对象。 | 更多详情 | LineOfSight | |
String|HTMLElement | 更多详情 表示包含微件的 DOM 元素的 ID 或节点。 | 更多详情 | Widget | |
String | 更多详情 类的名称。 | 更多详情 | Accessor | |
String | 更多详情 微件的默认 CSS 图标类。 | 更多详情 | LineOfSight | |
String | 更多详情 创建微件时分配给微件的唯一 ID。 | 更多详情 | Widget | |
String | 更多详情 微件的默认标注。 | 更多详情 | LineOfSight | |
SceneView | 更多详情 对 SceneView 的引用。 | 更多详情 | LineOfSight | |
LineOfSightViewModel | 更多详情 此微件的视图模型。 | 更多详情 | LineOfSight | |
Boolean | 更多详情 指示微件是否可见。 | 更多详情 | Widget |
属性详细信息
-
起始版本:GeoScene API for JavaScript 4.23
-
由微件创建或修改的视线分析对象。此属性是 LineOfSightViewModel.analysis 的别名。
此属性可以在微件构建期间设置,以便为微件提供现有分析以进行修改。将分析的属性分配给微件后,也可以对其进行修改。
如果在微件构造期间未提供分析,则微件会自动创建自己的分析并将其添加到视图中。在这种情况下,当微件被销毁时,分析也将自动从视图中移除。
示例:// Construct a line of sight analysis object outside of the widget const analysis = new LineOfSightAnalysis({ observer: { type: "point", // autocasts as new Point() x: 7.67, y: 45.981, z: 3435.765 }, targets: [{ location: { type: "point", x: 7.659, y: 45.976, z: 4437 } }] }); // 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 viewModel = new LineOfSight({ 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
。
-
iconClass String
-
微件的默认 CSS 图标类。
-
创建微件时分配给构件的唯一 ID。如果未由开发人员设置,它将默认为容器 ID,或者如果不存在,则将自动生成。
-
label String
-
微件的默认标注。
-
viewModel LineOfSightViewModelautocast
-
此微件的视图模型。这是一个类,其中包含控制此微件行为的属性和方法。请参阅 LineOfSightViewModel 类以访问微件上的所有属性和方法。
-
指示微件是否可见。
如果
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 Object可选事件负载。
返回:类型 说明 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 });