這篇文章主要介紹了javascript html5 canvas如何實現(xiàn)可拖動省份的中國地圖,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡公司、廣告設計公司的優(yōu)秀設計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊,其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設計師、平面廣告設計師、網(wǎng)絡營銷人員及形象策劃。承接:網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設計制作、網(wǎng)站建設與維護、網(wǎng)絡推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務。
1.數(shù)據(jù)獲取
畫地圖需要省份邊界坐標,理論上可以每次都用百度API獲取數(shù)據(jù)并繪圖,但為了增加效率,首先將所有坐標都獲取下來并存入數(shù)據(jù)庫中。
新建省份數(shù)據(jù)數(shù)組
復制代碼 代碼如下:
var allZoneData = [{'name':'遼寧省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-serif;">{'name':'吉林省','been':'yes','id':'02'},……];</span>
輪詢該數(shù)組,根據(jù)省份名稱請求百度API獲取坐標數(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表示是否去過,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('添加數(shù)據(jù)出錯!'); } }); } }); }
php得到數(shù)據(jù)后,解析數(shù)據(jù)并將數(shù)據(jù)存儲到事先建好的數(shù)據(jù)庫中
<?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方式請求該省份邊界坐標,然后繪圖
var drawMap = function (context,data,l,t) { //context為繪制所在的層,l和t為相對位置,data為邊界對象數(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.畫移動連線(連線和移動的省份畫在moveMapCanvas層)
當在地圖上拖動省份時,出現(xiàn)若干條連接移動的省份和原省份的直線
var drawLinkLine = function(data,l,t){ //此處的l和t表示移動的相對位置 for(var k = 0;k < data.coordinate.length;k++){ if(k % 60 == 0){ moveMapContext.beginPath(); //根據(jù)移動距離的不同,設置連線的粗細 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.事件
鼠標按下事件:當點擊到地圖上時,要做的事是,判斷點擊位置,將位置信息轉化成經(jīng)緯度,再通過百度API根據(jù)經(jīng)緯度獲得省份名稱。
$('#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; //將坐標轉化為經(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)緯度獲得所在地理位置并獲取邊界坐標再畫線 myGeo.getLocation(new BMap.Point(mouseX, mouseY), function(result){ tempName = ''; draging = true; name = result.addressComponents.province; tempName = name; pubFuns.drawMoveLayerLine(0,0); }); } });
鼠標移動事件:根據(jù)點擊的省份名,獲得數(shù)據(jù),并實時重繪移動層的省份
$('#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;">//拖動整個地圖,存在問題,地圖畫的太慢</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ù)據(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); } } });
鼠標抬起事件:設置dragging為false,clear移動層。
$('#eventCanvas').mouseup(function(e){ if(opts.dragAll){ }else{ moveMapContext.clearRect(0, 0, 1100, 630); } draging = false; });
小結:功能、原理都很簡單,但能熟悉canvas的一些屬性和方法。canvas層是可以重疊到一起的,這樣就可以在不同的層畫不同的內容,方便維護和管理。
感謝你能夠認真閱讀完這篇文章,希望小編分享javascript html5 canvas如何實現(xiàn)可拖動省份的中國地圖內容對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián),詳細的解決方法等著你來學習!
網(wǎng)站標題:javascripthtml5canvas如何實現(xiàn)可拖動省份的中國地圖
轉載來于:http://muchs.cn/article22/ipgpcc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內鏈、網(wǎng)站制作、做網(wǎng)站、面包屑導航、網(wǎng)站設計公司、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)