将经纬度坐标转换成象数点，显示在google Static Map图片上

我是采用html5来处理如何在一张图片上画线，比如一张google static map在上面画路况信息

首先在html上建立容器

然后执行如下js方法

[javascript]  view plain copy

1. function drawRect() {  
2.         var canvas = document.getElementById("canvas");  
3.         var context = canvas.getContext("2d");  
4.         var pic = new Image();  
5.         pic.src = "${url}";  
6.         if(pic.complete){  
7.             context.drawImage(pic, 0, 0);  
8.             ${coorddinates};  
9.         }else{  
10.             pic.onload = function(){  
11.                 pic = new Image();  
12.                 pic.src = "${url}";  
13.                 context.drawImage(pic, 0, 0);  
14.                 ${coorddinates};  
15.                };  
16.         }  
17.   
18.     }  

 

其中coorddinates包含了画线所执行的语句，在后台准备；

现在开始说后台程式的编写，

首先我们会有一段经纬度坐标，我们假设显示的图片大小为320*480的图片上

那么我们就需要赛选哪些经纬度会出现在这个图片上

[java]  view plain copy

1. public static List<DeviceCCTV> getDeviceCCTVInPicture(int zoom,double x,double y,List<DeviceCCTV> list){  
2.   
3.         List<DeviceCCTV> decList = new ArrayList<DeviceCCTV>();  
4.         double zoomLevel0 = 1.40625;  
5.         while(zoom!=0){  
6.             zoomLevel0 = zoomLevel0/2;  
7.             zoom--;  
8.         }  
9.         double Sgx = x+zoomLevel0*240;  
10.         double Egx = x-zoomLevel0*240;  
11.         double Sgy = y+zoomLevel0*160;  
12.         double Egy = y-zoomLevel0*160;  
13.           
14.         for(DeviceCCTV dc:list){  
15.             if(Double.parseDouble(dc.getWgsy())>Egx&&Double.parseDouble(dc.getWgsy())<Sgx){  
16.                 if(Double.parseDouble(dc.getWgsx())>Egy&&Double.parseDouble(dc.getWgsx())<Sgy){  
17.                     decList.add(dc);  
18.                 }  
19.             }  
20.         }  
21.         return decList;  
22.     }    

 

其中参数x Y 为这个google static map中心点的坐标

其中zoomLevel10为map缩放比例为10时，一个像素点转化为1.4625的经纬度差距

故来筛选这张在一定缩放比例上，所能显示的经纬度范围。

这样经纬度准备完毕以后，开始拼接html5所要画图语句：

[java]  view plain copy

1. String coorddinates = "";  
2.         for (Coordinate c : coorddinateList) {  
3.             List<String> pathList = c.getCoordinate();  
4.               
5.             coorddinates += "context.beginPath();";  
6.               
7.             for (int i = 0; i < pathList.size(); i++) {  
8.                 String[] str = pathList.get(i).split(",");  
9.                 double y = 240  
10.                 + DeviceUtil.latToPixel(  
11.                         Double.parseDouble(str[0]), 13)  
12.                 - DeviceUtil.latToPixel(  
13.                         Double.parseDouble(positionArray[0]), 13);  
14.                 double x = 160  
15.                 + DeviceUtil.lngToPixel(  
16.                         Double.parseDouble(str[1]), 13)  
17.                 - DeviceUtil.lngToPixel(  
18.                         Double.parseDouble(positionArray[1]), 13);  
19.                   
20.                 if(i==0){  
21.                       
22.                     coorddinates += "context.moveTo("+(x)+", "+(y)+");";  
23.                 }  
24.                 coorddinates += "context.lineTo("+(x)+", "+(y)+");";  
25.                   
26.             }  
27.             if(c.getColor().equals("#style0")){  
28.                 coorddinates += "context.strokeStyle = '#00ff00';";  
29.             }else if(c.getColor().equals("#style1")){  
30.                 coorddinates += "context.strokeStyle = '#f79708';";  
31.             }else if(c.getColor().equals("#style2")){  
32.                 coorddinates += "context.strokeStyle = '#ff0000';";  
33.             }else if(c.getColor().equals("#style3")){  
34.                 coorddinates += "context.strokeStyle = '##5a5a5a';";  
35.             }  
36.             coorddinates += "context.stroke();";  
37.         }  
38.   
39.         url = url + "format=jpg&sensor=false&mobile=true";  

 

其中需要使用到的 将经度和纬度坐标转换成象数坐标，一这张图片上的中心点（160,240）做计算

那么我是通过计算要画的点与中心点的经纬度差距得到的象数差，得到的象数差再加上中心点的象数值，来得到这个点应该在这个图片上的象数点位置。

那么最后提供的就是将经纬度计算成象数的方法：

[java]  view plain copy

1. /** 
2.      * 经度到象数点 
3.      * @param lng 
4.      * @param zoom 
5.      * @return 
6.      */  
7.     public static double lngToPixel(double lng, int zoom) {  
8.   
9.         return (lng + 180) * (256L << zoom) / 360;  
10.   
11.     }  
12.       
13.     /** 
14.      * 纬度到象数点 
15.      * @param lat 
16.      * @param zoom 
17.      * @return 
18.      */  
19.     public static double latToPixel(double lat, int zoom) {  
20.   
21.         double siny = Math.sin(lat * Math.PI / 180);  
22.   
23.         double y = Math.log((1 + siny) / (1 - siny));  
24.   
25.         return (128 << zoom) * (1 - y / (2 * Math.PI));  
26.   
27.         }  

需要注意的是纬度是横的，经度是竖的，在地球仪上。而在google static map的图片上横向距离为经度差，而纵向距离为纬度差。

最后这样将拼接好的html5语句传给前面所写的js方法里，就可以显示了。