在map下,怎么对一个地区进行矩形划分

在地图上,如何对一个地区进行矩形划分

首先先看下效果图

在map下,怎么对一个地区进行矩形划分

 

主要是先根据百度百科确定北京区域所在的经纬度,然后计算大概。并且在地图上画矩形的经纬度顺序是

左,左上,右上,右,按照顺时针方向进行设置。如果顺序反了可能画出的就不是矩形了

本文是调用第三方高德的地图API。

下面给出源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">   
    html { height:100% }   
    body { height:100%; margin:0px; padding:0px }  
    #container { height:100% }   
	</style>   
	<script type="text/javascript"  
	    src="http://api.amap.com/webapi/init?v=1.1">   
	</script>      
	
	<script type="text/javascript">   
	    function initialize() {   
	        var mapObj = new AMap.Map("container"); // 创建地图实例   
	        //var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标   
	        // mapObj.setCenter(point); // 设置地图中心点坐标   
	        
	       
	       
	          //北京:北纬39度54分20秒,东经116度25分29秒;全市南北跨纬度1度37分,东西跨经度2度05分。
	          
	         //北京区域所在经度
	         var leftX=117.2829,leftTopX=117.2829,rightTopX=115.2529,rightX=115.2529;
	         //北京区域所在纬度
	         var leftY=40.92220,leftTopY=39.2620,rightTopY=39.2620,rightY=40.92220;
	         
	         //设置经纬度分为多少段
	         var partX=2,partY=2;
	         
	         //计算经纬度相差数量
	         var differX=leftX-rightX;
	         var differY=leftY-leftTopY;
	         //计算经纬度每段间隔多少
	         var intervalX=differX/partX;
	         var intervalY=differY/partY;
	        // alert(intervalX+":"+intervalY);
	         //以上参数设置完毕后,这里是按照从左到右的顺序来确定各个区域的经纬度
	         
	         var lX,lTopX,rTopX,rX;
	         var lY,lTopY,rTopY,rY;
	         
	         var num=0;//设置多边形id
	         
	          for(var i=0;i<=partX;i++){
	          	   for(var j=0;j<=partY;j++){
	          	      		var arr = new Array();//经纬度坐标数组 
	          	   				
	          	   				lX= (leftX-intervalX*i).toString();
					          	lTopX= (leftX-intervalX*i).toString();
					          	rTopX= (leftX-intervalX*(i+1)).toString();
					          	rX= (leftX-intervalX*(i+1)).toString();
					          	
					          	lY= (leftY-intervalY*j).toString();;
					          	lTopY= (leftY-intervalY*(j+1)).toString();
					          	rTopY= (leftY-intervalY*(j+1)).toString();
					          	rY= (leftY-intervalY*j).toString();
					          	
					        
					          	
					          	arr.push(new AMap.LngLat(lX,lY));    
						        arr.push(new AMap.LngLat(lTopX,lTopY));    
						        arr.push(new AMap.LngLat(rTopX,rTopY)); 
						        arr.push(new AMap.LngLat(rX,rY));  
						  		
						  		
						  		var polygon=new AMap.Polygon({   
							        id:"polygon"+num,//多边形ID   
							        path:arr,//多边形顶点经纬度数组   
							        strokeColor:"#0000ff",//线颜色   
							        strokeOpacity:0.2,//线透明度   
							        strokeWeight:3, //线宽   
							        fillColor: "#f5deb3",//填充色   
							        fillOpacity: 0.35 //填充透明度   
							    });   
							    mapObj.addOverlays(polygon);  
		    
							  
		          		num++;
		     		  }
	         
	          	   
	          	   }
	          	
	        
	          
	
	    }   
	</script>   
	
  </head>
  
  
   <body onload="initialize()">     
    <div id="container"></div> 
 
</body>  
 
</html>


 

 

在源码中也有注释,如果有不明白的,可以留言咨询,谢谢大家。