跳到主要内容

圆绘制

DMap3D.drawing.circle 用于在场景中交互式绘制圆形。

引入​

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

基本用法​

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

// 创建圆绘制工具
const circleTool = new DMap3D.drawing.circle({ viewer })

// 开始绘制（左键点击圆心，移动鼠标确定半径，再次点击完成）
circleTool.draw((entity, center, radius) => {
  console.log('圆心:', center)
  console.log('半径:', radius, '米')
})

构造函数​

new DMap3D.drawing.circle(options)​

参数:

interface DrawCircleOptions {
  viewer: Cesium.Viewer       // Cesium Viewer 实例（必需）
  style?: {
    fillColor?: string        // 填充颜色，默认 '#33fc05'
    fillAlpha?: number        // 填充透明度，默认 0.3
    outlineColor?: string     // 边框颜色，默认 '#FBFB00'
    outlineWidth?: number     // 边框宽度，默认 2
    outlineAlpha?: number     // 边框透明度，默认 1.0
  }
  clampToGround?: boolean     // 是否贴地，默认 true
}

示例:

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

方法​

draw(callback?)​

开始绘制。左键点击确定圆心，移动鼠标调整半径，再次点击完成绘制。

circleTool.draw((entity, center, radius) => {
  console.log('圆实体:', entity)
  console.log('圆心:', center)
  console.log('半径:', radius, '米')
})

deactivate()​

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

circleTool.deactivate()

clear()​

清除所有已绘制的圆。

circleTool.clear()

setStyle(style)​

动态更新样式。

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

getEntities()​

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

const entities = circleTool.getEntities()

loadFromData(center, radius, callback?)​

从数据加载圆。

// 经纬度格式
circleTool.loadFromData([116.4074, 39.9042, 0], 500)

// Cartesian3 格式
circleTool.loadFromData(
  Cesium.Cartesian3.fromDegrees(116.4074, 39.9042),
  500 // 半径（米）
)

getIsActive()​

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

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

destroy()​

销毁工具并释放资源。

circleTool.destroy()

完整示例​

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
})

// 交互式绘制
circleTool.draw((entity, center, radius) => {
  console.log('圆绘制完成')
  console.log('半径:', radius.toFixed(2), '米')
})

// 从数据加载
circleTool.loadFromData([116.4074, 39.9042, 0], 1000)

// 修改样式
circleTool.setStyle({
  fillColor: '#FF0000',
  fillAlpha: 0.5
})

// 清除
circleTool.clear()

// 销毁
circleTool.destroy()

相关链接​