生成地铁线路图的jQuery插件 - Subway Map Visualization

12年前

【下载地址】---》 subwayMap_Plugin_0.5.0.zip

【应用范围】

1、铁路、公路、飞机等线路图的设计，图形化显示；

2、电子电路设计图；

3、社交群显示、网络图、办公路线等等；

4、你的想象有多么丰富就有多少应用~~~

【使用体验】

首先，像其他的jQuery插件一样添加jQuery库和插件的Js库。

然后定义我们的画布DIV

使用jquery选择器让我们的铁路图生效~

$(“#subway_canvas”) .subwayMap({ debug: true });

参数说明：debug：[true|false] 调试模式打开时可以在JS控制台显示调试信息；

下面看看线路节点是怎么设置的：

通过Demo可以知道，这是典型的导航型插件，通过UL和LI标签定义节点。而<canvas>则可以设置背景等信息,<canvas>是使用网格布局；而不同的地图可以在一个网格上重叠，只要使用不同的UL标签标识就OK。看一看都有哪些信息可以设置：

Canvas参数说明：

(DIV)data-columns：<canvas>的网格列数；

(DIV)data-rows：<canvas>的网格行数；

(DIV)data-cellSize:每个网格的大小，大小为像素;整个<canvas>的大小=data_colums*data-cellSize-data_rows*data-cellSize；

(DIV)data-legendId:地图的图例位置，输入的是一个<div>的id；

(DIV)data-textClass:地图节点的文字样式；

(DIV)data-gridNumbers：是否显示网格的行列数；

(DIV)data-grid:是否显示网格;

(DIV)data-lineWidth:地图路线的宽度,像素值;

了解了这些，我们就可以开始我们的地图绘制了，

先画一个点吧：

<li data-coords="2,2" data-labelPos="N"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>

<li data-coords="2,2" data-labelPos="S"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>

</ul>

Canvas参数说明：

(UL)data-color:表示该线路的颜色；

(UL)data-label:该线路唯一的ID标识，也是图例显示的名称；

(LI)data-coords:该点的坐标，可以为浮点数；

(LI)data-labelPos:该点名称的显示位置,可以为N, E, S, W, NE, NW, SE, SW，默认为S；

这样我就可以很简单的画出了一条直线和两个点~~下面做一个比较完整的路线：

        <ul data-color="#ff4db2" data-label="jQuery Widgets" data-shiftCoords="0,1">          <li data-coords="2,2" data-marker="interchange"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>          <li data-coords="4,2"><a href="http://jqueryui.com/demos/autocomplete/">Auto\ncomplete</a></li>          <li data-coords="5,3" data-dir="E"></li>          <li data-coords="5,7" data-marker="@station" data-labelPos="W">Slider</li> <!-- marker-only node -->          <li data-coords="6,4" data-dir="S" data-marker="interchange" data-markerInfo="h5">Date\npicker</li>          <li data-coords="7,4"></li>          <li data-coords="7.15,8" data-marker="@station" data-labelPos="E">Dialog</li>  <!-- marker-only node, moved to the right by 0.15 -->          <li data-coords="8,3" data-dir="E"></li>          <li data-coords="8,2"></li>          <li data-coords="9,1" data-dir="N"></li>          <li data-coords="10,2" data-dir="E" data-marker="interchange" data-labelPos="E">Button</li>          <li data-coords="10,5"></li>          <li data-coords="9,6" data-dir="S" data-marker="station">Progress\nbar</li>          <li data-coords="6,9"></li>          <li data-coords="5,8" data-dir="W"></li>          <li data-coords="5,7"></li>          <li data-coords="4,6" data-dir="N"></li>          <li data-coords="2,6">Tabs</li>          </ul>

Canvas参数说明：

(UL)data-shiftCoords:地图路线偏离原来的位置的大小，是一个x,y值对，可以为负数，正数代表向右向下移动；

(li)data-marker:地图上的地点表示，可以为”station” 和” interchange”，如果表示的地点不在连续的线路上，可以使用”@station”或者”@interchange”表示；

(li)data-dir:为了实现地图的圆滑的效果，可以使用拐角效果，该属性值可以为N,S,W,W表示拐角的方向；

(li)data-markerInfo:地图标志信息，表示地图的上的连接点，可以是两个不同的路线，也可以是同一条路线，属性值为[v|h]+数值，v表示垂直方向，h表示水平方向，数值为像素，表示延伸的长度；

最后写一个比较完整的地图：

<ul data-color="#ff4db2" data-label="jQuery Widgets">  <li data-coords="2,2" data-marker="interchange"><a href="http://jqueryui.com/demos/accordion/">Accordion</a></li>  <li data-coords="4,2"><a href="http://jqueryui.com/demos/autocomplete/">Auto\ncomplete</a></li>  <li data-coords="5,3" data-dir="E"></li>  <li data-coords="5,7" data-marker="@station" data-labelPos="W">Slider</li> <!-- marker-only node -->  <li data-coords="6,4" data-dir="S" data-marker="interchange" data-markerInfo="h5">Date\npicker</li>  <li data-coords="7,4"></li>  <li data-coords="7.15,8" data-marker="@station" data-labelPos="E">Dialog</li>  <!-- marker-only node, moved to the right by 0.15 -->  <li data-coords="8,3" data-dir="E"></li>  <li data-coords="8,2"></li>  <li data-coords="9,1" data-dir="N"></li>  <li data-coords="10,2" data-dir="E" data-marker="interchange" data-labelPos="E">Button</li>  <li data-coords="10,5"></li>  <li data-coords="9,6" data-dir="S" data-marker="station">Progress\nbar</li>  <li data-coords="6,9"></li>  <li data-coords="5,8" data-dir="W"></li>  <li data-coords="5,7"></li>  <li data-coords="4,6" data-dir="N"></li>  <li data-coords="2,6">Tabs</li>  </ul>     <ul data-color="#00ff00" data-label="jQuery Interactions" data-shiftCoords="0,-1">  <li data-coords="2,6"></li>  <li data-coords="2,5.9" data-marker="@interchange"> </li> <!-- marker-only node, moved up by 0.10 -->  <li data-coords="5,6" data-marker="@station" data-labelPos="N">Selectable</li>  <li data-coords="6,6"></li>  <li data-coords="7,3" data-marker="@station" data-labelPos="W">Resizeable</li>  <li data-coords="7,5" data-dir="E" data-marker="station" data-labelPos="E">Droppable</li>  <li data-coords="7,1" data-marker="interchange" data-labelPos="W">Draggable</li>  </ul>

【体验心得】

一个GreatTool，实现的效果很好，如果能够通过模版技术从后台直接读取存储好的数据，自动生成坐标点，或者通过Json数据设置坐标，那就更好；另外，可以通过设计反向程序，把设计图转化成数据存储在数据库中，会非常棒。一个高级的jQuery插件，但是使用方法十分简单。