使用 AMD 模块构建

简介

使用 Dojo 1 和 RequireJS 进行本地构建时，建议使用 GeoScene Maps SDK for JavaScript 的 AMD 模块。

• 这些模块可以使用 geoscene-js-api 通过 npm 在本地安装。
• 对于 API 4.17 及更低版本，可以使用 @geoscene/webpack-plugin 通过 webpack 在本地进行构建。
• 可以使用 esri-loader 帮助程序库从 CDN 延迟加载模块。

延迟加载 CDN 模块

esri-loader 是一个从 AMD CDN 延迟加载模块的小型库。API 模块是在运行时加载的，它们不会与本地构建捆绑在磁盘上。它适用于使用任何加载器/捆绑器构建的应用程序，例如 webpack、rollup.js 或 ESBuild。

安装

1
npm install esri-loader 

用法

有关如何使用 loadModules() 方法在任何框架中延迟加载任何版本的 GeoScene API For JavaScript 的更多详细信息，请参阅 esri-loader 使用文档。

使用 geoscene-js-api 在本地构建

您可以使用 geoscene-js-api npm 安装 AMD 模块。jsapi-resources GitHub 仓库中提供了相关示例和其他说明。

入门

将模块安装到工程中：

1
npm install geoscene-js-api 

配置 CSS

选择一个主题，然后将代码配置为使用 GeoScene 在线资源，例如：

index.html

1
<link rel="stylesheet" href="./../node_modules/geoscene-js-api/assets/geoscene/themes/dark/main.css"> 

或者，如果您正在使用本地资产，请参阅本地管理资产部分。

使用资产

对于大多数本地构建，API 的资产是在运行时从 GeoScene 在线资源 中提取的，无需进行其他配置。使用 CDN 的一个优点是 API CSS 样式不需要与本地构建捆绑在磁盘上。这些资产包括样式、图像、字体和本地化文件。此行为基于 config.assetsPath 的默认设置。

在本地管理资产

如果您需要在本地管理资产，则需要设置 esriConfig.assetsPaths 以确保正确解析模块路径。以下是 RequireJS 示例：

config.js

1
2
3
define(["geoscene/config"], function(geosceneConfig) {
    geosceneConfig.assetsPath = "../node_modules/geoscene-js-api/assets";
}); 

配置 AMD 以加载自定义模块

使用 GeoScene 在线资源 进行 AMD 开发时，您需要告知 AMD 加载程序在何处可以找到自定义模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
   // Regex to get the absolute URL of the application
   const locationPath = location.pathname.replace(/\/[^\/]+$/, "");

   window.dojoConfig = {
     packages: [
       {
         // Assign a name for the package
         name: "custom",
         // The directory containing the custom modules
         location: locationPath + "/custom/"
       }
     ]
   };
</script> 

然后，您可以使用以下模式在应用程序中添加自定义模块：/package/Module

index.html

1
require(["custom/MyWidget"], (MyWidget) => { ... }); 

dojoConfig 文档中提供了更多信息。

使用 webpack 在本地构建

对于 API 4.17 及更早版本，使用 webpack 在本地构建需要使用 @geoscene/webpack-plugin。请务必将 API 的版本与插件的版本同步。该插件在 webpack 构建过程中使用轻量级 AMD 加载器来解析模块路径。AMD 加载器不用于输出应用程序，它使用 GeoScene Maps SDK for JavaScript 创建捆绑包。

安装

安装插件：

1
npm install @geoscene/webpack-plugin 

然后使用 import 语句加载各个模块。

1
2
import Map from "geoscene/Map";
import MapView from "geoscene/views/MapView"; 

配置 Web 服务器

用于开发和托管 GeoScene Maps SDK for JavaScript 的 Web 服务器托管配置将需要特定的 MIME/type 注册。