Skip to main content

Point Drawing

DMap3D.drawing.point is used to interactively draw point markers in the scene.

Import​

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

Basic Usage​

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

// Create point drawing tool
const pointTool = new DMap3D.drawing.point({ viewer })

// Start drawing (left-click to add points)
pointTool.draw((entity, position) => {
  console.log('Drew a point:', position)
})

Constructor​

new DMap3D.drawing.point(options)​

Parameters:

interface DrawPointOptions {
  viewer: Cesium.Viewer     // Cesium Viewer instance (required)
  style?: {
    radius?: number         // Point radius, default 10
    fillColor?: string      // Fill color, default '#FF0000'
    strokeColor?: string    // Stroke color, default '#FFFFFF'
    fillAlpha?: number      // Fill opacity, default 1.0
    strokeAlpha?: number    // Stroke opacity, default 1.0
    width?: number          // Stroke width, default 2
  }
  autoDestroy?: boolean     // Auto destroy, default true
}

Example:

const pointTool = new DMap3D.drawing.point({
  viewer,
  style: {
    radius: 12,
    fillColor: '#00FF00',
    strokeColor: '#000000',
    fillAlpha: 0.8,
    width: 3
  }
})

Methods​

draw(callback?)​

Start drawing. Left-click the scene to add points, each click triggers the callback.

pointTool.draw((entity, position) => {
  console.log('Point entity:', entity)
  console.log('Point coordinate:', position)
})

deactivate()​

Deactivate drawing, keeping drawn points.

pointTool.deactivate()

clear()​

Clear all drawn points.

pointTool.clear()

setStyle(style)​

Dynamically update style.

pointTool.setStyle({
  fillColor: '#0000FF',
  radius: 15
})

getEntities()​

Get all drawn entity arrays.

const entities = pointTool.getEntities()
console.log('Drawn point count:', entities.length)

loadFromData(data, callback?)​

Load points from data. Supports multiple data formats.

// Single point (longitude/latitude array)
pointTool.loadFromData([116.4074, 39.9042, 100])

// Multiple points
pointTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200]
])

// Cartesian3 format
pointTool.loadFromData(Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 100))

getIsActive()​

Get whether currently in drawing state.

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

destroy()​

Destroy the tool and release resources.

pointTool.destroy()

Complete Example​

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

const pointTool = new DMap3D.drawing.point({
  viewer,
  style: {
    radius: 12,
    fillColor: '#FF0000',
    strokeColor: '#FFFFFF',
    width: 2
  }
})

// Interactive drawing
pointTool.draw((entity, position) => {
  const carto = Cesium.Cartographic.fromCartesian(position)
  console.log(`Longitude: ${Cesium.Math.toDegrees(carto.longitude).toFixed(6)}`)
  console.log(`Latitude: ${Cesium.Math.toDegrees(carto.latitude).toFixed(6)}`)
})

// Load from data
pointTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200]
])

// Update style
pointTool.setStyle({ fillColor: '#00FF00' })

// Clear
pointTool.clear()

// Destroy
pointTool.destroy()