首页 / deck.gl / 使用示例
文字标注
十八座城市以大写字母与指数组成标签,字号按指数放大, 深色背景框加细描边,在全国视角下仍然清晰。
源码与运行效果
说明
标签文字是 名称 + 空格 + 指数,全部由大写字母、
数字和空格组成。这一限制不是随意定的:TextLayer 会把
characterSet 里的字符离屏绘制成一张图集,
字符集之外的字不会出现在图集里,也就画不出来。
| 配置 | 作用 |
|---|---|
characterSet | 显式声明用到的 27 个大写字母、10 个数字和空格 |
fontSettings.sdf: true | 距离场字形,放大后边缘保持锐利 |
outlineWidth: 0.09 | 文字外圈描边,与背景框共同保证对比度 |
background: true | 按文字包围盒绘制背景 |
backgroundPadding: [5, 3] | 水平 5 像素、垂直 3 像素内边距 |
getPixelOffset: [0, -16] | 标签上移,避开底下的橙色圆点 |
billboard: true | 倾斜时文字保持直立可读 |
为什么不用中文
中文字形数量多,字符集增大会让图集体积迅速膨胀, 单个字符的纹理尺寸随之缩小。几百个字符尚可, 几千个就会触及设备的纹理边长上限,出现空白方块。
需要中文标签时,常见做法是只把当前视野内、当前层级的
少量地名交给 TextLayer,并显式给出这些字的字符集;
或者预先把地名栅格化成图片,用 IconLayer 贴图。
背景框与描边的分工
背景框解决的是「文字压在浅色地物上」,描边解决的是 「文字压在复杂纹理上」。两者同时使用时,背景色不要太深, 否则标签会变成一排小黑块;示例用 215 的透明度, 既压住底图,也保留一点层次。
字号按指数放大,而不是按面积。数值翻倍时字号只加几像素, 这样高低值之间的差异可见,又不会让最大标签占满屏幕。 字号与数据量直接线性挂钩,通常会得到相反的效果。