自己動手做地圖：Dojo中的Map控制項詳解

隨著Web成為軟體系統交付的主流平台，企業級應用前端紛紛落戶瀏覽器，對各種富用戶端開發庫提出了越來越高的要求，Dojo作為其中的佼佼者，對企業級Web開發提供了強大的支援。

在公司資訊系統中，圖表是資料分析的最終圖形化結果，地位舉足輕重，直接影響資料分析的效果好壞。美觀實用的圖表絕對會給應用系統加分不少！

 

Dojo控制項陳列庫裡有豐富的圖表控制項，除了常見的長條圖、餅圖、折線圖等等，也有為更專業的需求而開發的甘特圖、散佈圖、地圖等控制項。更難能可貴的是Dojo的圖表控制項支援了動畫效果以及眾多的UI響應事件。是一個包含了dojo中的地圖、長條圖、餅圖和折線圖等圖表控制項的Dashboard樣本：

 

 

 

接下來我們以dojo1.5版本中新加入的地圖控制項（dojox.geo.charting.Map）為例，來認識一下dojo中的圖表控制項特點（這裡預設讀者有一定的dojo開發基礎，如果沒有...也沒問題！）

1.簡單快捷的建立過程

首先你得下載dojo1.5的開發包

，然後在html開發頁面中引入必要的css檔案和dojo.js；

<link rel="stylesheet" href="dojo/resources/dojo.css" mce_href="dojo/resources/dojo.css"><br /><link rel="stylesheet" href="dijit/themes/claro/claro.css" mce_href="dijit/themes/claro/claro.css"><br /><link rel="stylesheet" href="dojox/geo/charting/resources/Map.css" mce_href="dojox/geo/charting/resources/Map.css"><br /><mce:script type="text/javascript" src="dojo/dojo.js" mce_src="dojo/dojo.js"></mce:script>

然後建立一張美國地圖（dojo中內建的地圖就是美國地圖）。建構函式接受兩個參數：地圖div容器以及地圖的地理資料。地理資料預設存放在dojox.geo.charting模組下的resources/data目錄下；

<mce:script type="text/javascript"><!--<br />dojo.require("dojox.geo.charting.Map");<br />dojo.addOnLoad(function(){<br />var map = new dojox.geo.charting.Map("map", dojo.moduleUrl("dojox.geo.charting","resources/data/USStates.json").uri);<br />});<br />// --></mce:script><br />......<br /><div class="mapContainer" id="map"></div>

 

OK, 一張最簡單的地圖就產生了,而且支援

高亮，

放大，複位和Tip功能：

點擊後高亮顯示：

再點擊，地圖放大；在放大狀態下點擊的話，地圖就會複位：

 

可以看到Map圖表控制項的建立過程非常簡單，不過到現在為止，Map還沒有跟資料進行綁定，所以不能稱為嚴格意義上的圖表，下面介紹Map如何展示資料。

 

2.一目瞭然的資料展示

 

比如說，現在的需求是顯示A產品在美國各州的銷售情況，用深藍色表示銷售情況火爆，用淺藍色代表銷售情況慘淡；

銷售資料使用dojo.data.ItemFileReadStore資料格式（關於ItemFileReadStore的介紹可以讀讀《利用 Dojo Data 開發統一的資料訪問模型》）

  var dataStore = new dojo.data.ItemFileReadStore({<br /> url: dojo.moduleUrl("dojox.geo.charting", "tests/datastore/dataStore.json").uri<br /> });<br /> map.setDataStore(dataStore, {<br /> product: "A"<br /> }); 

 

接下來，就需要為資料設定顏色區間了。我將銷售值在6.0到9.0之間設定為銷售火爆的地區，用深藍色表示。佛羅里達州的A產品銷售額為7.2，那麼佛羅里達州的顏色就是深藍色；

map.addSeries([{<br /> name: "Low(0~$3.0M)",<br /> min: "0.0",<br /> max: "3.0",<br /> color: "#BEDAE8"<br /> }, {<br /> name: "Average($3.0M~$6.0M)",<br /> min: "3.0",<br /> max: "6.0",<br /> color: "#0397D7"<br /> }, {<br /> name: "High($6.0M~$10.0M)",<br /> min: "6.0",<br /> max: "9.0",<br /> color: "#1C3E64"<br /> }]);<br /> var legend = new dojox.geo.charting.widget.Legend({<br /> map: map<br /> });

 

好了，Map的資料展示功能也介紹完了。別忙，還有更cool的呢，那就是dojo圖表中的事件擴充介面！

3.強大豐富的擴充介面

 

在基於控制項陳列庫的開發中，開發人員經常需要定製化的功能，所以控制項必須提供一些擴充介面滿足這部分需要。以Map控制項為例，開發人員希望能夠定製Tip的內容，或者在點擊地圖的時候觸發新的事件等等。在Map控制項裡一共提供了三個擴充介面，參數都是當前地圖上取得焦點的地區。

1. onFeatureOver:在滑鼠移到地區上方時觸發

2. onFeatureClick:在滑鼠點擊地區時觸發；

3. onZoomEnd:在地區完成放大行為時觸發；

下面是自訂的提示內容，只要你願意，你甚至可以在加州的提示內容裡添加湖人隊的奪冠新聞。

 

至此，Map控制項已經介紹完了，不過dojo圖表控制項中還有許多優秀的成員等待你去發掘。

 

 

另附範例程式碼：http://download.csdn.net/source/2544819