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 = [{&#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>

Fragen Sie das Array ab und fordern Sie die Baidu-API an, um Koordinatendaten zu erhalten basierend auf dem Namen der Provinz und Entspanne die Daten in PHP im Ajax-Modus

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

Nachdem PHP die Daten erhalten hat, analysiert es die Daten und speichert sie Daten in eine vorgefertigte Datenbank

<?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;; 
?>

2. Zeichnen Sie eine Karte (die Basiskarte wird auf der MapCanvas-Ebene gezeichnet)

Fragen Sie das Provinz-Array ab und verwenden Sie Ajax. Fordern Sie die Grenzkoordinaten der Provinz an und zeichnen Sie dann

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

3. Zeichnen die sich bewegende Linie (die Verbindungslinie und die verschobene Provinz werden auf der Ebene „moveMapCanvas“ gezeichnet)

Beim Ziehen einer Provinz auf der Karte erscheinen mehrere gerade Linien, die die verschobene Provinz und die ursprüngliche Provinz verbinden

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

4. Mausklick-Ereignis: Wenn Sie auf die Karte klicken, müssen Sie die Klickposition bestimmen Konvertieren Sie die Standortinformationen in Längen- und Breitengrade und erhalten Sie dann über die Baidu-API den Provinznamen basierend auf Längen- und Breitengraden.

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

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

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

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

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

Zusammenfassung: Die Funktionen und Prinzipien sind sehr einfach, aber Sie können mit einigen Eigenschaften vertraut sein und Methoden der Leinwand. 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.

Verwandte Empfehlungen:

Über HTML5 zur Implementierung der Bildkomprimierungs-Upload-Funktion

Das obige ist der detaillierte Inhalt vonJavascript HTML5 Canvas implementiert eine ziehbare Provinzkarte von China. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!