javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國(guó)地圖
本文實(shí)例分享了html5 canvas可拖動(dòng)省份的中國(guó)地圖實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
1.數(shù)據(jù)獲取
畫地圖需要省份邊界坐標(biāo),理論上可以每次都用百度API獲取數(shù)據(jù)并繪圖,但為了增加效率,首先將所有坐標(biāo)都獲取下來(lái)并存入數(shù)據(jù)庫(kù)中。
新建省份數(shù)據(jù)數(shù)組
輪詢?cè)摂?shù)組,根據(jù)省份名稱請(qǐng)求百度API獲取坐標(biāo)數(shù)據(jù),并將數(shù)據(jù)以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表示是否去過(guò),id為唯一標(biāo)識(shí),cir為省份圈號(hào)(有可能一個(gè)省份有兩部分封閉圓圈構(gòu)成)
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('添加數(shù)據(jù)出錯(cuò)!');
}
});
}
});
}
php得到數(shù)據(jù)后,解析數(shù)據(jù)并將數(shù)據(jù)存儲(chǔ)到事先建好的數(shù)據(jù)庫(kù)中
<?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層)
輪詢省份數(shù)組,并以ajax方式請(qǐng)求該省份邊界坐標(biāo),然后繪圖
var drawMap = function (context,data,l,t) { //context為繪制所在的層,l和t為相對(duì)位置,data為邊界對(duì)象數(shù)組
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為放大倍數(shù)
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.畫移動(dòng)連線(連線和移動(dòng)的省份畫在moveMapCanvas層)
當(dāng)在地圖上拖動(dòng)省份時(shí),出現(xiàn)若干條連接移動(dòng)的省份和原省份的直線
var drawLinkLine = function(data,l,t){ //此處的l和t表示移動(dòng)的相對(duì)位置
for(var k = 0;k < data.coordinate.length;k++){
if(k % 60 == 0){
moveMapContext.beginPath();
//根據(jù)移動(dòng)距離的不同,設(shè)置連線的粗細(xì)
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.事件
鼠標(biāo)按下事件:當(dāng)點(diǎn)擊到地圖上時(shí),要做的事是,判斷點(diǎn)擊位置,將位置信息轉(zhuǎn)化成經(jīng)緯度,再通過(guò)百度API根據(jù)經(jīng)緯度獲得省份名稱。
$('#eventCanvas').mousedown(function(ev){
//獲取點(diǎn)擊canvas的坐標(biāo)
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;
}
//保存點(diǎn)擊時(shí)的原坐標(biāo)值
tempX = mouseX;
tempY = mouseY;
//將坐標(biāo)轉(zhuǎn)化為經(jīng)緯度
mouseX = mouseX/bigger + temp_left;
mouseY = temp_top - mouseY/bigger;
if(opts.dragAll){
draging = true;
}else{
moveMapContext.clearRect(0, 0, 1100, 630);
//根據(jù)經(jīng)緯度獲得所在地理位置并獲取邊界坐標(biāo)再畫線
myGeo.getLocation(new BMap.Point(mouseX, mouseY),
function(result){
tempName = '';
draging = true;
name = result.addressComponents.province;
tempName = name;
pubFuns.drawMoveLayerLine(0,0);
});
}
});
鼠標(biāo)移動(dòng)事件:根據(jù)點(diǎn)擊的省份名,獲得數(shù)據(jù),并實(shí)時(shí)重繪移動(dòng)層的省份
$('#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){ <span style="font-family: Arial, Helvetica, sans-serif;">//拖動(dòng)整個(gè)地圖,存在問(wèn)題,地圖畫的太慢</span>
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是第一次讀取數(shù)據(jù)時(shí)放到內(nèi)存里的變量,它包含了所有數(shù)據(jù)
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);
}
}
});
鼠標(biāo)抬起事件:設(shè)置dragging為false,clear移動(dòng)層。
$('#eventCanvas').mouseup(function(e){
if(opts.dragAll){
}else{
moveMapContext.clearRect(0, 0, 1100, 630);
}
draging = false;
});

小結(jié):功能、原理都很簡(jiǎn)單,但能熟悉canvas的一些屬性和方法。canvas層是可以重疊到一起的,這樣就可以在不同的層畫不同的內(nèi)容,方便維護(hù)和管理。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- js HTML5 canvas繪制圖片的方法
- JS+html5 canvas實(shí)現(xiàn)的簡(jiǎn)單繪制折線圖效果示例
- js HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- js+html5實(shí)現(xiàn)canvas繪制橢圓形圖案的方法
- Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎(jiǎng)
- javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- js+html5 canvas實(shí)現(xiàn)ps鋼筆摳圖
相關(guān)文章
Bootstrap滾動(dòng)監(jiān)聽(tīng)組件scrollspy.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap滾動(dòng)監(jiān)聽(tīng)組件scrollspy.js的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JavaScript類型系統(tǒng)之布爾Boolean類型詳解
這篇文章主要介紹了JavaScript類型系統(tǒng)之布爾Boolean類型詳解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制
JavaScript中的事件循環(huán)(Event?Loop)是一種重要的機(jī)制,用于管理異步代碼的執(zhí)行,它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行,同時(shí)允許異步操作如定時(shí)器、網(wǎng)絡(luò)請(qǐng)求和事件處理,本將給大家詳細(xì)的介紹一下JavaScript事件循環(huán)機(jī)制,感興趣的朋友可以參考下2023-12-12
JS新標(biāo)簽頁(yè)打開(kāi)的方法大全(讓你的網(wǎng)站訪問(wèn)更加便捷)
在開(kāi)發(fā)Web應(yīng)用中我們常常需要在當(dāng)前頁(yè)面打開(kāi)一個(gè)鏈接,但又不希望離開(kāi)當(dāng)前頁(yè)面,這篇文章主要給大家介紹了關(guān)于JS新標(biāo)簽頁(yè)打開(kāi)的方法大全,通過(guò)這些方法可以讓你的網(wǎng)站訪問(wèn)更加便捷,需要的朋友可以參考下2023-10-10

