标记功能

BicMap 提供三种标记类型，满足不同场景的点位显示需求。

方向标记

可旋转的方向性标记，适用于机器人当前位置、定位点等场景。

const marker = bicMap.addDirectionalMarker(map, position, options)

参数

参数	类型	必需	说明
map	Map	✅	地图实例
position	[number, number]	✅	位置坐标 [经度, 纬度]
options	Object	—	配置选项（见下表）

options 参数

参数	类型	默认值	说明
imagePath	string	'/bicMap/assets/svg/pos.svg'	图标路径，支持 SVG / PNG / JPG
initialRotation	number	0	初始旋转角度（0–360°）
draggable	boolean	true	是否可拖拽移动
rotationControl	boolean	true	是否显示旋转控制手柄
initialEditMode	boolean	false	是否初始进入编辑模式
highlightStyle.backgroundColor	string	'rgba(76,175,80,0.15)'	高亮背景色
highlightStyle.borderColor	string	'#4CAF50'	高亮边框色
highlightStyle.shadowColor	string	'rgba(76,175,80,0.6)'	高亮阴影色
onChange	function	null	位置或旋转变化回调 (data) => {}

返回值：DirectionalMarker 对象

const marker = bicMap.addDirectionalMarker(map, [116.3912, 39.9073], {
  imagePath: '/assets/robot-pos.svg',
  initialRotation: 90,
  draggable: true,
  rotationControl: true,
  onChange: (data) => {
    console.log('位置:', data.lngLat)
    console.log('角度:', data.rotation)
  }
})

// 获取当前位置
const pos = marker.getPosition()

// 获取/设置旋转角度
const rot = marker.getRotation()
marker.setRotation(45)

// 编辑模式控制
marker.toggleEditMode()
marker.enableEditMode()
marker.disableEditMode()
const isEditing = marker.isInEditMode()

// 销毁标记
marker.remove()

---

批量 POI 标记

使用 WebGL 高效渲染大量 POI 点位，适合成百上千个点位的场景。

const markersController = bicMap.addBatchPOIMarkers(map, points, options)

points 数据结构

const points = [
  {
    id: 'poi-1',             // 唯一标识（必填）
    lngLat: [116.39, 39.90], // 位置坐标（必填）
    rotation: 0,             // 旋转角度
    name: '停靠点 A'         // 标签名称
  }
]

options 参数

参数	类型	默认值	说明
imagePath	string	'/bicMap/assets/img/pos.png'	标记图标路径
size	number	24	标记大小（像素）
showLabels	boolean	false	是否显示名称标签
labelIconPath	string	'/bicMap/assets/img/poi-sig.png'	标签图标路径
selectable	boolean	true	是否可选中
selectedStyle.color	string	'#ffba40'	选中扩散圆环边框色
selectedStyle.fillColor	string	'#ffba40'	选中扩散填充色
selectedStyle.animationDuration	number	2000	扩散动画时长（ms）
onClick	function	null	点击回调 (markerData) => {}
onSelectionChange	function	null	选中状态变化回调

控制器方法

const ctrl = bicMap.addBatchPOIMarkers(map, points, options)

ctrl.updateMarkers(newPoints)        // 批量更新
ctrl.addMarker(markerData)           // 添加单个
ctrl.removeMarker(index)             // 按索引移除
ctrl.selectById('poi-1')             // 选中指定 ID
ctrl.clearSelection()                // 清除选中
ctrl.setSelectable(true)             // 设置可选中状态
ctrl.isSelectable()                  // 获取可选中状态
ctrl.toggleLabels()                  // 切换标签显示
ctrl.getMarkers()                    // 获取所有标记
ctrl.getSelectedMarker()             // 获取选中标记（单选）
ctrl.getSelectedMarkers()            // 获取所有选中标记
ctrl.getMarkerById('poi-1')          // 按 ID 获取
ctrl.clearMarkers()                  // 清除所有
ctrl.remove()                        // 销毁控制器

---

机器人标记

专门为机器人位置显示设计，支持朝向箭头、名称标签和实时更新。

const robotController = bicMap.addRobotMarkers(map, robots, options)

robots 数据结构

const robots = [
  {
    id: 'robot-001',           // 机器人 ID（必填）
    name: '配送机器人 A',      // 名称（必填）
    lngLat: [116.39, 39.90],   // 位置（必填）
    rotation: 90               // 朝向角度
  }
]

options 参数

参数	类型	必需	默认值	说明
svgPath	string	✅	—	机器人图标路径（推荐 SVG）
size	number	—	30	图标大小（像素）
showLabels	boolean	—	true	是否显示名称标签
onClick	function	—	null	点击回调 (robotInfo) => {}
GPSToCartesian	function	—	null	GPS→笛卡尔坐标转换函数

控制器方法

const ctrl = bicMap.addRobotMarkers(map, robots, options)

ctrl.addRobot(robotData)              // 添加机器人
ctrl.updateRobot(index, robotData)   // 更新指定索引机器人
ctrl.removeRobot(index)              // 移除指定索引机器人
ctrl.updateRobots(newRobots)         // 批量更新所有机器人
ctrl.toggleLabels()                  // 切换标签显示
ctrl.clearRobots()                   // 清除所有机器人
ctrl.remove()                        // 销毁控制器

实时位置更新示例

const robotController = bicMap.addRobotMarkers(map, [
  { id: 'r1', name: '巡检机器人', lngLat: [116.3912, 39.9073], rotation: 0 }
], {
  svgPath: '/assets/robot.svg',
  onClick: (info) => console.log('点击:', info.name)
})

// 模拟实时位置推送（WebSocket）
socket.on('robot:position', ({ index, lngLat, rotation }) => {
  robotController.updateRobot(index, { lngLat, rotation })
})