HTML5与Canvas元素：交互式在线地图的新纪元

**摘要**

HTML5作为下一代主要的HTML（超文本标记语言）修订版，旨在减少对如Adobe Flash等专有插件技术的需求。HTML5的canvas元素允许使用脚本语言（例如JavaScript）进行图形绘制。本文介绍了Cartagen，一个开源的、基于矢量的、客户端框架，用于在广泛的网络浏览器和移动设备上以原生HTML5渲染无需插件、支持离线交互式地图。Cartagen由麻省理工学院媒体实验室的设计生态学小组开发，其技术在参与式在线地图制作中的潜在应用包括实时空气污染监测、公民报告和灾难响应等。

**背景**

HTML5作为万维网核心标记语言的下一个主要修订版，正在开发中。它的目标是减少对如Adobe Flash、Microsoft Silverlight和Oracle-Sun JavaFX等专有插件技术的需求。例如，YouTube计划推出不依赖Adobe Flash、而是使用HTML5在网络浏览器中播放视频的服务。同样，苹果公司也在其iPad设备上放弃了Flash支持，转而支持HTML5。

canvas元素是HTML5的一部分，用于使用脚本语言绘制图形。它最初由苹果公司为Mac OS X Dashboard和Safari浏览器引入，后来在基于Gecko的浏览器（如Mozilla Firefox）和Opera中实现，也包括在Google Chrome中（Chrome围绕与Safari相同的WebKit引擎构建）。Internet Explorer 7和8版本尚未原生支持canvas元素，但可以使用Google Chrome Frame插件来渲染使用HTML5和canvas元素的网页。

**Cartagen介绍**

随着地图数据变得更加丰富，我们努力在多种投影和地图缩放级别中呈现多层数据，传统的Web地图技术开始变得不够灵活。Cartagen利用HTML5和canvas元素的新技术开发，我们现在可以创建不经预先渲染、而是即时生成的地图。这使我们摆脱了单一投影、缩放级别或表示的限制（每个服务器请求获取一次），并实现了更加动态、交互式和叙事性的制图风格。离散的矢量数据（由点、线和面组成）可以一次性下载，并以任何比例和任何风格显示。JavaScript执行速度的提高使得即使是在iPhone、Android和Windows Mobile平台上，动态HTML5映射也变得可行。

**Cartagen的优势**

当前大多数浏览器内地图（如OpenLayers/TileCache、Google Maps）使用强大的服务器生成256×256像素的PNG、JPG或GIF格式的光栅瓦片，并搭配快速缓存系统来根据用户请求向JavaScript或Flash基于的浏览器显示提供这些瓦片。用户可以像在巨大的虚拟纸张上滑动地图一样移动地图，这种地图通常被称为“滑动地图”。但这种方法的缺点在于需要确定单一的地图样式，因为瓦片不能实时生成，除非有某种服务器集群或云系统。此外，一旦瓦片渲染并发送到浏览器，就不能更改，这使得大多数当前的Web地图在这个意义上是“静态”的。在本文中，我们讨论了Cartagen的使用，这是一个由麻省理工学院媒体实验室的设计生态学小组开发的开源矢量映射框架。由于它每一帧都将地图绘制到屏幕上（在客户端），因此它不依赖于服务器生成地图瓦片，也不受限于单一的表现样式（或服务器渲染的缩放级别）。可以同时显示多个地图数据集，地图特征可以具有动态样式，例如在悬停、点击和其他用户事件时具有不同的外观。地图可以动态标记，平滑缩放而不是分步进行，并且可以按需进行视觉操作。这使得Cartagen比用户和设计师迄今为止所限制的地图界面要丰富和灵活得多。

**设置Cartagen地图**

Cartagen可以从官方网站下载。标准下载包含一个‘index.html’网页，用于显示地图，以及一个包含所有框架代码的‘cartagen.js’文件。Cartagen读取地图数据，包括JavaScript对象表示法（JSON）格式，这是一种结构化数据的通用标准，现代支持JavaScript的浏览器可以直接解析JSON文件，且比XML更易于人类阅读。Cartagen遵循OpenStreetMap（OSM）的数据模型，包括节点、路径和关系，并将这些数据转换为OSMJSON格式。

**使用GSS样式化地图**

随着我们改变地图显示方式的能力的出现，需要一种表达地图样式的方法，Cartagen的灵感来自于Web上众所周知的样式化手段：CSS，或层叠样式表。Cartagen使用地理样式表（GSS），这是一种利用CSS使地图样式更易于访问的层叠样式表规范。GSS也是一种脚本语言，使得Cartagen成为映射动态数据的理想框架。GSS样式可能如下所示：

```css
park: { strokeStyle: "green", lineWidth: 3, }
```

这将使用3像素宽的绿色边框表示任何标记为“公园”的特征。然而，GSS的功能远不止于此。

**添加新数据**

Cartagen可以显示基于实时数据流变化的地图。例如，Cartagen可以展示OpenStreetMap的实时数据，让观众看到实时发生的编辑，而无需服务器渲染负载。用户可以创建完全设计好的地图，这些地图包含丰富和动态的数据，并讲述独特的故事。

**高级技术：上下文菜单和脚本**

Cartagen内置了对上下文菜单的支持。通过修改相应的GSS样式，可以为特定功能添加菜单。此外，Cartagen允许用户通过JavaScript函数访问和操作地图特征，从而实现更高级的交互和数据展示。

**讨论**

Cartagen是第一个综合利用HTML5和canvas元素进行无需插件、离线交互式在线映射的动态映射框架。Cartagen的出现预示着地图将如何被感知和使用的变化；越来越多的用户将被鼓励与地理信息进行交互、修改和混合，而无需任何特殊的浏览器插件来查看或分享他们的创作。

**结论**

本文展示了使用Cartagen实现的多种交互式HTML5地图特性，这些特性在使用传统的基于瓦片的在线映射系统中是不可能或更复杂的。Cartagen作为一个参与式的HTML5制图媒介，是迈向更广泛的社区参与和地图使用的第一步。