Skip to main content

Circle Drawing

DMap3D.drawing.circle is used to interactively draw circles in the scene.

Import​

import DMap3D from 'dmap3d'
import * as Cesium from 'cesium'

Basic Usage​

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

// Create circle drawing tool
const circleTool = new DMap3D.drawing.circle({ viewer })

// Start drawing (left-click for center, move mouse to set radius, click again to finish)
circleTool.draw((entity, center, radius) => {
  console.log('Center:', center)
  console.log('Radius:', radius, 'meters')
})

Constructor​

new DMap3D.drawing.circle(options)​

Parameters:

interface DrawCircleOptions {
  viewer: Cesium.Viewer       // Cesium Viewer instance (required)
  style?: {
    fillColor?: string        // Fill color, default '#33fc05'
    fillAlpha?: number        // Fill opacity, default 0.3
    outlineColor?: string     // Outline color, default '#FBFB00'
    outlineWidth?: number     // Outline width, default 2
    outlineAlpha?: number     // Outline opacity, default 1.0
  }
  clampToGround?: boolean     // Whether to clamp to ground, default true
}

Example:

const circleTool = new DMap3D.drawing.circle({
  viewer,
  style: {
    fillColor: '#0000FF',
    fillAlpha: 0.4,
    outlineColor: '#FFFFFF',
    outlineWidth: 3
  },
  clampToGround: true
})

Methods​

draw(callback?)​

Start drawing. Left-click to set the center, move the mouse to adjust the radius, and click again to finish drawing.

circleTool.draw((entity, center, radius) => {
  console.log('Circle entity:', entity)
  console.log('Center:', center)
  console.log('Radius:', radius, 'meters')
})

deactivate()​

Deactivate drawing, keeping drawn circles.

circleTool.deactivate()

clear()​

Clear all drawn circles.

circleTool.clear()

setStyle(style)​

Dynamically update style.

circleTool.setStyle({
  fillColor: '#FF0000',
  fillAlpha: 0.5,
  outlineColor: '#FFFF00'
})

getEntities()​

Get all drawn entity arrays.

const entities = circleTool.getEntities()

loadFromData(center, radius, callback?)​

Load circles from data.

// Longitude/latitude format
circleTool.loadFromData([116.4074, 39.9042, 0], 500)

// Cartesian3 format
circleTool.loadFromData(
  Cesium.Cartesian3.fromDegrees(116.4074, 39.9042),
  500 // Radius (meters)
)

getIsActive()​

Get whether currently in drawing state.

if (circleTool.getIsActive()) {
  circleTool.deactivate()
}

destroy()​

Destroy the tool and release resources.

circleTool.destroy()

Complete Example​

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

const circleTool = new DMap3D.drawing.circle({
  viewer,
  style: {
    fillColor: '#0000FF',
    fillAlpha: 0.3,
    outlineColor: '#FFFFFF',
    outlineWidth: 2
  },
  clampToGround: true
})

// Interactive drawing
circleTool.draw((entity, center, radius) => {
  console.log('Circle drawing complete')
  console.log('Radius:', radius.toFixed(2), 'meters')
})

// Load from data
circleTool.loadFromData([116.4074, 39.9042, 0], 1000)

// Update style
circleTool.setStyle({
  fillColor: '#FF0000',
  fillAlpha: 0.5
})

// Clear
circleTool.clear()

// Destroy
circleTool.destroy()