跳到主要内容

多边形绘制

DMap3D.drawing.polygon 用于在场景中交互式绘制多边形。

引入​

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

基本用法​

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

// 创建多边形绘制工具
const polygonTool = new DMap3D.drawing.polygon({ viewer })

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

构造函数​

new DMap3D.drawing.polygon(options)​

参数:

interface DrawPolygonOptions {
  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 polygonTool = new DMap3D.drawing.polygon({
  viewer,
  style: {
    fillColor: '#0000FF',
    fillAlpha: 0.4,
    outlineColor: '#FFFFFF',
    outlineWidth: 3
  },
  clampToGround: true
})

方法​

draw(callback?)​

开始绘制。左键点击添加顶点，右键完成绘制（自动闭合）。

polygonTool.draw((entity, positions) => {
  console.log('多边形实体:', entity)
  console.log('顶点坐标:', positions)
})

deactivate()​

停用绘制，保留已绘制的多边形。

polygonTool.deactivate()

clear()​

清除所有已绘制的多边形。

polygonTool.clear()

setStyle(style)​

动态更新样式。

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

getEntities()​

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

const entities = polygonTool.getEntities()

loadFromData(positions, callback?)​

从数据加载多边形。

// 经纬度数组格式
polygonTool.loadFromData([
  [116.39, 39.90],
  [116.41, 39.90],
  [116.41, 39.92],
  [116.39, 39.92]
])

// Cartesian3 数组格式
polygonTool.loadFromData([
  Cesium.Cartesian3.fromDegrees(116.39, 39.90),
  Cesium.Cartesian3.fromDegrees(116.41, 39.90),
  Cesium.Cartesian3.fromDegrees(116.41, 39.92),
  Cesium.Cartesian3.fromDegrees(116.39, 39.92)
])

getIsActive()​

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

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

destroy()​

销毁工具并释放资源。

polygonTool.destroy()

完整示例​

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

const polygonTool = new DMap3D.drawing.polygon({
  viewer,
  style: {
    fillColor: '#0000FF',
    fillAlpha: 0.3,
    outlineColor: '#FFFFFF',
    outlineWidth: 2
  },
  clampToGround: true
})

// 交互式绘制
polygonTool.draw((entity, positions) => {
  console.log('多边形绘制完成')
  console.log('顶点数:', positions.length)
})

// 从数据加载
polygonTool.loadFromData([
  [116.39, 39.90],
  [116.41, 39.90],
  [116.41, 39.92],
  [116.39, 39.92]
])

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

// 清除
polygonTool.clear()

// 销毁
polygonTool.destroy()

相关链接​