>웹 프론트엔드 >H5 튜토리얼 >javascript html5 캔버스는 드래그 가능한 중국 지방 지도를 구현합니다.

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

不言
不言원래의
2018-06-05 14:29:504701검색

이 글은 주로 자바스크립트 html5 캔버스를 이용하여 중국 드래그 가능한 성 지도 관련 정보를 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.

이 글은 드래그 가능한 중국 성 지도를 자바스크립트 html5 캔버스로 구현하는 방법의 예를 공유합니다. 구체적인 내용은 다음과 같습니다

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

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

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>

배열을 폴링하고 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 == &#39;yes&#39;){ 
  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에 그려집니다.) 레이어)
지도에서 지방을 드래그하면 여러 연결이 나타납니다. 이동한 지방과 원래 지방 사이의 직선

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 이벤트
마우스 누르기 이벤트: 지도를 클릭할 때 , 당신이 해야 할 일은 클릭 위치를 결정하고 위치 정보를 경도와 위도로 변환한 다음 Baidu API를 통해 위도와 경도를 기반으로 지방 이름을 얻는 것입니다.

$(&#39;#eventCanvas&#39;).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 = &#39;&#39;; 
    draging = true; 
    name = result.addressComponents.province; 
    tempName = name; 
    pubFuns.drawMoveLayerLine(0,0);    
  }); 
 } 
});

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

$(&#39;#eventCanvas&#39;).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); 
   }  
  } 
});

마우스 들어올리기 이벤트: 드래그를 false로 설정, 해제 모바일 레이어.

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

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

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

관련 권장 사항:

이미지 압축 업로드 기능을 구현하는 HTML5 정보

위 내용은 javascript html5 캔버스는 드래그 가능한 중국 지방 지도를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.