【html5 canvas初試】可拖動省份的中國地圖

【zz注一下出處，感謝！  http://blog.csdn.net/supersky07/article/details/9137839】

1.資料擷取

畫地圖需要省份邊界坐标，理論上可以每次都用百度API擷取資料并繪圖，但為了增加效率，首先将所有坐标都擷取下來并存入資料庫中。

建立省份資料數組

輪詢該數組，根據省份名稱請求百度API擷取坐标資料，并将資料以ajax方式放松給php

var myGeo = new BMap.Geocoder();

(function(){
  for(var i = 0;i < allZoneData.length;i++){
    getAllZone(allZoneData[i].name,allZoneData[i].been,allZoneData[i].id);
  }
})();
//name為省份名，been表示是否去過，id為唯一辨別，cir為省份圈号（有可能一個省份有兩部分封閉圓圈構成）
function getAllZone (name,been,id) {
  var data,temp;
               
  var bdary = new BMap.Boundary();
  bdary.get(name, function(rs){
    var count = rs.boundaries.length; 
    for(var j = 0; j < count; j++){         	
      var ply = new BMap.Polygon(rs.boundaries[j], {strokeWeight: 2, strokeColor: "#ff0000"});
      data = ply.getPath();
      $.ajax({
        url: "addData.php",
        type:"POST",
        data: {'data':data,'name' : name,'cir':j,'been':been,'id':id},
        success: function(txt){
          console.log(txt);
        },
        error: function(){
          alert('添加資料出錯！');
        }
      });    
    }                
  });               
}
           

php得到資料後，解析資料并将資料存儲到事先建好的資料庫中

<?php
	header("content-type:text/html; charset=utf-8");
	$data = $_REQUEST['data'];
	$name = $_REQUEST['name'];
	$cir = $_REQUEST['cir'];
	$been = $_REQUEST['been'];
	$id = $_REQUEST['id'];

	$con = mysql_connect("localhost","……","……");
	if (!$con){
	  	die('Could not connect: ' . mysql_error());
	}
	mysql_select_db("……", $con);
	mysql_set_charset('utf8',$con);

	foreach ($data as $temp){
		$sql = "insert into place (id,name,lng,lat,cir,been) values ('".$id."', '".$name."', '".$temp['lng']."','".$temp['lat']."','".$cir."','".$been."')";
		if (!mysql_query($sql,$con)){
		  	die('Error: ' . mysql_error());
		}
	}

	mysql_close($con);
	echo 'Success';
?>
           

2.畫地圖(base地圖畫在mapCanvas層)

輪詢省份數組,并以ajax方式請求該省份邊界坐标,然後繪圖

var drawMap = function (context,data,l,t) { //context為繪制所在的層,l和t為相對位置,data為邊界對象數組
  if(data.been == 'yes'){
    context.fillStyle = "green";
  }else{
    context.fillStyle = "grey";
  }
  context.globalAlpha = 0.8;
  context.beginPath();
  cleft = (data.coordinate[0].lng - temp_left) * bigger + l; //temp_left和temp_top為地圖偏移位置.
  ctop = (temp_top - data.coordinate[0].lat) * bigger + t;  //bigger為放大倍數

  context.moveTo(cleft,ctop);
                    
  for(var j = 1;j < data.coordinate.length;j++){
    cleft = (data.coordinate[j].lng - temp_left) * bigger + l;
    ctop = (temp_top - data.coordinate[j].lat) * bigger + t;
    context.lineTo(cleft,ctop);
  }
                    
  context.closePath();
  context.stroke();
  context.fill();
}
           

3.畫移動連線(連線和移動的省份畫在moveMapCanvas層)

當在地圖上拖動省份時,出現若幹條連接配接移動的省份和原省份的直線

var drawLinkLine = function(data,l,t){ //此處的l和t表示移動的相對位置
  for(var k = 0;k < data.coordinate.length;k++){
    if(k % 60 == 0){
      moveMapContext.beginPath();
                    
      //根據移動距離的不同，設定連線的粗細
      lineLength = Math.sqrt(l * l + t * t) / 100;
      lineLength = lineLength >= 4.5 ? 4.5 : lineLength;
      moveMapContext.lineWidth = 5 - lineLength;

      moveMapContext.strokeStyle = "rgba(0,120,60,0.4)";
      cleft = (data.coordinate[k].lng - temp_left) * bigger;
      ctop = (temp_top - data.coordinate[k].lat) * bigger;
      moveMapContext.moveTo(cleft,ctop);

      cleft = (data.coordinate[k].lng - temp_left) * bigger + l;
      ctop = (temp_top - data.coordinate[k].lat) * bigger + t;
      moveMapContext.lineTo(cleft,ctop);
      moveMapContext.closePath();
      moveMapontext.stroke();
    }
  }
}
           

4.事件

滑鼠按下事件:當點選到地圖上時,要做的事是,判斷點選位置,将位置資訊轉化成經緯度,再通過百度API根據經緯度獲得省份名稱。

$('#eventCanvas').mousedown(function(ev){
  //擷取點選canvas的坐标
  var mouseX, mouseY;
  if(ev.layerX || ev.layerX==0){
    mouseX = ev.layerX;
    mouseY = ev.layerY;
  }else if(ev.offsetX || ev.offsetX==0){
    mouseX = ev.offsetX;
    mouseY = ev.offsetY;
  }

  //儲存點選時的原坐标值
  tempX = mouseX;
  tempY = mouseY;

  //将坐标轉化為經緯度
  mouseX = mouseX/bigger + temp_left;
  mouseY = temp_top - mouseY/bigger;

  if(opts.dragAll){
    draging = true;
  }else{
    moveMapContext.clearRect(0, 0, 1100, 630);
    //根據經緯度獲得所在地理位置并擷取邊界坐标再畫線
    myGeo.getLocation(new BMap.Point(mouseX, mouseY),
      function(result){
        tempName = '';
        draging = true;
        name = result.addressComponents.province;
        tempName = name;
        pubFuns.drawMoveLayerLine(0,0);     
    });
  }
});
           

滑鼠移動事件：根據點選的省份名，獲得資料，并實時重繪移動層的省份

$('#eventCanvas').mousemove(function(ev){
  var mouseX, mouseY;
  if(ev.layerX || ev.layerX==0){
    mouseX = ev.layerX;
    mouseY = ev.layerY;
  }else if(ev.offsetX || ev.offsetX==0){
    mouseX = ev.offsetX;
    mouseY = ev.offsetY;
  }
  if(draging){
    if(opts.dragAll){  //拖動整個地圖，存在問題，地圖畫的太慢
      mapContext.clearRect(0, 0, 1100, 630);
      for(var i = 0;i < allZoneData.length;i++){
        for(var j = 0;j < allData[allZoneData[i].name].length;j++){  //allData是第一次讀取資料時放到記憶體裡的變量，它包含了所有資料
          pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY);
        }
      }
     }else{
       moveMapContext.clearRect(0, 0, 1100, 630);
       pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY);
     } 
   }
});
           

滑鼠擡起事件：設定dragging為false，clear移動層。

$('#eventCanvas').mouseup(function(e){
  if(opts.dragAll){ 
  }else{
    moveMapContext.clearRect(0, 0, 1100, 630);
  }
  draging = false;
});
           

小結：功能、原理都很簡單，但能熟悉canvas的一些屬性和方法。canvas層是可以重疊到一起的，這樣就可以在不同的層畫不同的内容，友善維護和管理。

吐槽：西沙群島那部分的地圖真心不好看。百度地圖api文檔裡這些api不好找，我都忘記自己是怎麼找到的了。