跳到主要内容

富文本中的图片段

把已注册RGBA图片和文字排在同一个标签中

具备 commonLineSymbols 的匹配开发SDK还支持共同二维沿线图文:真实逐字弯线路径、目标归属、图文组合及共同预算。下文早期点符号范围与尚待沿线事项,应按此有限子集理解;复杂整形、倾斜/球面/地形与完整道路拼接仍待完成。

共同二维点 symbol 的 text-field 支持 format 中的 ['image', name]。图片使用已注册的RGBA图像;同一标签中的文字和图片共同换行、锚定、旋转、碰撞和查询,不需要另建图层或把图片名称当文字显示。能力为 commonFormattedTextImages。

import { map } from 'sqsmap';
const rgba = (width, height, color) => ({
  width, height,
  data: Array.from({ length: width * height }, () => color).flat()
});
map.addImage('badge', rgba(16, 8, [0, 180, 90, 255]), { pixelRatio: 2 });
map.addSource('labels', { type: 'geojson', data: {
  type: 'Feature', id: 1, properties: { badge: 'badge' },
  geometry: { type: 'Point', coordinates: [116.4, 39.9] }
} });
map.addLayer({ id: 'formatted', type: 'symbol', source: 'labels',
  layout: {
    'text-size': 24,
    'text-field': ['let', 'badge', ['image', ['get', 'badge']],
      ['format', '北京 ', { 'text-color': 'red' },
        ['coalesce', ['var', 'badge'], '无图片'], { 'vertical-align': 'center' }]]
  }
});
await map.sqs.flush();

图片显示尺寸为原像素宽高除以 pixelRatio:16×8、pixelRatio=2 显示为8×4 CSS像素,独立于根 text-size。图片段的 font-scale、text-font、text-color 不改变图片大小或本色;提供的表达式仍须通过类型与预算校验。vertical-align 支持 bottom(默认)、center、top,与所在行文字的em高度及图片实际高度共同计算。图片为不可拆分的换行单元;同一标签只有一个整体碰撞和查询框。

图片保持RGBA颜色和透明度,并乘根 text-opacity。透明 text-color 不隐藏图片;text-opacity: 0 或 text-size: 0 隐藏整条标签。仅图片的标签同样可用,不需要产生文字字形或消耗字形图集条目。

image 同步查找当前图集:可用时返回内部图片值,缺失时返回真正的 null。因此 coalesce 可以回退到另一个图片或普通字符串。case、match、let/var 保留图片身份;空字符串和空格式值仍是非null,不能触发回退。图片变量不能进入数字、布尔或普通字符串操作。顶级 text-field: ['image', ...] 明确拒绝,应放入 format;空图片名称同样拒绝。

可见标签实际求值时遇到的缺失名称通过既有 styleimagemissing 通知;在脚本中订阅 map.on('styleimagemissing', event => ...),名称在 event.id。事件去重、资源代次与停止规则见缺失样式图片。addImage、updateImage、removeImage 在后续刷新时重新解析标签:添加可从文字回退切换到图片,更新显示新bitmap,删除重新进入null回退。图片写入在提交前校验标签候选,失败保留旧图片、标签与查询结果。

本阶段仅支持注册的RGBA图片段。实际引用SDF图片明确返回 CAPABILITY_UNAVAILABLE;未被图片段引用的SDF仍可供原有图标使用。每标签最多32段,文字合计最多256字符/4096字节;图片名称最多256字节,单边最多4096 CSS像素,登记图集和全图显示预算仍生效。沿线文字、三维组合、复杂文字整形、字体文件与pattern中的完整image类型体系不在此能力范围。普通图标的image值与缺失回退已接通。

语义参考MapLibre format/image规范,由本项目自行实现;此能力不表示全部格式或平台组合已兼容。

完整脚本见portable-format-image.js,独立网页见formatted-image-check.html。相同脚本验证15项生命周期/失败保留,并检查真实红色文字、8×4绿色图片和12×12蓝色图片;蓝图的font-scale/text-color选项不改变尺寸与本色。