le canevas javascript html5 implémente une carte des provinces déplaçables de la Chine

Cet article présente principalement les informations pertinentes sur la carte chinoise des provinces déplaçables à l'aide du canevas javascript html5. Les amis dans le besoin peuvent s'y référer

Cet article partage un exemple de mise en œuvre de la carte chinoise des provinces déplaçables sur html5. Canvas. Méthode, pour votre référence, le contenu spécifique est le suivant

1. Acquisition de données
Dessiner une carte nécessite les coordonnées des limites de la province. En théorie, vous pouvez utiliser l'API Baidu pour. obtenez des données et dessinez à chaque fois, mais afin d'augmenter l'efficacité, toutes les coordonnées sont d'abord obtenues et stockées dans la base de données.
Créer un nouveau tableau de données de province

Copier le code Le code est le suivant :

var allZoneData = [{&#39;name&#39;:&#39;辽宁省&#39;,&#39;been&#39;:&#39;yes&#39;,&#39;id&#39;:&#39;01&#39;},<span style="font-family: Arial, Helvetica, sans-serif;">{&#39;name&#39;:&#39;吉林省&#39;,&#39;been&#39;:&#39;yes&#39;,&#39;id&#39;:&#39;02&#39;},……];</span>

Interrogez le tableau et demandez à l'API Baidu d'obtenir coordonner les données en fonction du nom de la province et détendre les données en php dans la méthode ajax Dans la base de données

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: {&#39;data&#39;:data,&#39;name&#39; : name,&#39;cir&#39;:j,&#39;been&#39;:been,&#39;id&#39;:id}, 
    success: function(txt){ 
     console.log(txt); 
    }, 
    error: function(){ 
     alert(&#39;添加数据出错！&#39;); 
    } 
   });   
  }         
 });         
}

2. Dessinez une carte (la carte de base est dessinée sur la couche mapCanvas)

Sondez les provinces Array et demandez les coordonnées des limites de la province via ajax, puis dessinez

<?php 
  header("content-type:text/html; charset=utf-8"); 
  $data = $_REQUEST[&#39;data&#39;]; 
  $name = $_REQUEST[&#39;name&#39;]; 
  $cir = $_REQUEST[&#39;cir&#39;]; 
  $been = $_REQUEST[&#39;been&#39;]; 
  $id = $_REQUEST[&#39;id&#39;]; 
 
  $con = mysql_connect("localhost","……","……"); 
  if (!$con){ 
    die(&#39;Could not connect: &#39; . mysql_error()); 
  } 
  mysql_select_db("……", $con); 
  mysql_set_charset(&#39;utf8&#39;,$con); 
 
  foreach ($data as $temp){ 
    $sql = "insert into place (id,name,lng,lat,cir,been) values (&#39;".$id."&#39;, &#39;".$name."&#39;, &#39;".$temp[&#39;lng&#39;]."&#39;,&#39;".$temp[&#39;lat&#39;]."&#39;,&#39;".$cir."&#39;,&#39;".$been."&#39;)"; 
    if (!mysql_query($sql,$con)){ 
      die(&#39;Error: &#39; . mysql_error()); 
    } 
  } 
 
  mysql_close($con); 
  echo &#39;Success&#39;; 
?>

3. Tracez une ligne mobile (la connexion et les provinces déplacées sont dessinées sur le calque moveMapCanvas)

Lorsque vous faites glisser une province sur la carte, plusieurs lignes droites reliant les provinces déplacées et les provinces d'origine apparaissent

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(); 
}

Événement

Événement presse souris : Quand. vous cliquez sur la carte, ce que vous devez faire est de déterminer l'emplacement du clic et de convertir les informations de localisation en longitude et latitude, puis d'obtenir le nom de la province en fonction de la latitude et de la longitude via l'API Baidu.

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(); 
  } 
 } 
}

Événement de mouvement de la souris : obtenez des données en fonction du nom de la province cliqué, et redessinez la province de la couche mobile en temps réel

$('#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);    
  }); 
 } 
});

Événement Souris vers le haut : définissez le glisser sur false et effacez le calque en mouvement.

$('#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是第一次读取数据时放到内存里的变量，它包含了所有数据 
     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); 
   }  
  } 
});

Résumé : Les fonctions et les principes sont très simples, mais vous pouvez en connaître certains propriétés du canevas et de la méthode. Les couches de canevas peuvent se chevaucher, de sorte que différents contenus puissent être dessinés sur différentes couches pour faciliter la maintenance et la gestion.

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

À propos de HTML5 pour implémenter la fonction de téléchargement de compression d'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!