Skip to main content

Hello World

This example demonstrates how to create a basic 3D globe scene using the DMap3D SDK.

Preview​

Create a 3D globe with a Tianditu basemap, with the initial view positioned over Beijing.

Complete Code​

src/components/HelloWorld.tsx
import { useEffect, useRef } from 'react'
import * as Cesium from 'cesium'
import './HelloWorld.css'

function HelloWorld() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    // Set Ion Token
    Cesium.Ion.defaultAccessToken = 'your-cesium-ion-token'

    // Create Viewer
    const viewer = new Cesium.Viewer(containerRef.current, {
      animation: false,          // Hide animation widget
      fullscreenButton: false,   // Hide fullscreen button
      geocoder: false,           // Hide geocoder search
      homeButton: false,         // Hide Home button
      sceneModePicker: false,    // Hide scene mode picker
      selectionIndicator: false, // Hide selection indicator
      timeline: false,           // Hide timeline
      navigationHelpButton: false,
      infoBox: false,
      baseLayerPicker: false,
      // Use Tianditu basemap
      baseLayer: Cesium.ImageryLayer.fromProviderAsync(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'https://t0.tianditu.gov.cn/img_w/wmts?tk=YOUR_TIANDITU_TOKEN',
          layer: 'img',
          style: 'default',
          tileMatrixSetID: 'w',
          format: 'tiles',
          maximumLevel: 18,
        })
      ),
      terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
    })
    viewerRef.current = viewer

    // Set initial view (Beijing)
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 1000000.0),
    })

    return () => {
      viewer.destroy()
    }
  }, [])

  return (
    <div className="hello-world">
      <div ref={containerRef} className="cesium-container" />
    </div>
  )
}

export default HelloWorld

Stylesheet​

src/components/HelloWorld.css
.hello-world {
  position: relative;
  width: 100%;
  height: 100vh;
}

.cesium-container {
  width: 100%;
  height: 100%;
}

Key Code Explanation​

1. Set Ion Token​

Cesium.Ion.defaultAccessToken = 'your-cesium-ion-token'

Cesium Ion provides online data services such as terrain and imagery. You need to register at Cesium Ion to obtain a Token.

2. Create Viewer​

const viewer = new Cesium.Viewer(containerRef.current, {
  animation: false,       // Disable unnecessary UI components
  timeline: false,
  baseLayerPicker: false,
  // ...
})

Viewer is the core class of Cesium, responsible for rendering 3D scenes. You can control which UI components are displayed through configuration options.

3. Use Tianditu Basemap​

baseLayer: Cesium.ImageryLayer.fromProviderAsync(
  new Cesium.WebMapTileServiceImageryProvider({
    url: 'https://t0.tianditu.gov.cn/img_w/wmts?tk=YOUR_TOKEN',
    layer: 'img',
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    maximumLevel: 18,
  })
)

Uses the Tianditu WMTS service as the basemap. You need to register at the Tianditu website to obtain a Token.

4. Set Initial View​

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 1000000.0),
})

Positions the camera's initial location using longitude, latitude, and altitude (in meters). This positions the view 1000 km above Beijing.

Extended Features​

  1. Switch Basemap - Use different imagery services (Tianditu vector, satellite, annotation layers)
  2. Add Terrain - Load global terrain using Cesium.Terrain.fromWorldTerrain()
  3. Scene Mode Switch - Support switching between 2D, 2.5D, and 3D views
  4. Custom UI - Overlay custom control panels on the Viewer