本文介绍在 Angular TypeScript 应用中，如何将包含数百个经纬度坐标的大型二维数组（如 [[lat, lng], ...]）压缩、编码为简洁、URL 安全且可逆的查询参数，避免超长 URL 截断或编码问题。
本文介绍在 angular typescript 应用中，如何将包含数百个经纬度坐标的大型二维数组（如 `[[lat, lng], ...]`）压缩、编码为简洁、url 安全且可逆的查询参数，避免超长 url 截断或编码问题。
在 Web 应用中，将用户选择的地图坐标（如 500 个经纬度点）持久化到 URL（例如 ?mapSelection=...），需兼顾可读性、长度控制、URL 安全性与双向可解码性。此时，传统方案如 JSON.stringify + encodeURIComponent 易导致 URL 过长（尤其经度/纬度为高精度浮点数时），且 Base64 编码含 /, +, = 等非 URL 安全字符，需额外转义；而单向哈希（如 SHA-256）不可逆，无法还原原始数据——这与“用户分享后能准确复原选点”的需求相悖。
✅ 推荐方案：使用 Rison（Recursive Interpretable String Notation）
Rison 是专为 URL 和 API 查询参数设计的轻量级序列化格式，相比 JSON 具备三大优势：
- ✅ 天然 URL-safe：仅使用字母、数字、_, -, ., ~, !, $, ', (, ), *, +, ,, ;, = 等标准 URI 保留字符外的安全字符；
- ✅ 更高压缩率：省略引号、冗余括号和空格，对数组/嵌套结构编码更紧凑；
- ✅ 完全可逆：支持 rison.encode() 和 rison.decode() 双向转换，无信息损失。
快速集成（Angular + TypeScript）
-
安装依赖：
npm install rison
-
编码与解码示例：
import * as rison from 'rison';
// 示例数据：500+ 个 [lat, lng] 坐标 const myArr: [number, number][] = [ [39.9042, 116.4074], // 北京 [31.2304, 121.4737], // 上海 // ... 更多坐标 ];
// ✅ 编码为 URL 查询值（自动 URL-safe，无需额外 encodeURIComponent） const encoded = rison.encode(myArr); // 输出示例：'((39.9042,116.4074)(31.2304,121.4737))'
// 构建 URL const url = https://example.com/map?mapSelection=${encoded};
// ✅ 解码还原原始数组（类型安全，支持泛型） const decoded: [number, number][] = rison.decode(encoded); console.assert(JSON.stringify(decoded) === JSON.stringify(myArr));
### 注意事项与最佳实践
- ⚠️ **精度权衡**：若坐标精度要求不高（如地图可视化），可在编码前对经纬度做 `Math.round(val * 1e5) / 1e5` 四舍五入（保留 5 位小数），显著缩短字符串长度；
- ⚠️ **URL 长度限制**：尽管 Rison 更紧凑，但浏览器对 URL 总长仍有上限（通常 2000+ 字符）。若数组极大（>1000 点），建议改用 `localStorage` + 短 ID（如 `?id=abc123`）方式，服务端存储原始数据；
- ⚠️ **类型安全增强**：配合 TypeScript，可封装为强类型工具函数：
```ts
export function encodeCoords(coords: [number, number][]): string {
return rison.encode(coords);
}
export function decodeCoords(encoded: string): [number, number][] {
const result = rison.decode(encoded);
if (!Array.isArray(result) || !result.every(item => Array.isArray(item) && item.length === 2)) {
throw new Error('Invalid coordinate encoding');
}
return result as [number, number][];
}
综上，Rison 是面向 URL 查询参数场景的“精准解法”——它不是通用哈希，而是专为可读、可传、可逆、可压缩设计的序列化协议。在保持数据完整性的同时，让分享链接既简洁又可靠。
