Javascript HTML5 Canvas implementiert eine ziehbare Provinzkarte von China

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur chinesischen Karte der ziehbaren Provinzen mithilfe von Javascript-HTML5-Canvas vor. Freunde in Not können darauf verweisen

Dieser Artikel enthält ein Beispiel für die chinesische Kartenimplementierung von ziehbaren Provinzen auf HTML5 Canvas. Der spezifische Inhalt lautet wie folgt:

Für das Zeichnen einer Karte sind Koordinaten der Provinzgrenzen erforderlich Jedes Mal Daten abrufen und zeichnen, aber um die Effizienz zu steigern, werden zunächst alle Koordinaten abgerufen und in der Datenbank gespeichert. Erstellen Sie ein neues Provinzdaten-Array

Code kopieren Der Code lautet wie folgt:var allZoneData = [{' name':'Provinz Liaoning','been':'yes','id':'01'},f8293c9a95b2c800a98c9e08a8fed1e6{'name' :'Jilin Province' ,'been':'yes','id':'02'},...];54bdf357c58b8a65c66d7c19c8e4d114

Fragen Sie das Array ab und fordern Sie die Baidu-API an Erhalten Sie Koordinatendaten basierend auf dem Provinznamen und entspannen Sie die Daten in der Ajax-Methode in PHP. In der Datenbank

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 . Zeichnen Sie eine Karte (die Basiskarte wird auf der MapCanvas-Ebene gezeichnet)

Fragen Sie das Provinz-Array ab, fordern Sie die Koordinaten der Provinzgrenzen über Ajax an und zeichnen Sie dann

<?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. Zeichnen Sie eine bewegliche Linie (Verbindung und die verschobenen Provinzen werden auf der Ebene moveMapCanvas gezeichnet)
Beim Ziehen einer Provinz auf der Karte werden mehrere gerade Linien, die die verschobenen Provinzen und die ursprünglichen Provinzen verbinden, werden angezeigt

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

4. Maus-Presseereignis: Wenn Sie auf die Karte klicken, müssen Sie lediglich die Klickposition bestimmen, die Standortinformationen in Längen- und Breitengrade umwandeln und dann über die Baidu-API den Provinznamen basierend auf den Breiten- und Längengraden abrufen.

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

Mausbewegungsereignis: Erhalten Sie Daten basierend auf dem angeklickten Provinznamen und zeichnen Sie die Provinz der mobilen Ebene in Echtzeit neu

Mouse-up-Ereignis: Ziehen auf „Falsch“ setzen und die bewegte Ebene löschen.

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

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

Zusammenfassung: Die Funktionen und Prinzipien sind sehr einfach, aber einige sind Ihnen vielleicht bekannt Eigenschaften von Leinwand und Methode. Canvas-Ebenen können überlappt werden, sodass unterschiedliche Inhalte auf verschiedenen Ebenen gezeichnet werden können, um die Wartung und Verwaltung zu erleichtern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Weitere Artikel zum Javascript-HTML5-Canvas zur Implementierung einer ziehbaren Provinzkarte von China finden Sie auf der chinesischen PHP-Website!

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