自定义 UI 基础知识

字数统计: 974 字
阅读时长: 约 2 分钟
当前版本: 4.29

简介 ​

GeoScene Maps SDK for JavaScript 提供了向应用程序添加自定义 UI 构建块的功能。您可使用将组件放置在视图角落的方法来设置简单的布局。组件通常是 DOM 元素，如 DIV、Web 组件或使用 JavaScript 框架构建的组件。

以下 伪代码 演示了添加单个 DIV 元素的概念：

index.html - 添加显示自定义消息的 <div> 元素：

html
 <!-- Define the custom div element -->
 <div id="customTextDiv">My custom text</div>

styles.css - 设置自定义 <div> 元素的样式：

js
 /* Style the custom div */
 #customTextDiv {
 width: 30px;
 height: 20px;
 color: red;
 }

main.js - 将 <div> 添加到视图：

js
 // Add the custom div to the top right of the view
 view.ui.add(document.getElementById("customTextDiv"), "top-right");

DefaultUI 类提供了添加、移动和删除 SDK 微件或其他 DOM 元素的方法。

自定义框架组件 ​

React、Angular 和 Vue.js 等前端 JavaScript 框架使用组件作为基本构建模块。您可使用上面演示的相同模式将这些组件添加到地图应用程序的视图中。

建议将 @geoscene/core ES 模块与 JavaScript 框架一起使用。选择最适合您要求的框架。框架的组件架构可以与 JavaScript Maps SDK 中的功能松散耦合。此方法提供了最佳的集成级别，因为您可以完全控制用户体验、用户界面和生命周期。

注

我需要框架吗？ 使用框架不是必需的，但是最流行的框架提供了许多节省时间和精力的好处，包括用于构建组件的基架、定期更新和错误修复以及活跃的支持社区。

实现模式 ​

JavaScript 框架组件由 JSX、HTML 元素、CSS 和 JavaScript 等标记组成。框架组件还提供了处理用户输入、管理状态以及管理与制图应用程序其余部分交互的功能。不同的框架通常在组件如何工作方面有着相似的概念，但实现模式通常完全不同。

可以使用 DefaultUI 类中的方法在 MapView 或 SceneView 中添加、移动和移除这些组件。当有多个元素时，API 会自动处理定位，并适应不同的视图大小。

下面是 React 的伪代码，用于创建一个名为 SimpleComponent 的基本组件，该组件可返回一个 HTML <div> 元素，然后将其添加到视图中。

创建简单组件 ​

创建一个带有 <div> 元素的组件，并为其分配 id 和 myMessage 属性。

SimpleComponent.jsx

html
/**
* A simple component for displaying a message
* @param {string} id - The `id` of the components parent HTML div
* @param {string} myMessage - A simple message to display
* @returns A single div element
**/
const SimpleComponent = ({ id, myMessage }) => {
 return <div id={id}>{myMessage}</div>
}

export default SimpleComponent;

将组件导入您的应用程序 ​

通过将组件添加到视图中，将其导入到应用程序中。请确保启用任何生命周期钩子和数据绑定，以确保组件正确初始化并与 JavaScript Maps SDK 功能同步。

App.jsx

html
// Import the custom component into your mapping app
import SimpleComponent from "./SimpleComponent.jsx";

// Add a hook to access the component's DOM element
const simpleComponentID = useRef("simple-component");

// Set a message to display
const message = "Hello World";

. . .

// Add the component to the view using the DefaultUI's `add()` method.
view.ui.add(document.getElementById(simpleComponentID.current), "top-right");

// Implement the component in markup and set the `id` and `myMessage`.
// This will display "Hello World" in the top-right of the view.
return {
 <SimpleComponent id={simpleComponentID.current} myMessage={message}></SimpleComponent>;
);

自定义 UI 主题 ​

自定义 UI 元素通常使用其父设计系统 (例如适用于 React 和 Angular 的 Material UI) 设置样式。

其他信息 ​

有关详细信息，请参阅以下附加链接：