openlayers之加載谷歌地圖


之前項目中一直使用高德地圖作為底圖,但高德地圖影像圖只限於城市地區,所以決定替換為谷歌地圖。其實一直以為谷歌地圖不能訪問,不知道有沒有像我一樣懶的小伙伴……

加載谷歌地圖的地址總結如下:

谷歌交通地圖地址:http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0,

平面圖地址2:http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z},

影像圖地址:http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z},

影像注記層地址:http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z},

地形圖層:http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}

第二個平面圖會出現注記有英文的情況,如下圖所示,所以使用谷歌交通圖比較好。

 

 

查詢谷歌地圖的加載,參考了以下博客:

http://blog.csdn.net/smilecoffin/article/details/72863967,谷歌交通地圖地址來源於此,特地打開谷歌地圖對比,卻找不到這樣的地址;影像圖的地址可以找到。

另外參考leaflet.ChineseTmsProviders插件(詳見博客http://blog.csdn.net/GISuuser/article/details/77600052)和http://www.360doc.com/content/14/0917/16/7931690_410213814.shtml 得知lyrs=后面的參數,h代表注記層,s代表影像層,m代表平面圖層,t代表地形圖層。

測試代碼如下:

 1 <!DOCTYPE html>  
 2 <html xmlns="http://www.w3.org/1999/xhtml">  
 3 <head>  
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 5     <title></title>  
 6     <script src="js/lib/ol.js"></script>  
 7     <link rel="stylesheet" href="css/ol.css" type="text/css">
 8     <script type="text/javascript">  
 9         window.onload = function () {  
10             var googleMapLayer = new ol.layer.Tile({  
11                 source: new ol.source.XYZ({  
12                     url:'http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'
13 //                  url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
14 //谷歌衛星地圖         url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
15 //                    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
16 //                    url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
17 //                    url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
18 
19                 })
20             });  
21   
22             var map = new ol.Map({  
23                 layers: [googleMapLayer],  
24                 view: new ol.View({  
25                     center: [106.51, 29.55],  
26                     projection: 'EPSG:4326',  
27                     zoom: 10  
28                 }),  
29                 target: 'map'  
30             });  
31         };  
32     </script>  
33 </head>  
34 <body>  
35     <div id="map"></div>  
36 </body>  
37 </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM