编程模式

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

简介 ​

本章节讨论使用 GeoScene Maps SDK for JavaScript 开发应用程序的编程模式和最佳实践。

查看属性变化 ​

reactiveUtils 提供了使用各种不同的数据类型和结构（例如字符串、布尔值、数组、集合和对象）来跟踪 API 属性更改的功能。该模块还允许组合来自多个来源的属性。它包括以下方法：watch()、on()、once()、when() 和 whenOnce()。

reactiveUtils 还提供 TypeScript 类型检查。您可以访问属性、构建对象或执行其他计算，所有这些都经过 TypeScript 编译器的正确检查。回调参数也是从 getValue 函数中正确推断出来的。

自动转换 ​

自动转换可将 JavaScript 对象转换为 GeoScene Maps SDK for JavaScript 类类型，而无需应用程序开发者显式导入这些类。

注: 目前，由于 TypeScript 的限制，自动转换在非 TypeScript 应用程序中效果最好。如果您已经在使用 API 而没有任何 TypeScript 构建错误，则无需进行任何更改。

在以下代码示例中，为 FeatureLayer 创建 SimpleRenderer 需要五个 API 类。

js
    require([
        "geoscene/Color",
        "geoscene/symbols/SimpleLineSymbol",
        "geoscene/symbols/SimpleMarkerSymbol",
        "geoscene/renderers/SimpleRenderer",
        "geoscene/layers/FeatureLayer",
    ], (
    Color, SimpleLineSymbol, SimpleMarkerSymbol, SimpleRenderer, FeatureLayer
    ) => {
        const layer = new FeatureLayer({
            url: "FeatureServerUrl/0",
            renderer: new SimpleRenderer({
                symbol: new SimpleMarkerSymbol({
                    style: "diamond",
                    color: new Color([255, 128, 45]),
                    outline: new SimpleLineSymbol({
                        style: "dash-dot",
                        color: new Color([0, 0, 0])
                    })
                })
            })
        });
    });

通过自动转换，您不必导入渲染器和符号类；您需要导入的唯一模块是 geoscene/layers/FeatureLayer。

js
    require([ "geoscene/layers/FeatureLayer" ], (FeatureLayer) => {

        const layer = new FeatureLayer({
            url: "FeatureServerUrl/0",
            renderer: { // autocasts as new SimpleRenderer()
                symbol: { // autocasts as new SimpleMarkerSymbol()
                    type: "simple-marker",
                    style: "diamond",
                    color: [ 255, 128, 45 ], // autocasts as new Color()
                    outline: { // autocasts as new SimpleLineSymbol()
                        style: "dash-dot",
                        color: [ 0, 0, 0 ] // autocasts as new Color()
                    }
                }
            }
        });
    });

要了解类是否可以自动转换，请查看每个类的 GeoScene Maps SDK for JavaScript 参考。如果属性可以自动转换，则将显示下图：

自动转换标注

例如，FeatureLayer 类的属性 renderer 的文档具有 autocast 标记。

请注意，使用自动转换的代码更简单，并且在功能上与上述代码片段相同，其中所有模块都显式导入。GeoScene Maps SDK for JavaScript 将使用传递给构造函数中属性的值，并在内部实例化类型对象。

请记住，如果模块类型已知或固定，则无需在属性上指定 type。例如，查看上面代码片段中 SimpleMarkerSymbol 类中的 outline 属性。它没有 type 属性，因为唯一具有 outline 属性的 Symbol 子类是 SimpleLineSymbol。

js
    const diamondSymbol = {
        type: "simple-marker",
        outline: {
            type: "simple-line", // Not needed, as type `simple-line` is implied
            style: "dash-dot",
            color: [ 255, 128, 45 ]
        }
    };

在 type 更通用的情况下，例如 FeatureLayer.renderer，则必须始终指定 type 以便自动转换正常工作。

微件 viewModel 模式 ​

对于许多微件，可以使用 viewModel 实现其他功能。每个微件都有一个视图和一个 viewModel。视图通常负责处理微件的用户界面（UI），即微件如何通过 DOM 显示和处理用户交互，例如 Sketch 微件。viewModel 部分负责微件的基础功能，或者更确切地说，负责其业务逻辑，例如 SketchViewModel。

为什么要将微件框架分为这两个独立的部分？一个原因是可重用性。viewModel 公开支持视图所需功能所需的 API 属性和方法，而视图包含 DOM 逻辑。由于 viewModels 从 geoscene/core/Accessor 扩展而来，因此它们利用了 Accessor 的所有功能。这有助于保持 API 各个部分之间的一致性，因为许多其他模块也派生自此类。

那么这两部分是如何协同工作的呢？当微件渲染时，它会渲染其 state。此状态派生自视图和 viewModel 属性。在微件生命周期中的某个时刻，视图调用 viewModel 的方法/属性，从而导致属性或结果的更改。触发更改后，视图会收到通知，并将在 UI 上更新。

下面是一个使用 SketchViewModel.polygonSymbol 属性以在主动创建新图形时覆盖默认绘图符号系统：

js
    const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "#F2BC94",
        outline: {
            // autocasts as new SimpleLineSymbol()
            color: "#722620",
            width: 3
        }
    };

    const sketchViewModel = new SketchViewModel({
        view: view,
        layer: graphicsLayer,
        polygonSymbol: polygonSymbol,
    });