Skip to main content

Polygon Drawing

DMap3D.drawing.polygon is used to interactively draw polygons in the scene.

Import​

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

Basic Usage​

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

// Create polygon drawing tool
const polygonTool = new DMap3D.drawing.polygon({ viewer })

// Start drawing (left-click to add vertices, right-click to finish)
polygonTool.draw((entity, positions) => {
  console.log('Polygon drawing complete, vertex count:', positions.length)
})

Constructor​

new DMap3D.drawing.polygon(options)​

Parameters:

interface DrawPolygonOptions {
  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 polygonTool = new DMap3D.drawing.polygon({
  viewer,
  style: {
    fillColor: '#0000FF',
    fillAlpha: 0.4,
    outlineColor: '#FFFFFF',
    outlineWidth: 3
  },
  clampToGround: true
})

Methods​

draw(callback?)​

Start drawing. Left-click to add vertices, right-click to finish drawing (auto-close).

polygonTool.draw((entity, positions) => {
  console.log('Polygon entity:', entity)
  console.log('Vertex coordinates:', positions)
})

deactivate()​

Deactivate drawing, keeping drawn polygons.

polygonTool.deactivate()

clear()​

Clear all drawn polygons.

polygonTool.clear()

setStyle(style)​

Dynamically update style.

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

getEntities()​

Get all drawn entity arrays.

const entities = polygonTool.getEntities()

loadFromData(positions, callback?)​

Load polygons from data.

// Longitude/latitude array format
polygonTool.loadFromData([
  [116.39, 39.90],
  [116.41, 39.90],
  [116.41, 39.92],
  [116.39, 39.92]
])

// Cartesian3 array format
polygonTool.loadFromData([
  Cesium.Cartesian3.fromDegrees(116.39, 39.90),
  Cesium.Cartesian3.fromDegrees(116.41, 39.90),
  Cesium.Cartesian3.fromDegrees(116.41, 39.92),
  Cesium.Cartesian3.fromDegrees(116.39, 39.92)
])

getIsActive()​

Get whether currently in drawing state.

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

destroy()​

Destroy the tool and release resources.

polygonTool.destroy()

Complete Example​

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

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

// Interactive drawing
polygonTool.draw((entity, positions) => {
  console.log('Polygon drawing complete')
  console.log('Vertex count:', positions.length)
})

// Load from data
polygonTool.loadFromData([
  [116.39, 39.90],
  [116.41, 39.90],
  [116.41, 39.92],
  [116.39, 39.92]
])

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

// Clear
polygonTool.clear()

// Destroy
polygonTool.destroy()