使用 ES 模块构建

简介

ES 模块是一个官方的、标准化的模块系统，用于处理现代 JS，已被所有主要浏览器采用。GeoScene API for JavaScript 的 ES 模块可通过 @geoscene/core 从 npm 进行本地安装。

入门

将模块安装到您的项目中：

npm install @geoscene/core

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

// 默认导入
import WebMap from "@geoscene/core/WebMap";

// 命名空间导入
import * as projection from "@geoscene/core/geometry/projection";

每个模块的参考手册页面顶部都有关于使用哪种导入语法的指南：默认或命名空间。大多数模块使用默认的导入语法，如上面的 import WebMap 类示例所示。其他模块（例如，提供帮助程序函数的模块）使用类似于 import * as projection 示例的命名空间导入。根据您的风格偏好，还可以使用 named 导入来引用您需要的确切方法，而不是命名空间导入：

// 指定导入
import { load, project } from "@geoscene/core/geometry/projection";

而且，如果您认为可能存在变量命名冲突，也可使用别名。例如，许多类使用 load() 方法：

// 使用别名的指定导入
import { load as projectionLoad, project } from "@geoscene/core/geometry/projection";

无论您使用命名空间还是命名导入，Webpack 和 rollup.js 等模块捆绑器在涉及 treeshaking 时都会以相同的方式对待它们，这是删除未使用代码以创建最小、最有效的构建的过程。

配置 CSS

选择一个主题，然后配置您的代码以使用 GeoScene CDN，例如：

index.css

@import "https://js.geoscene.cn/4.23/@geoscene/core/assets/geoscene/themes/dark/main.css";

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

使用资产

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

在本地管理资产

如果您需要在本地管理资产，请将它们从 /node_modules/@geoscene/core/assets 复制到您的项目中，然后设置 config.assetsPath 以确保正确解析资产路径。实现此目的的一种简单方法是配置在构建过程中运行的 npm 脚本。比如使用 npm 安装 ncp，在 package.json 中配置一个脚本来复制文件夹。以下是一个 React 示例：

package.json

{
  "script": {
    "start": "npm run copy && react-scripts start",
    "build": "npm run copy && react-scripts build",
    "copy": "ncp ./node_modules/@geoscene/core/assets ./public/assets"
  }
}

App.js

import geosceneConfig from "@geoscene/core/config.js";
geosceneConfig.assetsPath = "./assets";

index.css

@import "@geoscene/core/assets/geoscene/themes/dark/main.css";

配置 web 服务器

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

使用 ESM CDN

ES 模块 CDN 仅用于测试，并未针对性能进行优化。要在生产应用程序中获得最佳性能，请使用 @geoscene/core 在本地构建 ES 模块。这是一个简单的 HTML 和 JavaScript 示例：@geoscene/core

index.html

<link rel="stylesheet" href="https://js.geoscene.cn/4.23/@geoscene/core/assets/geoscene/themes/light/main.css">

<script type="module">
  import WebMap from 'https://js.gesoscene.cn/4.23/@geoscene/core/WebMap.js';
</script>

上一主题工具简介下一主题使用 AMD 模块构建