CSS 颜色输入
样式颜色常量、颜色表达式输入与共同光照共用 SqsMap 自研解析器。输入形状参考 MapLibre 的公开接口,数值规则依据 W3C CSS Color 4。目前提供常用子集;具体宿主、图层仍需查询能力,移动设备验收不能由解析能力代替。
| 输入 | 示例与规则 |
|---|---|
| 148 个标准名称 | rebeccapurple、green、lime;ASCII 大小写无关。green 为 #008000,lime 为 #00ff00。 |
| 十六进制 | #rgb、#rgba、#rrggbb、#rrggbbaa。 |
| 数值 RGB | rgb(255,0,0)、rgba(100%,0%,0%,50%)、rgb(100% 0 0 / 50%)。逗号形式的三个颜色分量须全部为数值或全部为百分比;空格形式允许混合。 |
| 数值 HSL | hsl(120,100%,50%)、hsl(.5turn 100% 50% / 1)。色相支持 deg/grad/rad/turn,未写单位时为度;饱和度和亮度必须为百分比。 |
| 透明度 | 数值或百分比;省略时不透明。transparent 为透明黑色。 |
有限分量和透明度按 CSS 范围裁剪,色相按一周循环。sRGB 使用 8 位分量,50% 舍入为 128。数值可用小数与科学计数法;末尾小数点、非有限值、缺失分量和混用分隔符会被拒绝。依赖上下文的 currentcolor/系统颜色、none、相对颜色、color()/lab()/oklch() 和 CSS 变量未接通;表达式与过渡另行查询能力。
import { map } from 'sqsmap';
map.setLight({ color: 'ReBeCcApUrPlE', intensity: 0.75 });
await map.sqs.flush();
console.log((await map.getLight()).color); // ReBeCcApUrPlE
map.setLight({ color: 'hsl(.5turn 100% 50% / 100%)' });
await map.sqs.flush();
光照颜色归一化后须不透明;透明或半透明输入被拒绝并保留原配置。通过 map.sqs.getCapabilities() 查询 cssNamedColors/cssModernRgbHsl;浏览器原始 MapView 使用 getCapabilities()/flush(),动态库沿用 ABI1 的场景 JSON 入口。原生 map.sqs.state().lightingState 与持久事件 event.state.lightingState 是深度冻结的历史快照,其他原有状态副本维持既有语义。
名称/RGB 事实映射来自 W3C 标准,并按其软件与数据许可 分发。SDK 的 THIRD_PARTY_NOTICES 与原生下载附件 licenses/w3c-css-color4.txt 包含来源、修改说明和完整许可。解析器独立实现,未使用 MapLibre 实现代码。
getLight 保留传入的颜色字符串;渲染时解析为 sRGB。例如 ReBeCcApUrPlE 的实际颜色为 #663399。
完整 HTML/CSS 与全部按钮事件可输入颜色名称及数值函数。请与匹配 SDK 一起部署;默认 OpenFreeMap 来源版权会显示。