HTML5 技术为现代网页开发提供了强大的绘图功能，通过使用 HTML5 的 元素和 JavaScript，开发者可以创建复杂的图形和动画，本文将介绍如何使用 HTML5 绘制上海地铁线路图，并利用 Qunee 组件实现交互式展示。

数据准备

需要从可靠的来源获取上海地铁的数据，如维基百科或上海地铁官网，数据主要包括站点位置、文本标签以及地铁线信息，为了方便处理和展示，这些数据通常会以 JSON 格式存储。

数据格式

1、文本标签数据：包含坐标和文字信息，如果文字需要旋转，则增加 "rotate" 属性。

```json

{

"text": "莘庄",

"x": 883.591,

"y": 1625.695

}

```

2、站点数据：包含坐标、旋转角度以及编号信息。

```json

{

"id": 5,

"x": 869.8513512641732,

"y": 1597.6559686949402,

"rotate": 0.7853981633974483

}

```

3、地铁线数据：包含名称、颜色以及经过的站点编号，对于共用线路的情况，还可以指定站点横向偏移量。

```json

{

"name": "1",

"color": "#e52035",

"stations": [64, 70, 67, 71, 72, 65, 69, 73, 66, 68, 63, 62, 22, 61, 60, {"id": 21, "yOffset": 0.5}, 59, {"id": 18, "yOffset": 0.5}, 17, 58, 14, 7, 57, 6, 56, 44, 47, 5]

}

```

创建图元对象

数据准备好后，需要将其转换成 Qunee 图元对象，以便在地铁图中进行展示，以下是三种类型的创建函数：

创建文本标签

 function createText(name, x, y, rotate) {     var text = graph.createNode(name, x, y);     if (rotate) {         text.rotate = rotate;     }     text.zIndex = 20;     text.image = null;     text.setStyle(Q.Styles.BACKGROUND_COLOR, Q.toColor(0x88FFFFFF));     text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);     text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);     text.setStyle(Q.Styles.LABEL_PADDING, PADDING);     return text; }

创建站点

 function createStation(station) {     var node = graph.createNode(null, station.x, station.y);     node.stationId = station.id;     node.setStyle(Q.Styles.LABEL_FONT_SIZE, 10);     node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);     node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);     node.zIndex = 10;     if (station.rotate) {         node.image = roundRect;         node.rotate = station.rotate;     } else {         node.image = circle;     }     node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#FFF");     node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");     return node; }

创建地铁线

 function createLine(line) {     var stations = line.stations;     var node = graph.createNode(line.name);     node.stations = stations;     node.movable = false;     node.setStyle(Q.Styles.LABEL_FONT_SIZE, 50);     node.setStyle(Q.Styles.LABEL_COLOR, line.color);     node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);     node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP);     node.setStyle(Q.Styles.LAYOUT_BY_PATH, true);     node.anchorPosition = null;     return node; }

常见问题解答（FAQ）

1、如何调整地铁站点的显示样式？

答案：可以通过修改createStation 函数中的样式设置来调整站点的显示样式，更改node.image 的值可以改变站点的形状，设置不同的Q.Styles 属性可以调整字体大小、颜色等。

2、如何处理地铁线的共线情况？

答案：对于共用线路的情况，可以在地铁线数据中指定站点的横向偏移量，通过添加{"id": 21, "yOffset": 0.5} 来调整站点的位置，避免两条线路重合。

# HTML5 绘制上海地铁线路图

## 简介