跳到主要内容

点绘制

DMap3D.drawing.point 用于在场景中交互式绘制点标记。

引入​

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

基本用法​

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

// 创建点绘制工具
const pointTool = new DMap3D.drawing.point({ viewer })

// 开始绘制（左键点击添加点）
pointTool.draw((entity, position) => {
  console.log('绘制了一个点:', position)
})

构造函数​

new DMap3D.drawing.point(options)​

参数:

interface DrawPointOptions {
  viewer: Cesium.Viewer     // Cesium Viewer 实例（必需）
  style?: {
    radius?: number         // 点半径，默认 10
    fillColor?: string      // 填充颜色，默认 '#FF0000'
    strokeColor?: string    // 描边颜色，默认 '#FFFFFF'
    fillAlpha?: number      // 填充透明度，默认 1.0
    strokeAlpha?: number    // 描边透明度，默认 1.0
    width?: number          // 描边宽度，默认 2
  }
  autoDestroy?: boolean     // 自动销毁，默认 true
}

示例:

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

方法​

draw(callback?)​

开始绘制。左键点击场景添加点，每次点击触发回调。

pointTool.draw((entity, position) => {
  console.log('点实体:', entity)
  console.log('点坐标:', position)
})

deactivate()​

停用绘制，保留已绘制的点。

pointTool.deactivate()

clear()​

清除所有已绘制的点。

pointTool.clear()

setStyle(style)​

动态更新样式。

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

getEntities()​

获取所有已绘制的实体数组。

const entities = pointTool.getEntities()
console.log('已绘制点数:', entities.length)

loadFromData(data, callback?)​

从数据加载点。支持多种数据格式。

// 单个点（经纬度数组）
pointTool.loadFromData([116.4074, 39.9042, 100])

// 多个点
pointTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200]
])

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

getIsActive()​

获取当前是否处于绘制状态。

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

destroy()​

销毁工具并释放资源。

pointTool.destroy()

完整示例​

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

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

// 交互式绘制
pointTool.draw((entity, position) => {
  const carto = Cesium.Cartographic.fromCartesian(position)
  console.log(`经度: ${Cesium.Math.toDegrees(carto.longitude).toFixed(6)}`)
  console.log(`纬度: ${Cesium.Math.toDegrees(carto.latitude).toFixed(6)}`)
})

// 从数据加载
pointTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200]
])

// 修改样式
pointTool.setStyle({ fillColor: '#00FF00' })

// 清除
pointTool.clear()

// 销毁
pointTool.destroy()

相关链接​