widget

方法列表

方法详细说明

accessibleHandler(){Function}

这个便利装饰器用于帮助简化 widget 键盘事件中的可访问性。例如，它可用于在按下space 或 enter 键时执行一个方法。

返回值:

类型	描述
Function	属性描述符。

示例代码:

// .tsx syntax providing accessibility on a widget view model's reset method
@accessibleHandler()
@aliasOf("viewModel.reset")
reset: () => void;

cssTransition(type, className){Function}

起始版本: GeoScene API for JavaScript 4.22

用于创建 CSS 动画/过渡功能的实用方法。

参数:

type String 动画/过渡类型。 可选值:"enter"|"exit"

className String 动画/过渡类名称。

返回值:

类型	描述
Function	动画/过渡功能。

示例代码:

// .tsx syntax showing how to set up node enter/exit animations

render() {
  const content = this.visible ? (
    <div enterAnimation={cssTransition("enter", CSS.fadeIn)}
         exitAnimation={cssTransition("exit", CSS.fadeOut)}>
      I fade in and out.
    </div>
  ) : null;

  return (
    <div class={CSS.base}>{content}</div>
  );
}

isActivationKey(key){Boolean}

起始版本: GeoScene API for JavaScript 4.22

实用程序的方法，用来确定一个按下的键是否应该激活按钮的行为。如果返回 KeyboardEvent.key 为Enter 或空格" ")，则返回 true。

参数:

key String The KeyboardEvent.key

返回值:

类型	描述
Boolean	表示按下的 keyboard key  是Enter 还是空格(" ")。

示例:

• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

isRTL(){Boolean}

起始版本: GeoScene API for JavaScript 4.22

用于确定文档文本的方向性是否为从右到左的实用方法。

返回值:

类型	描述
Boolean	如果文档文本的方向性是从右到左，则为 true 。

messageBundle(bundleId){Function}

起始版本: GeoScene API for JavaScript 4.22

这个便利装饰器用于帮助简化 widget 的本地化。装饰将自动填充由标识符bundleId 指定的本地化消息捆绑的属性是很有用的。可以在render() 函数中使用该属性来显示本地化内容。

当实例化一个 widget 时，所有的消息包都被加载并分配给它们相应的属性。调用小部件的 postInitialize 方法，然后是第一个 呈现 调用。

当区域设置发生变化时，将重新加载和重新分配所有活动 widget 的所有消息包。widget 然后同时呈现。

如果函数在 widget 之外使用已翻译的字符串，请改用  intl.fetchMessageBundle 。

注意， render() 的第一个调用只发生在所有用@messageBundle 装饰的属性都被相应的 bundle填充之后。

参数:

bundleId String optional 传递给 intl.fetchMessageBundle() 的 bundle 标识符。

返回值:

类型	描述
Function	属性装饰。

示例:

• Sample - Create Custom Widget

• intl.fetchMessageBundle()
• intl.registerMessageBundleLoader()

示例代码:

// .tsx syntax to define a message bundle property
@property()
@messageBundle("my-application/MyBundle")
messages: { [key: string]: any };

render() {
  return (
    <div>{this.messages.myMessage}</div>
  );
}

renderable(propertyName){Function}

已废弃 所有属性现在都自动跟踪，不需要用这个装饰器

这个方便的装饰器标记了一个自动渲染的属性。 当您希望在修饰属性更改时安排渲染时，它很有用。 很多时候，这个装饰器与 @property 装饰器一起使用。 通过提供指向实例中更深的属性的路径，也支持在深层属性上进行渲染。

参数:

propertyName String|String[] optional 嵌套可呈现属性的名称。

返回值:

类型	描述
Function	属性装饰。

示例代码:

// .tsx syntax setting a renderable property
@property()
@renderable()
name: string = "name";

// .tsx syntax setting a renderable nested property.
@property()
@renderable("viewModel.name.first")
viewModel: PersonViewModel;

storeNode(node)

起始版本: GeoScene API for JavaScript 4.22

此便捷方法用于将 HTMLElement DOM 节点引用分配给变量。 它通过获取从  afterUpdate 或 afterCreate  回调传递的 HTMLElement 来做到这一点。 为了使用它，元素必须有一个  data-node-ref  属性。 此外，它还必须绑定到小部件实例，例如 bind={this}。

参数:

node HTMLElement 引用的 DOM 节点。

示例:

• 自定义 widget 呈现 指南主题。

示例代码:

// The storeNode function is called after the node is
// added to the DOM. Bind the node to the widget and
// pass in the node's root element name.

render() {
  return (
    <div afterCreate={storeNode} bind={this} data-node-ref="rootNode" />
  );
}

tsx(selector, properties, children){Object}

起始版本: GeoScene API for JavaScript 4.22

这个方便的方法用于在 widget.render() 方法中呈现 JSX 。它需要导入 tsx，即使它没有被显式调用。

参数:

selector String 要创建的元素。

properties Object optional 元素的属性。

children Object optional 元素的子元素。

返回值:

类型	描述
Object	虚拟节点。

示例:

• Sample - Create Custom Widget

示例代码:

// .tsx syntax importing jsxfactory
import { tsx } from "geoscene/widgets/support/widget";

vmEvent(eventNames){Function}

这个便利装饰器帮助在 widget 实例上分派视图模型事件。

参数:

eventNames String|String[] 要重新调度的事件名称。

返回值:

类型	描述
Function	属性装饰。

示例代码:

// .tsx syntax dispatching view model events
@property()
@vmEvent("search, search-clear, suggest")
viewModel: SearchViewModel;

类型定义

GoToOverride(view, goToParameters)

下面的属性定义了一个goTo 覆盖函数。

参数:

规范:

view MapView|SceneView 对发生导航的 MapView 或 SceneView 的引用。

goToParameters Object 传递给  IMapView's goTo() 或 SceneView's goTo() 方法的覆盖目标和可选参数。 规范: target GoToTarget2D|GoToTarget3D 要设置动画的目标位置/视点/范围。 options GoToOptions2D|GoToOptions3D optional 定义导航动画、持续时间和缓和效果的选项。