使用 AMD 模块构建

简介

建议使用 GeoScene API for JavaScript 的 AMD 模块来使用 Dojo 1 和 RequireJS 进行本地构建。

• 可使用 geoscene-js-api 通过 npm 在本地安装这些模块。
• 支持使用 @arcgis/webpack-plugin 通过 webpack 在本地构建模块。
• 可以使用 esri-loader 帮助程序库从 CDN 延迟加载模块。

安装

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 CDN，例如：

index.html

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

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

使用资产

对于大多数本地构建，API 的资产在运行时从 GeoScene CDN 中提取，无需额外配置。这些资产包括样式、图像、字体和本地化文件。此行为基于 config.assetsPath 的默认设置。

在本地管理资产

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

config.js

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

使用 webpack 在本地构建

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

安装

安装插件：

1
npm install @geoscene/webpack-plugin

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

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

配置 web 服务器

开发和托管 GeoScene API for JavaScript 的 Web 服务器托管配置需要特定的 MIME/类型注册。