Skip to main content

Installation Guide

This guide will help you quickly install and configure the DMap3D SDK.

Requirements​

  • Node.js >= 16 (for npm method)
  • Modern browser (Chrome >= 90, Firefox >= 90, Safari >= 15, Edge >= 90)
  • Cesium >= 1.112.0

Suitable for projects using build tools like Vite or Webpack.

Installation​

npm install dmap3d cesium

Or using yarn / pnpm:

yarn add dmap3d cesium
# or
pnpm add dmap3d cesium

Usage​

import { DMap3D } from 'dmap3d'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

// Create Viewer
const viewer = new Cesium.Viewer('cesiumContainer')

// Area measurement
const areaTool = new DMap3D.measurement.area(viewer)
areaTool.activate()

// Viewshed analysis
const viewshedTool = new DMap3D.analysis.viewshed(viewer)
viewshedTool.activate()

// Point drawing
const pointTool = new DMap3D.drawing.point({ viewer })
pointTool.draw()

Vite Project Configuration​

If using Vite, it is recommended to install vite-plugin-cesium to simplify Cesium resource configuration:

npm install vite-plugin-cesium -D
// vite.config.ts
import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [cesium()]
})
tip

vite-plugin-cesium automatically handles the copying of Cesium static resources (Workers, Assets, Widgets), so no manual configuration is needed.

Method 2: CDN / UMD Import​

Suitable for projects that do not use build tools, imported directly via <script> tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DMap3D Application</title>

  <!-- 1. Include 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. Include 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')

    // Use DMap3D tools
    const { DMap3D } = window.DMap3D
    const areaTool = new DMap3D.measurement.area(viewer)
    areaTool.activate()
  </script>
</body>
</html>
tip

The DMap3D UMD file must be loaded after Cesium, because the SDK depends on the Cesium global variable.

Module Overview​

After installation, you can use all the following modules:

ModuleNamespaceTool CountDescription
Measurement ToolsDMap3D.measurement10Distance, area, height, angle, slope, azimuth
Analysis ToolsDMap3D.analysis11Viewshed, contour lines, profile, skyline, buffer, etc.
Drawing ToolsDMap3D.drawing4Point, line, polygon, circle
Military PlottingDMap3D.military14Arrows, flags, tactical areas
Basemap ServicesDMap3D.basemap4XYZ, WMTS, WMS, GeoJSON
TerrainDMap3D.terrain6Cesium Ion, ArcGIS, custom terrain
3D TilesDMap3D.tiles3d1Oblique photography, BIM, point clouds

Verify Installation​

Enter the following in the browser console to verify successful loading:

console.log('Cesium version:', Cesium.VERSION)
console.log('DMap3D loaded:', !!window.DMap3D)

Next Steps​