生成地鐵線路圖的jQuery插件 - Subway Map Visualization

ajax 12年前發布 | 13K 次閱讀微軟

【下載地址】---》 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 >Accordion</a></li>

<li data-coords="2,2" data-labelPos="S"><a >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 >Accordion</a></li>
        <li data-coords="4,2"><a >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=";
<li data-coords="4,2"><a href=";
<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></pre>

  
 【體驗心得】
 一個GreatTool，實現的效果很好，如果能夠通過模版技術從后臺直接讀取存儲好的數據，自動生成坐標點，或者通過Json數據設置坐標，那就
更好；另外，可以通過設計反向程序，把設計圖轉化成數據存儲在數據庫中，會非常棒。一個高級的jQuery插件，但是使用方法十分簡單。

本文由用戶 ajax 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/blog/5035947247182018517.html

微軟