Mapbox UTFGrid 交互规范详解：实现地图瓦片的交互功能

什么是UTFGrid交互规范

UTFGrid是一种轻量级的地图交互数据格式，它允许开发者在地图瓦片基础上添加交互功能。这种规范定义了如何通过额外的HTTP端点来增强地图瓦片的交互能力，使得用户可以与地图上的特定区域进行互动。

核心组件

1. 交互端点配置

实现交互功能需要配置两个关键HTTP端点：

• 图层清单文件：[base path]/layer.json

  • 包含交互格式化函数和其他可选属性
  • 使用JSON格式描述图层的交互特性

• UTFGrid数据文件：[base path]/{z}/{x}/{y}.grid.json

  • 与对应瓦片图像相邻的UTFGrid JSON文件
  • 包含实际的交互数据

2. URL结构示例

典型的URL结构遵循以下模式：

http://example.com/0/0/0.png       // 瓦片图像
http://example.com/0/0/0.grid.json // 对应的UTFGrid数据
http://example.com/layer.json      // 图层清单

TileJSON扩展

UTFGrid规范对TileJSON负载进行了扩展，增加了两个关键属性：

1. 模板(template)

• 类型：字符串
• 格式：Mustache模板
• 作用：定义如何格式化交互数据

示例：

{
    "template": "{{NAME}}",
    "legend": "<strong>国家列表</strong>"
}

2. 图例(legend) [可选]

• 类型：字符串
• 格式：自包含的HTML
• 作用：显示图层的图例信息

示例：

<div><span style='padding:0px 10px; background:#333;'></span> +10% 人口</div>
<div><span style='padding:0px 10px; background:#666;'></span> +5% 人口</div>

Mustache模板详解

从UTFGrid 1.1版本开始，formatter键已被弃用，改用template键。模板使用Mustache格式字符串生成HTML，生成后会经过HTML白名单过滤。

模板数据转换

原始数据对象：

{
    "id": "helloworld"
}

会被转换为：

{
    "id": "helloworld",
    "__location__": true
}

这种转换使得可以使用条件模板片段，例如：

{{#__location__}}
    http://your.com/{{id}}
{{/__location__}}
{{#__full__}}
    完整内容ID: {{id}}
{{/__full__}}
{{#__teaser__}}
    {{id}}
{{/__teaser__}}

对于上述例子，输出将是：

http://your.com/helloworld

图例实现建议

图例HTML字符串应完全自包含，不应引用外部资源。如需嵌入图像，可使用Data URI方案：

<img src="data:image/png;base64,...">

UTFGrid数据格式

关于.grid.json文件的具体格式和存储方式，请参考UTFGrid规范文档中的详细说明。这种格式采用紧凑的编码方式，能够高效地表示地图上的交互区域和数据。

实际应用场景

1. 地图标注交互：当用户悬停或点击地图上的特定区域时，显示相关信息
2. 数据可视化：结合图例展示复杂数据的可视化表示
3. 地理信息系统：构建具有丰富交互功能的地理信息应用

通过遵循UTFGrid交互规范，开发者可以轻松地为地图瓦片添加交互层，提升用户体验和数据展示效果。