亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript html5 canvas實現(xiàn)可拖動省份的中國地圖

 更新時間:2016年03月11日 13:31:13   作者:不熟不聊  
這篇文章主要介紹了javascript html5 canvas實現(xiàn)可拖動省份的中國地圖的相關(guān)資料,需要的朋友可以參考下

本文實例分享了html5 canvas可拖動省份的中國地圖實現(xiàn)方法,供大家參考,具體內(nèi)容如下

1.數(shù)據(jù)獲取
畫地圖需要省份邊界坐標(biāo),理論上可以每次都用百度API獲取數(shù)據(jù)并繪圖,但為了增加效率,首先將所有坐標(biāo)都獲取下來并存入數(shù)據(jù)庫中。
新建省份數(shù)據(jù)數(shù)組

復(fù)制代碼 代碼如下:
var allZoneData = [{'name':'遼寧省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-serif;">{'name':'吉林省','been':'yes','id':'02'},……];</span> 

輪詢該數(shù)組,根據(jù)省份名稱請求百度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表示是否去過,id為唯一標(biāo)識,cir為省份圈號(有可能一個省份有兩部分封閉圓圈構(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ù)出錯!'); 
    } 
   });   
  }         
 });         
} 

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方式請求該省份邊界坐標(biāo),然后繪圖

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層)
當(dāng)在地圖上拖動省份時,出現(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ù)移動距離的不同,設(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)點擊到地圖上時,要做的事是,判斷點擊位置,將位置信息轉(zhuǎn)化成經(jīng)緯度,再通過百度API根據(jù)經(jīng)緯度獲得省份名稱。

$('#eventCanvas').mousedown(function(ev){ 
 //獲取點擊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; 
 } 
 
 //保存點擊時的原坐標(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)移動事件:根據(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ù)時放到內(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移動層。

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

小結(jié):功能、原理都很簡單,但能熟悉canvas的一些屬性和方法。canvas層是可以重疊到一起的,這樣就可以在不同的層畫不同的內(nèi)容,方便維護(hù)和管理。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • js實現(xiàn)滑動輪播效果

    js實現(xiàn)滑動輪播效果

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)滑動輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Bootstrap滾動監(jiān)聽組件scrollspy.js使用方法詳解

    Bootstrap滾動監(jiān)聽組件scrollspy.js使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap滾動監(jiān)聽組件scrollspy.js的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • JS+CSS實現(xiàn)仿msn風(fēng)格選項卡效果代碼

    JS+CSS實現(xiàn)仿msn風(fēng)格選項卡效果代碼

    這篇文章主要介紹了JS+CSS實現(xiàn)仿msn風(fēng)格選項卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素css樣式實現(xiàn)切換功能的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • 基于Bootstrap重置輸入框內(nèi)容按鈕插件

    基于Bootstrap重置輸入框內(nèi)容按鈕插件

    pureClearButton是一款基于Bootstrap的非常實用的用于清空和重置input輸入框內(nèi)容的jQuery按鈕插件,感興趣的小伙伴們可以參考一下
    2016-05-05
  • JavaScript類型系統(tǒng)之布爾Boolean類型詳解

    JavaScript類型系統(tǒng)之布爾Boolean類型詳解

    這篇文章主要介紹了JavaScript類型系統(tǒng)之布爾Boolean類型詳解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 如何在uniapp項目中使用mqtt

    如何在uniapp項目中使用mqtt

    本文給大家分享uniapp中引入mqtt的全過程,在uniapp項目根目錄下分別運行安裝mqtt和uuid的命令行,因為后面會用uuid生成mqtt的clientId,文中給大家介紹mqtt和uuid安裝過程,感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
    2021-05-05
  • 一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制

    一文詳解JavaScript中的事件循環(huán)(event?loop)機(jī)制

    JavaScript中的事件循環(huán)(Event?Loop)是一種重要的機(jī)制,用于管理異步代碼的執(zhí)行,它確保?JavaScript?單線程環(huán)境中的任務(wù)按照正確的順序執(zhí)行,同時允許異步操作如定時器、網(wǎng)絡(luò)請求和事件處理,本將給大家詳細(xì)的介紹一下JavaScript事件循環(huán)機(jī)制,感興趣的朋友可以參考下
    2023-12-12
  • JS新標(biāo)簽頁打開的方法大全(讓你的網(wǎng)站訪問更加便捷)

    JS新標(biāo)簽頁打開的方法大全(讓你的網(wǎng)站訪問更加便捷)

    在開發(fā)Web應(yīng)用中我們常常需要在當(dāng)前頁面打開一個鏈接,但又不希望離開當(dāng)前頁面,這篇文章主要給大家介紹了關(guān)于JS新標(biāo)簽頁打開的方法大全,通過這些方法可以讓你的網(wǎng)站訪問更加便捷,需要的朋友可以參考下
    2023-10-10
  • js的[defer]和[async]屬性

    js的[defer]和[async]屬性

    這篇文章主要介紹了js的<script>的[defer]和[async]屬性,需要的朋友可以參考下
    2014-11-11
  • Javascript中的this綁定介紹

    Javascript中的this綁定介紹

    在Javascript里,函數(shù)被調(diào)用的時候,除了接受聲明是定義的形式參數(shù),每一個函數(shù)還接受兩個附加的參數(shù):this和arguments。
    2011-09-09

最新評論