首页 / MapLibre / 使用示例
自定义图标
水滴图标由 canvas 画出，注册进样式后作为 icon-image 使用。
不依赖图片文件，也不受跨域限制。
源码与运行效果
说明
addImage 接受 ImageData、HTMLImageElement
或 ImageBitmap。示例用 getImageData 取整块 64×64 像素，
注册名为 pin，图层里用字符串引用。
icon-anchor: 'bottom' 让图标尖端对准坐标。默认居中时，
水滴的尖头会浮在点位上方，看起来像整体偏移了一段距离。
| 配置 | 取值 | 说明 |
|---|---|---|
addImage(id, data) | ImageData | 注册图片，同名会报错 |
icon-image | 'pin' | 引用注册名，不是文件路径 |
icon-size | 0.5–2 | 缩放倍数，滑块实时修改 |
icon-anchor | 'bottom' | 尖端对齐坐标 |
icon-allow-overlap | false | 开启后密集区也全部显示 |
图标位图没有 pixelRatio 时按 1 倍处理。高分屏上会略糊，
注册时传 { pixelRatio: 2 } 并用两倍尺寸的 canvas 绘制，边缘才清晰。
icon-size 按倍数缩放位图，超过 2 倍时边缘发虚。
需要多种尺寸时，用 SDF 图标配合 icon-color 着色，
任意放大都保持锐利。