Skip to main content

Line Drawing

DMap3D.drawing.polyline is used to interactively draw polylines in the scene.

Import​

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

Basic Usage​

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

// Create line drawing tool
const lineTool = new DMap3D.drawing.polyline({ viewer })

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

Constructor​

new DMap3D.drawing.polyline(options)​

Parameters:

interface DrawPolylineOptions {
  viewer: Cesium.Viewer    // Cesium Viewer instance (required)
  style?: {
    width?: number         // Line width, default 3
    color?: string         // Line color, default '#FF0000'
    alpha?: number         // Opacity, default 1.0
  }
  clampToGround?: boolean  // Whether to clamp to ground, default false
}

Example:

const lineTool = new DMap3D.drawing.polyline({
  viewer,
  style: {
    width: 5,
    color: '#00FFFF',
    alpha: 0.8
  },
  clampToGround: true
})

Methods​

draw(callback?)​

Start drawing. Left-click to add vertices, right-click to finish drawing.

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

deactivate()​

Deactivate drawing, keeping drawn lines.

lineTool.deactivate()

clear()​

Clear all drawn lines.

lineTool.clear()

setStyle(style)​

Dynamically update style.

lineTool.setStyle({
  color: '#00FF00',
  width: 4
})

getEntities()​

Get all drawn entity arrays.

const entities = lineTool.getEntities()

loadFromData(positions, callback?)​

Load lines from data.

// Longitude/latitude array format
lineTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200],
  [116.4274, 39.9042, 150]
])

// Cartesian3 array format
lineTool.loadFromData([
  Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 100),
  Cesium.Cartesian3.fromDegrees(116.4174, 39.9142, 200)
])

getIsActive()​

Get whether currently in drawing state.

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

destroy()​

Destroy the tool and release resources.

lineTool.destroy()

Complete Example​

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

const lineTool = new DMap3D.drawing.polyline({
  viewer,
  style: { width: 4, color: '#FF0000' },
  clampToGround: true
})

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

// Load from data
lineTool.loadFromData([
  [116.39, 39.90, 0],
  [116.40, 39.91, 0],
  [116.41, 39.90, 0]
])

// Update style
lineTool.setStyle({ color: '#00FF00', width: 6 })

// Clear
lineTool.clear()

// Destroy
lineTool.destroy()