本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下
1.数据获取
画地图需要省份边界坐标，理论上可以每次都用百度API获取数据并绘图，但为了增加效率，首先将所有坐标都获取下来并存入数据库中。 新建省份数据数组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('添加数据出错！');
}
});
}
});
}
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方式请求该省份边界坐标,然后绘图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层)
当在地图上拖动省份时,出现若干条连接移动的省份和原省份的直线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根据经纬度获得省份名称。//保存点击时的原坐标值
tempX = mouseX;
tempY = mouseY;
//将坐标转化为经纬度
mouseX = mouseX/bigger + temp_left;
mouseY = temp_top - mouseY/bigger;
if(opts.dragAll){
draging = true;
}else{
moveMapContext.clearRect(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);
});
}
});
鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份
鼠标抬起事件：设置dragging为false，clear移动层。
小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文链接：https://www.f2er.com/js/49716.html