跳到主要内容

线绘制

DMap3D.drawing.polyline 用于在场景中交互式绘制折线。

引入​

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

基本用法​

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

// 创建线绘制工具
const lineTool = new DMap3D.drawing.polyline({ viewer })

// 开始绘制（左键添加点，右键完成）
lineTool.draw((entity, positions) => {
  console.log('绘制完成，顶点数:', positions.length)
})

构造函数​

new DMap3D.drawing.polyline(options)​

参数:

interface DrawPolylineOptions {
  viewer: Cesium.Viewer    // Cesium Viewer 实例（必需）
  style?: {
    width?: number         // 线宽，默认 3
    color?: string         // 线条颜色，默认 '#FF0000'
    alpha?: number         // 透明度，默认 1.0
  }
  clampToGround?: boolean  // 是否贴地，默认 false
}

示例:

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

方法​

draw(callback?)​

开始绘制。左键点击添加顶点，右键完成绘制。

lineTool.draw((entity, positions) => {
  console.log('线实体:', entity)
  console.log('顶点坐标:', positions)
})

deactivate()​

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

lineTool.deactivate()

clear()​

清除所有已绘制的线。

lineTool.clear()

setStyle(style)​

动态更新样式。

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

getEntities()​

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

const entities = lineTool.getEntities()

loadFromData(positions, callback?)​

从数据加载线。

// 经纬度数组格式
lineTool.loadFromData([
  [116.4074, 39.9042, 100],
  [116.4174, 39.9142, 200],
  [116.4274, 39.9042, 150]
])

// Cartesian3 数组格式
lineTool.loadFromData([
  Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 100),
  Cesium.Cartesian3.fromDegrees(116.4174, 39.9142, 200)
])

getIsActive()​

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

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

destroy()​

销毁工具并释放资源。

lineTool.destroy()

完整示例​

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

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

// 交互式绘制
lineTool.draw((entity, positions) => {
  console.log('线段绘制完成')
  console.log('顶点数:', positions.length)
})

// 从数据加载
lineTool.loadFromData([
  [116.39, 39.90, 0],
  [116.40, 39.91, 0],
  [116.41, 39.90, 0]
])

// 修改样式
lineTool.setStyle({ color: '#00FF00', width: 6 })

// 清除
lineTool.clear()

// 销毁
lineTool.destroy()

相关链接​