首页 / deck.gl / 使用示例
图标标注
三种图标全部由 canvas 现场绘制并导出为 data URL, 二百四十个点位按类型取图、按评分定大小、按类别染色。
源码与运行效果
说明
图集长 192 像素、高 64 像素,三个 64×64 槽位依次是圆、水滴形、
菱形,全部用白色绘制。白色图形配合 getColor,
同一套图集可以染成任意颜色,不需要为每种配色准备图片。
| 配置 | 作用 |
|---|---|
iconAtlas | 接受 URL 或 data URL,这里是后者 |
iconMapping | 图标名到图集矩形与锚点的映射 |
mask: true | 只用 alpha 通道,颜色完全由 getColor 决定 |
anchorY: 60 | 水滴形的尖角落在坐标点上 |
getSize | 15 起,按评分每分加 0.2 像素 |
sizeMaxPixels: 36 | 防止高分点评分图标遮住邻居 |
锚点决定「贴地」还是「漂浮」
水滴形标记的视觉重心在上方,锚点必须放在底部尖角,
否则缩放时图标会整体偏离坐标点。圆形与菱形对称,
锚点取几何中心即可。三个图标的锚点各不相同,
这正是 iconMapping 按图标单独配置的原因。
倾斜视角下,billboard: true 让图标始终正对相机,
不会因为俯仰而压扁。若希望图标像贴纸一样平铺在地面,
关掉它并降低俯仰角。
图标不是越多越好。二百多个图标已让画面偏密, 再多就会互相遮挡。点击密集区域时拾取也可能选到后排图标, 需要精确控制时,按缩放层级聚合或筛选。