绘制功能

BicMap 提供交互式绘制工具，用户可在地图上实时绘制多边形、折线、矩形和圆形。

多边形绘制

const ctrl = bicMap.enablePolygonDrawing(map, options)

options 参数

参数	类型	默认值	说明
fillColor	string	'#4CAF50'	填充颜色
fillOpacity	number	0.3	填充透明度（0–1）
lineColor	string	'#2E7D32'	边框颜色
lineWidth	number	3	边框宽度（像素）
pointColor	string	'#FF5722'	顶点颜色
pointRadius	number	6	顶点半径（像素）
enableTouch	boolean	true	是否支持触摸操作（移动端）
minPoints	number	3	最少顶点数量
onDrawComplete	function	null	绘制完成回调 (polygon, info) => {}
onDrawStart	function	null	开始绘制回调
onDrawUpdate	function	null	绘制过程中实时回调 (points) => {}

onDrawComplete 回调参数：

• polygon — GeoJSON 多边形对象
• info.area — 面积（平方公里）
• info.perimeter — 周长（公里）
• info.center — 中心点坐标

示例

const drawingCtrl = bicMap.enablePolygonDrawing(map, {
  fillColor: '#4CAF50',
  fillOpacity: 0.3,
  lineColor: '#2E7D32',
  lineWidth: 3,
  onDrawComplete: (polygon, info) => {
    console.log('绘制完成:', polygon)
    console.log(`面积: ${info.area.toFixed(4)} km²`)
    console.log(`周长: ${info.perimeter.toFixed(4)} km`)
  },
  onDrawStart: () => {
    console.log('开始绘制')
  }
})

drawingCtrl.finishDrawing()   // 完成当前绘制
drawingCtrl.clearDrawing()    // 清除绘制
drawingCtrl.disable()         // 禁用绘制工具

---

折线绘制

const ctrl = bicMap.enablePolylineDrawing(map, options)

options 参数（额外）

参数	类型	默认值	说明
defaultWidth	number	20	默认宽度（米），用于宽度编辑
minPoints	number	2	最少顶点数
onDrawComplete	function	null	完成回调 (polylineData) => {}

示例

const ctrl = bicMap.enablePolylineDrawing(map, {
  fillColor: '#3388ff',
  lineColor: '#2266cc',
  lineWidth: 2,
  defaultWidth: 20,
  onDrawComplete: (polylineData) => {
    console.log('折线绘制完成:', polylineData)
  }
})

ctrl.setWidth(30)       // 设置宽度（米）
ctrl.finishDrawing()    // 完成绘制
ctrl.clearDrawing()     // 清除
ctrl.disable()          // 禁用

---

矩形绘制

const ctrl = bicMap.enableRectangleDrawing(map, options)

示例

const ctrl = bicMap.enableRectangleDrawing(map, {
  fillColor: '#4CAF50',
  fillOpacity: 0.3,
  lineColor: '#2E7D32',
  lineWidth: 3,
  onDrawComplete: (rectangle, corners) => {
    console.log('矩形绘制完成:', rectangle)
    console.log('四个角点:', corners)  // [[sw], [se], [ne], [nw]]
  }
})

ctrl.finishDrawing()
ctrl.clearDrawing()
ctrl.disable()

---

圆形绘制

const ctrl = bicMap.enableCircleDrawing(map, options)

示例

const ctrl = bicMap.enableCircleDrawing(map, {
  fillColor: '#2196F3',
  fillOpacity: 0.25,
  lineColor: '#1565C0',
  lineWidth: 2,
  onDrawComplete: (circle, info) => {
    console.log('圆形绘制完成, 半径:', info.radius, '公里')
  }
})

---

通用控制器方法

所有绘制类型返回的控制器均包含以下方法：

方法	说明
finishDrawing()	完成当前绘制（等同于双击结束）
clearDrawing()	清除当前绘制的图形
disable()	禁用绘制模式，还原地图交互