概述###
運用百度地圖JS API，實現了在百度地圖上繪制柵格並按統計值渲染柵格顏色。實現的過程是不斷補習的過程，其中用到一些技術，是個人首次嘗試。包括：(1)簡單的jQuery語法，並實現Ajax；(2)JS的閉包特性；(3) 百度地圖經緯度轉換的嘗試。
實現方案###
1. 設置地圖####
map.centerAndZoom(point, 13); // 中心點和縮放級別
map.addControl(new BMap.NavigationControl()); // 導航工具條
map.addControl(new BMap.ScaleControl()); // 縮放工具條
map.addControl(new BMap.OverviewMapControl()); // 小地圖控件
map.addControl(new BMap.MapTypeControl()); // 地圖類型控件
map.enableScrollWheelZoom(); // 允許滾動縮放
map.enableContinuousZoom(); // 允許無級縮放
2.載入數據
點擊[載入數據]按鈕，使用jQuery動態載入數據表格
var loadfile = 'barite_test.html';
var loadpara = {"grid":gridsize,"SelKpi":kpiid};
$("#testtest").load(loadfile,loadpara,function(){ //
alert("Load "+loadfile+" OK");
});
Barite_test.html是一個PHP程序，從Mysql查詢數據生成一個Table
$mdb_server = "localhost";
$mdb_user = "oxford";
$mdb_pwd = "***";
$mdb_name = "oxford";
$mdb_conn = mysql_connect($mdb_server,$mdb_user,$mdb_pwd);
$mdb_sel = mysql_select_db($mdb_name);
$grid_size = $_REQUEST["grid"];
$kpiid = $_REQUEST["SelKpi"];
$table["gsm"] = "barite_gsm";
$table["lte"] = "barite_test";
echo "<table id='GraphData1'>
<tr><th>GRID</th><th>FLOW</th></tr>";
$mdb_sql = 'select '.$grid_size.',sum(flo) from '.$table[$kpiid].' where '.$grid_size.' not like "" group by '.$grid_size.';';
$mdb_res = mysql_query($mdb_sql, $mdb_conn);
while ($mdb_row = mysql_fetch_array($mdb_res)) {
echo "<tr>";
echo "<td>".$mdb_row[0]."</td>";
echo "<td>".$mdb_row[1]."</td>";
echo "</tr>";
}
echo "</table>";
return 1;
3. 讀取數據####
借用jQuery從Table中讀取表格數據，其中有不少笨拙的語法
$("#testtest table tr").each(function(){
var gridid = $(this).children("td:eq(0)").text();// grid id
var flow_inc = $(this).children("td:eq(1)").text();// flow
var grid = gridid.split("_");
var grid_long = grid[0];
var grid_lat = grid[1];
grid_long = Number(grid_long); // 轉換成數字格式
grid_lat = Number(grid_lat);
flow_inc = Number(flow_inc);
a_grid.push(new BMap.Point(grid_long,grid_lat));// 壓入數組
a_flo.push(flow_inc);
a_gridid.push(gridid);
});
4. 繪制柵格####
遍歷數組，判斷柵格中心是否在可視范圍，畫出一個矩形
var bs = map.getBounds(); //獲取地圖邊界
var isin = BMapLib.GeoUtils.isPointInRect(grid_point, bs); //判斷是否入界
if(isin) { //
// alert(idx+"::::"+a_gridid[idx]+"::"+a_flo[idx]);
// 繪制矩形
var pStart = new BMap.Point(grid_point.lng+gridsize,grid_point.lat+gridsize);
var pEnd = new BMap.Point(grid_point.lng-gridsize,grid_point.lat-gridsize);
var polygon = new BMap.Polygon([
new BMap.Point(pStart.lng,pStart.lat),
new BMap.Point(pEnd.lng,pStart.lat),
new BMap.Point(pEnd.lng,pEnd.lat),
new BMap.Point(pStart.lng,pEnd.lat)
], {strokeColor:setcolor, strokeWeight:2, strokeOpacity:0,fillOpacity:0.5,fillColor:setcolor});
map.addOverlay(polygon);
5.增加標注####
因為矩形無法和infowindow關聯，故只能給每個柵格增加一個透明的標注，當鼠標落在標注上，則顯示infowindow
function DrawGridMarker(grid_point,content){
// 繪制中心標識和信息窗
var marker1 = new BMap.Marker(grid_point,{icon:grey});
map.addOverlay(marker1);
// 添加監聽事件
marker1.addEventListener("mouseover", function(){
infowin.setContent(content);this.openInfoWindow(infowin);}); //
marker1.addEventListener("mouseout", function(){this.closeInfoWindow();}); //
}
6.坐標轉換####
使用百度地圖提供的批量轉換函數transmore()，其返回值是一組對象，每個對象包含x和y兩個變量，需要將其轉換為BMap.Point。
BMap.Convertor.transMore(a_grid,0,callback);
然而使用坐標轉換以后，在地圖上呈現的柵格貌似是錯的，初步判斷可能是數組的次序問題，這個還需后續分析解決。另外還有數據缺漏的情況。
所以目前在頁面上加了一個選項，暫時不糾偏。
問題討論###
1. 閉包特性####
本人用多少學多少，至今不理解什么叫閉包。
起因是給marker數組添加infowindow時，在添加事件時查看每一個idx和內容都是正確的，但是從頁面點擊每一個marker顯示的卻是相同的內容。我很難想明白問題具體在那個環節，原理是什么。
在百度地圖技術論壇看到類似的問題，找到解決方案，將DrawGridMarker()函數放在DrawGrids()內部就OK了。
2. 顏色設置####
方便起見，使用jQuery語句調用一個動態頁面，生成顏色分級的數值。預設了“等值”、“等記錄數”、“K-means”三種算法，前兩種用sql很容易實現，第三種方法還沒有代碼實現，算法介紹可見上一篇博文 http://www.cnblogs.com/herzog/p/3855050.html 。
效果展示###
不使用地址轉換
使用地址轉換。柵格的顏色顯然是錯誤的
后續研究###
- 增加對鼠標、鍵盤的響應時間，提升讀者操作感知。
- 增加色階的直方圖，便於了解各層顏色的分布概況。
首次發布：2014.08.06