安装指南
本指南将帮助你快速安装和配置 DMap3D SDK。
环境要求
- Node.js >= 16（npm 方式）
- 现代浏览器（Chrome >= 90、Firefox >= 90、Safari >= 15、Edge >= 90）
- Cesium >= 1.112.0
方式一：npm 安装（推荐）
适用于使用 Vite、Webpack 等构建工具的项目。
安装
npm install dmap3d cesium
或使用 yarn / pnpm：
yarn add dmap3d cesium
# 或
pnpm add dmap3d cesium
使用
import { DMap3D } from 'dmap3d'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
// 创建 Viewer
const viewer = new Cesium.Viewer('cesiumContainer')
// 面积测量
const areaTool = new DMap3D.measurement.area(viewer)
areaTool.activate()
// 通视分析
const viewshedTool = new DMap3D.analysis.viewshed(viewer)
viewshedTool.activate()
// 点标绘
const pointTool = new DMap3D.drawing.point({ viewer })
pointTool.draw()
Vite 项目配置
如果使用 Vite，推荐安装 vite-plugin-cesium 简化 Cesium 资源配置：
npm install vite-plugin-cesium -D
// vite.config.ts
import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium'
export default defineConfig({
plugins: [cesium()]
})
提示
vite-plugin-cesium 会自动处理 Cesium 的静态资源（Workers、Assets、Widgets）复制，无需手动配置。
方式二：CDN / UMD 引入
适用于不使用构建工具的项目，通过 <script> 标签直接引入。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DMap3D 应用</title>
<!-- 1. 引入 Cesium -->
<script src="https://unpkg.com/cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cesium/Build/Cesium/Widgets/widgets.css">
<!-- 2. 引入 DMap3D SDK -->
<script src="https://unpkg.com/dmap3d/dmap3d.umd.cjs"></script>
<style>
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
const viewer = new Cesium.Viewer('cesiumContainer')
// 使用 DMap3D 工具
const { DMap3D } = window.DMap3D
const areaTool = new DMap3D.measurement.area(viewer)
areaTool.activate()
</script>
</body>
</html>
提示
DMap3D UMD 文件需要在 Cesium 之后加载，因为 SDK 依赖 Cesium 全局变量。
功能模块一览
安装完成后，你可以使用以下所有模块：
| 模块 | 命名空间 | 工具数量 | 说明 |
|---|---|---|---|
| 测量工具 | DMap3D.measurement | 10 | 距离、面积、高度、角度、坡度、方位角 |
| 分析工具 | DMap3D.analysis | 11 | 可视域、等高线、剖面、天际线、缓冲区等 |
| 绘制工具 | DMap3D.drawing | 4 | 点、线、面、圆 |
| 军事标绘 | DMap3D.military | 14 | 箭头、旗标、战术区域 |
| 底图服务 | DMap3D.basemap | 4 | XYZ、WMTS、WMS、GeoJSON |
| 地形 | DMap3D.terrain | 6 | Cesium Ion、ArcGIS、自定义地形 |
| 3D瓦片 | DMap3D.tiles3d | 1 | 倾斜摄影、BIM、点云 |
验证安装
在浏览器控制台中输入以下内容验证是否加载成功：
console.log('Cesium version:', Cesium.VERSION)
console.log('DMap3D loaded:', !!window.DMap3D)