经纬志
首页 / deck.gl / 使用示例

图标标注

三种图标全部由 canvas 现场绘制并导出为 data URL, 二百四十个点位按类型取图、按评分定大小、按类别染色。

deck.gl 9.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

图集长 192 像素、高 64 像素,三个 64×64 槽位依次是圆、水滴形、 菱形,全部用白色绘制。白色图形配合 getColor, 同一套图集可以染成任意颜色,不需要为每种配色准备图片。

配置作用
iconAtlas接受 URL 或 data URL,这里是后者
iconMapping图标名到图集矩形与锚点的映射
mask: true只用 alpha 通道,颜色完全由 getColor 决定
anchorY: 60水滴形的尖角落在坐标点上
getSize15 起,按评分每分加 0.2 像素
sizeMaxPixels: 36防止高分点评分图标遮住邻居

锚点决定「贴地」还是「漂浮」

水滴形标记的视觉重心在上方,锚点必须放在底部尖角, 否则缩放时图标会整体偏离坐标点。圆形与菱形对称, 锚点取几何中心即可。三个图标的锚点各不相同, 这正是 iconMapping 按图标单独配置的原因。

倾斜视角下,billboard: true 让图标始终正对相机, 不会因为俯仰而压扁。若希望图标像贴纸一样平铺在地面, 关掉它并降低俯仰角。

图标不是越多越好。二百多个图标已让画面偏密, 再多就会互相遮挡。点击密集区域时拾取也可能选到后排图标, 需要精确控制时,按缩放层级聚合或筛选。