要素功能

静态要素用于在地图上展示已有的几何数据，支持高亮、编辑和动态更新。

多边形要素

const ctrl = bicMap.createPolygons(map, polygons, options)

polygons 数据结构

const polygons = [
  {
    id: 'polygon-1',
    points: [[lng1, lat1], [lng2, lat2], [lng3, lat3]],
    fillColor: '#4CAF50',
    outlineColor: '#2E7D32',
    fillOpacity: 0.6,
    outlineWidth: 2,
    filled: true
  }
]

控制器方法

const ctrl = bicMap.createPolygons(map, polygons, {
  highlightColor: '#ff6600',
  filled: true
})

ctrl.addPolygon(data)            // 添加多边形，返回新 ID
ctrl.removePolygon(id)           // 移除
ctrl.updatePolygon(id, data)     // 更新
ctrl.togglePolygonFilled(id)     // 切换填充状态
ctrl.setAllFilled(true)          // 设置所有多边形填充状态
ctrl.highlightPolygon(id)        // 高亮
ctrl.clearHighlights()           // 清除高亮
ctrl.show()                      // 显示所有
ctrl.hide()                      // 隐藏所有
ctrl.getPolygonData(id)          // 获取单个数据
ctrl.getAllPolygons()             // 获取所有数据
ctrl.getPolygonIds()             // 获取所有 ID
ctrl.remove()                    // 销毁控制器

多边形编辑模式

支持拖拽顶点动态修改形状，带实时坐标回调。

// 进入编辑模式
ctrl.enterEditMode('polygon-0', {
  onEditStart: (data) => {
    console.log('开始编辑:', data.polygonId, '初始坐标:', data.points)
  },
  onEditUpdate: (data) => {
    // 高频触发，建议做防抖处理
    console.log('坐标更新:', data.points)
    console.log('拖拽顶点索引:', data.changedPointIndex)
  },
  onEditEnd: (data) => {
    console.log('编辑完成，最终坐标:', data.finalPoints)
    saveToServer(data.polygonId, data.finalPoints)
  }
})

// 编辑状态查询
ctrl.isEditMode()                  // 是否在编辑模式
ctrl.getSelectedPolygonId()        // 当前编辑的多边形 ID
ctrl.getEditPoints()               // 当前编辑坐标点
ctrl.getEditData()                 // 完整编辑状态数据

// 退出编辑模式
ctrl.exitEditMode()

注意事项

• 同时只能编辑一个多边形
• onEditUpdate 在拖拽过程中会高频触发，建议防抖
• 组件卸载时会自动退出编辑模式

---

矩形要素

const ctrl = bicMap.createRectangles(map, rectangles, options)

rectangles 数据结构

const rectangles = [
  {
    id: 'rect-1',
    coordinates: [
      [swLng, swLat],  // 西南角
      [neLng, neLat]   // 东北角
    ],
    fillColor: '#4CAF50',
    outlineColor: '#2E7D32',
    fillOpacity: 0.6
  }
]

控制器方法与多边形类似（addRectangle / removeRectangle / updateRectangle 等）。

---

线段要素

const ctrl = bicMap.createPolylines(map, polylines, options)

polylines 数据结构

const polylines = [
  {
    path: [[lng1, lat1], [lng2, lat2]],
    color: '#3388ff',
    width: 3,
    opacity: 0.8,
    dashType: 'solid',   // 'solid' | 'dashed' | 'dotted' | 'dashdot'
    showArrow: false,
    arrowSize: 1,
    arrowSpacing: 50,
    name: '路径 1'
  }
]

const ctrl = bicMap.createPolylines(map, polylines, {
  onClick: (feature) => {
    console.log('线段点击:', feature.properties)
  }
})

ctrl.update(newPolylines)               // 批量更新
ctrl.clear()                            // 清除所有
ctrl.updateArrowSize(1.5)              // 更新所有箭头大小
ctrl.updatePolylineArrowSize(id, 2.0)  // 更新单条箭头大小
ctrl.remove()

---

宽线段要素

用于展示具有宽度的路径（如行驶轨道、可通行区域边界）。

const ctrl = bicMap.createWideLines(map, wideLines, options)

wideLines 数据结构

const wideLines = [
  {
    id: 'highway-1',
    path: [[lng1, lat1], [lng2, lat2], [lng3, lat3]],
    color: '#3388ff',
    width: 20,           // 宽度（米）
    opacity: 0.8,
    outlineColor: '#2266cc',
    outlineWidth: 2,
    name: '主干道'
  }
]

性能建议

推荐使用单个操作方法（addWideLine / updateWideLine / removeWideLine），性能优于 update() 批量更新。

const ctrl = bicMap.createWideLines(map, wideLines, {
  showOutline: true,
  onClick: (feature) => console.log(feature.properties)
})

// 单条操作（推荐）
ctrl.addWideLine({ id: 'new-line', path: [...], color: '#e74c3c', width: 25 })
ctrl.updateWideLine('highway-1', { color: '#f39c12', width: 30 })
ctrl.removeWideLine('street-1')

// 批量操作
ctrl.clear()
ctrl.remove()

// 高亮
ctrl.highlightWideLine('highway-1')
ctrl.clearHighlights()
ctrl.show()
ctrl.hide()

宽线段编辑模式

ctrl.enterEditMode('highway-1', {
  onEditStart: (data) => console.log('开始编辑:', data.widelineId),
  onEditUpdate: (data) => console.log('更新:', data.points),
  onEditEnd: (data) => saveWidelineCoords(data.widelineId, data.points)
})

ctrl.exitEditMode()
ctrl.isEditMode()
ctrl.getEditPoints()
ctrl.getEditData()