javascript html5 캔버스는 드래그 가능한 중국 지방 지도를 구현합니다.

이 글은 주로 자바스크립트 html5 캔버스를 이용하여 드래그 가능한 중국 지도 관련 정보를 소개하고 있습니다. 도움이 필요한 친구가 참고할 수 있습니다.

이 글은 html5에서 드래그 가능한 중국 지도 구현의 예를 공유합니다. canvas.method 참고로 구체적인 내용은 다음과 같습니다

1. 데이터 획득
지도를 그리려면 이론적으로 Baidu API를 사용하면 됩니다. 매번 데이터를 얻어서 그리지만 효율성을 높이기 위해 먼저 모든 좌표를 얻어 데이터베이스에 저장합니다.
새 지방 데이터 배열 만들기

코드 복사 코드는 다음과 같습니다.

var allZoneData = [{' name':'랴오닝성','been':'yes','id':'01'},f8293c9a95b2c800a98c9e08a8fed1e6{'name' :'Jilin Province' ,'been':'yes','id':'02'},...];54bdf357c58b8a65c66d7c19c8e4d114

배열을 폴링하고 Baidu API를 요청합니다. 지방 이름을 기준으로 좌표 데이터를 얻고 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: {&#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;); 
    } 
   });   
  }         
 });         
}

php가 데이터를 가져온 후 데이터를 구문 분석합니다. 사전 구축된 데이터베이스에 데이터를 저장합니다

<?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. 지도 그리기(기본 지도는 mapCanvas 레이어에 그려집니다) )
지방 배열을 폴링하고 Ajax 방식을 사용하여 해당 지방의 경계 좌표를 요청한 후

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. 이동선 그리기 (moveMapCanvas 레이어에 연결선과 이동 지방이 그려짐)
지도에서 지방을 드래그하면 이동한 지방과 원래 지방을 연결하는 여러 개의 직선이 나타납니다

rreee

4. 이벤트마우스 누르기 이벤트 : 지도를 클릭했을 때 해야 할 일은 클릭 위치를 파악하고 위치 정보를 경도와 위도로 변환한 후 Baidu API 지역 이름을 통해 경도와 위도를 기준으로 가져옵니다.

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

마우스 이동 이벤트: 클릭한 지방명을 기준으로 데이터를 획득하고 실시간으로 모바일 레이어의 지방을 다시 그립니다

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

마우스 업 이벤트: 드래그를 false로 설정하고 이동 레이어를 지웁니다.

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

요약: 기능과 원리는 매우 간단하지만 몇 가지 속성과 캔버스의 방법. 캔버스 레이어를 서로 겹쳐서 서로 다른 레이어에 서로 다른 콘텐츠를 그려 유지 관리를 용이하게 할 수 있습니다.

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

드래그 가능한 중국 지방 지도를 구현하는 javascript html5 캔버스와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!