Skip to main content

Flatten Analysis Example

This example demonstrates how to flatten a region of a 3DTiles model using the DMap3D SDK.

Preview​

The user draws a polygon area on a 3DTiles model, and the model within that area is flattened to a specified height, with support for dynamic height adjustment.

Complete Code​

src/components/FlattenAnalysis.tsx
import { useEffect, useRef, useState } from 'react'
import * as Cesium from 'cesium'
import DMap3D from 'dmap3d'
import './FlattenAnalysis.css'

function FlattenAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const tilesetRef = useRef<Cesium.Cesium3DTileset | null>(null)
  const [isActive, setIsActive] = useState(false)
  const [height, setHeight] = useState(0)

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

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

    const viewer = new Cesium.Viewer(containerRef.current, {
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      infoBox: false,
      baseLayerPicker: false,
      terrain: Cesium.Terrain.fromWorldTerrain(),
    })
    viewerRef.current = viewer

    // Load 3DTiles model
    const loadTileset = async () => {
      const tileset = await Cesium.Cesium3DTileset.fromUrl(
        '/3DTiles/model/tileset.json'
      )
      viewer.scene.primitives.add(tileset)
      viewer.zoomTo(tileset)
      tilesetRef.current = tileset
    }
    loadTileset()

    // Create flatten tool
    const tool = new DMap3D.analysis.flattenAnalysis(viewer)
    toolRef.current = tool

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

  const handleStart = () => {
    const tool = toolRef.current
    const tileset = tilesetRef.current
    if (!tool || !tileset) return
    tool.activate(tileset, height)
    setIsActive(true)
  }

  const handleClear = () => {
    toolRef.current?.clear()
    setIsActive(false)
  }

  const handleHeightChange = (value: number) => {
    setHeight(value)
    if (isActive) {
      toolRef.current?.setHeight(value)
    }
  }

  return (
    <div className="flatten-analysis">
      <div ref={containerRef} className="cesium-container" />

      <div className="control-panel">
        <h3>Flatten Analysis</h3>
        <p>Draw an area on the 3DTiles model to flatten it</p>

        <div className="buttons">
          <button onClick={handleStart} disabled={isActive}>
            {isActive ? 'Activated' : 'Start Flatten'}
          </button>
          <button onClick={handleClear}>Clear</button>
        </div>

        <div className="settings">
          <div className="setting-item">
            <label>Flatten Height: {height} m</label>
            <input type="range" min="-50" max="50" value={height}
              onChange={(e) => handleHeightChange(Number(e.target.value))} />
          </div>
        </div>

        <div className="tip">
          <h4>Notes</h4>
          <ul>
            <li>A 3DTiles model must be loaded first</li>
            <li>Draw a polygon area to flatten automatically</li>
            <li>Height value is the offset relative to the polygon center</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default FlattenAnalysis

Stylesheet​

src/components/FlattenAnalysis.css
.flatten-analysis { position: relative; width: 100%; height: 100vh; }
.cesium-container { width: 100%; height: 100%; }

.control-panel {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255, 255, 255, 0.95); padding: 20px;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); min-width: 260px;
}
.control-panel h3 { margin: 0 0 10px 0; font-size: 18px; }
.control-panel p { margin: 0 0 15px 0; color: #666; font-size: 14px; }
.buttons { display: flex; gap: 10px; margin-bottom: 15px; }
.buttons button {
  flex: 1; padding: 8px 16px; border: none; border-radius: 4px;
  background: #1890ff; color: white; cursor: pointer; font-size: 14px;
}
.buttons button:hover { background: #40a9ff; }
.buttons button:disabled { background: #d9d9d9; cursor: not-allowed; }

.settings { border-top: 1px solid #e8e8e8; padding-top: 15px; margin-bottom: 15px; }
.setting-item label { display: block; font-size: 13px; color: #333; margin-bottom: 4px; }
.setting-item input[type="range"] { width: 100%; }

.tip { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.tip h4 { margin: 0 0 8px 0; font-size: 14px; color: #666; }
.tip ul { padding-left: 20px; margin: 0; }
.tip li { font-size: 13px; margin: 4px 0; color: #666; }

Key Code Explanation​

1. Create Flatten Tool​

const tool = new DMap3D.analysis.flattenAnalysis(viewer)

2. Activate Flattening​

// tileset: 3DTiles model instance
// height: Flatten height offset (meters)
tool.activate(tileset, height)

3. Dynamically Adjust Height​

tool.setHeight(10) // Positive value offsets up, negative value offsets down

4. Prerequisites​

Flatten analysis requires a loaded 3DTiles model:

const tileset = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/model/tileset.json')
viewer.scene.primitives.add(tileset)