首页 / OpenLayers / 使用示例
精灵图标
三个符号排在一张 96×32 的贴图上，三千个点共用，靠 offset 与 size 取子图。
源码与运行效果
说明
精灵图把多个图标排在一张图上，Icon 用 offset 与 size 取出子图，渲染时只加载一张图。示例把三个 32×32 符号画在一张 96×32 的 canvas 上，三千个点共用。
官方示例用 WebGL 渲染大量图标，这里用矢量图层承载同样的精灵机制，重点在 offset 与 size 的取图方式与样式复用。
| 操作 | 结果 |
|---|---|
| 缩放地图 | 图标保持屏幕尺寸 |
| 平移地图 | 三千个点随图层重绘 |
| 放大观察 | 符号边缘不糊，源图是 2 倍像素 |
offset 与 size 必须同时给，只给 offset 会按整张图缩放，子图位置全错。