主题
Weather
字数统计: 4.9k 字
阅读时长: 约 15 分钟
当前版本: 4.29
AMD:
require(["geoscene/widgets/Weather"], (Weather) => { /* code goes here */ });
ESM:
import Weather from "@geoscene/core/widgets/Weather.js";
类:
geoscene/widgets/Weather
起始版本:GeoScene Maps SDK for JavaScript 4.23
Weather 微件提供了一个界面,用于在 SceneView 中轻松选择和配置天气效果。为此,微件修改 SceneView.environment 的 weather
属性。不同的天气类型有:晴、多云、雨、雪和雾。
有关获得对微件样式完全控制的信息,请参阅样式主题。
示例
js
const widget = new Weather({ view: view });
// Adds the weather widget in the top right corner of the view
view.ui.add(widget, "top-right");
构造函数
Weather
new Weather(properties?)
参数
propertiesObject
optional
有关可能传递给构造函数的所有属性的列表,请参见属性。
属性概述
所有属性都可以设置、获取和监听。请参阅使用属性主题。
名称 | 类型 | 描述 | 类 |
---|---|---|---|
container | String|HTMLElement | 包含微件的 DOM 元素的 ID 或节点。 | Widget |
declaredClass | String | 类的名称。 | Accessor |
headingLevel | Number | 指示用于微件标题的标题级别。 | Weather |
icon | String | 表示微件的图标。 | Weather |
iconClass | String | 微件的默认 CSS 图标类。 | Weather |
id | String | 创建微件时分配给微件的唯一 ID。 | Widget |
label | String | 微件的默认的标注。 | Weather |
view | SceneView | 对视图的引用。 | Weather |
viewModel | WeatherViewModel | 此微件的视图模型。 | Weather |
visible | Boolean | 指示微件是否可见。 | Widget |
visibleElements | VisibleElements | 此属性提供了显示或隐藏微件的各个元素的功能。 | Weather |
属性详细信息
container
container String|HTMLElement
继承自:Widget
包含微件的 DOM 元素的 ID 或节点。此属性只能设置一次。以下示例都是使用微件时的有效用例。
示例
js
// 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"
});
html
// 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>
js
// 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"
});
headingLevel
headingLevel Number
指示用于微件标题的标题级别。默认情况下,此消息呈现为 4 级标题 (例如,<h4>Time range</h4>
)。根据微件在应用程序中的位置,您可能需要调整此标题以获得正确的语义。这对于满足可访问性标准很重要。
默认值4
另请参阅
示例
js
widget.headingLevel = 4;
icon
icon String
起始版本:GeoScene Maps SDK for JavaScript 4.27
表示微件的图标。它通常在微件由另一微件控制时使用 (例如在 Expand 微件中)。
默认值null
viewModel
viewModel WeatherViewModelautocast
此微件的视图模型。此类包含控制此微件行为的所有逻辑。请参阅 WeatherViewModel 类来访问微件上的所有属性和方法。
visible
visible Boolean
继承自:Widget
指示微件是否可见。
如果为 false
,微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如,如果此微件是与视图 UI 右上角关联的三个微件中的第一个,则当此微件不可见时,其他微件将重新定位。有关更多信息,请参阅 css display 值 "none"
。
默认值true
示例
js
// Hides the widget in the view
widget.visible = false;
visibleElements
visibleElements VisibleElements
此属性提供了显示或隐藏微件的各个元素的功能。
示例
js
weather.visibleElements = {
header: true
}
方法概述
名称 | 返回值类值 | 描述 | 类 |
---|---|---|---|
addHandles() | 添加一个或多个与对象的生命周期相关联的句柄。 | Accessor | |
classes() | String | 用于为微件的 class 属性构建值的实用方法。 | Widget |
destroy() | 销毁微件实例。 | Widget | |
emit() | Boolean | 在实例上触发事件。 | Widget |
hasEventListener() | Boolean | 指示实例上是否存在与提供的事件名称相匹配的事件监听器。 | Widget |
hasHandles() | Boolean | 如果存在指定的句柄组,则返回 true。 | Accessor |
isFulfilled() | Boolean | isFulfilled() 可用于验证创建类的实例是否已完成 (已解决或已拒绝)。 | Widget |
isRejected() | Boolean | isRejected() 可用于验证创建类的实例是否被拒绝。 | Widget |
isResolved() | Boolean | isResolved() 可用于验证创建类的实例是否已解决。 | Widget |
on() | Object | 在实例上注册事件处理程序。 | Widget |
own() | 添加一个或多个与微件的生命周期相关联的句柄。 | Widget | |
postInitialize() | 此方法主要由开发人员在实现自定义微件时使用。 | Widget | |
removeHandles() | 移除对象拥有的句柄组。 | Accessor | |
render() | Object | 此方法主要由开发人员在实现自定义微件时使用。 | Widget |
renderNow() | 立即将微件渲染到 DOM。 | Widget | |
scheduleRender() | 此方法主要由开发人员在实现自定义微件时使用。 | Widget | |
when() | Promise | 一旦创建了类的实例,就可以利用 when()。 | Widget |
方法详细说明
addHandles
addHandles(handleOrHandles, groupKey?)
继承自:Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.25
添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时,将移除句柄。
js
// Manually manage handles
const handle = reactiveUtils.when(
() => !view.updating,
() => {
wkidSelect.disabled = false;
},
{ once: true }
);
this.addHandles(handle);
// Destroy the object
this.destroy();
参数
handleOrHandlesWatchHandle|WatchHandle[]
对象销毁后,标记为要移除的句柄。
groupKey*
optional
标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键,则句柄将被添加到默认组。
classes
classes(){String}
继承自:Widget
用于为微件的 class
属性构建值的实用方法。这有助于简化 css 类设置。
参数
classNamesString|String[]|Object
类名称。
返回
类型 | 描述 |
---|---|
String | 计算的类名。 |
另请参阅
示例
html
// .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)} />
);
}
emit
emit(type, event?){Boolean}
继承自:Widget
在实例上触发事件。仅当创建此类的子类时,才应使用此方法。
参数
typeString
事件的名称。
eventObject
optional
事件有效负载。
返回
类型 | 描述 |
---|---|
Boolean | true 如果监听器收到通知,则为 |
hasEventListener
hasEventListener(type){Boolean}
继承自:Widget
指示实例上是否存在与提供的事件名称相匹配的事件监听器。
参数
typeString
事件的名称。
返回
类型 | 描述 |
---|---|
Boolean | 如果类支持输入事件,则返回 true。 |
hasHandles
hasHandles(groupKey?){Boolean}
继承自:Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.25
如果存在指定的句柄组,则返回 true。
参数
groupKey*
optional
组键。
返回
类型 | 描述 |
---|---|
Boolean | 如果存在指定的句柄组,则返回 true 。 |
示例
js
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
obj.removeHandles("watch-view-updates");
}
isFulfilled
isFulfilled(){Boolean}
继承自:Widget
isFulfilled()
可用于验证创建类的实例是否已完成 (已解决或已拒绝)。如果满足,则返回 true
。
返回
类型 | 描述 |
---|---|
Boolean | 指示创建类的实例是否已完成 (已解决或已拒绝)。 |
isRejected
isRejected(){Boolean}
继承自:Widget
isRejected()
可用于验证创建类的实例是否被拒绝。如果被拒绝,则返回 true
。
返回
类型 | 描述 |
---|---|
Boolean | 指示创建类的实例是否已被拒绝。 |
isResolved
isResolved(){Boolean}
继承自:Widget
isResolved()
可用于验证创建类的实例是否已解决。如果已解决,则返回 true
。
返回
类型 | 描述 |
---|---|
Boolean | 指示创建类的实例是否已解决。 |
on
on(type, listener){Object}
继承自:Widget
在实例上注册事件处理程序。调用此方法将事件与监听器挂钩。
参数
typeString|String[]
要监听的事件或事件数组。
listenerFunction
事件触发时要调用的函数。
返回
类型 | 描述 | ||||||
---|---|---|---|---|---|---|---|
Object | 返回一个具有 remove() 方法的事件处理程序,应该调用该方法以停止监听事件。
|
示例
js
view.on("click", function(event){
// event is the event handle returned after the event fires.
console.log(event.mapPoint);
});
own
own(handleOrHandles)
继承自:Widget
起始版本:GeoScene Maps SDK for JavaScript 4.24
已弃用自 4.28 开始,改为使用 addHandles()。
添加一个或多个与微件的生命周期相关联的句柄。当微件被销毁时,将移除句柄。
js
const handle = reactiveUtils.when(
() => !view.updating,
() => {
wkidSelect.disabled = false;
},
{ once: true}
);
this.own(handle); // Handle gets removed when the widget is destroyed.
参数
handleOrHandlesWatchHandle|WatchHandle[]
微件销毁后,标记为要移除的句柄。
removeHandles
removeHandles(groupKey?)
继承自:Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.25
移除对象拥有的句柄组。
参数
groupKey*
optional
要移除的组键或组键的数组或集合。
示例
js
obj.removeHandles(); // removes handles from default group
obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");
when
when(callback?, errback?){Promise}
继承自:Widget
一旦创建了类的实例,就可以利用 when()
。此方法接受两个输入参数:callback
函数和 errback
函数。callback
在类的实例加载时执行。errback
在类的实例无法加载时执行。
参数
callbackFunction
optional
当 promise 解决时调用的函数。
errbackFunction
optional
当 promise 失败时执行的函数。
返回
类型 | 描述 |
---|---|
Promise | 为 callback 结果返回一个新的 promise。 |
示例
js
// 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
});