OpenLayers-加載地圖數據(Google Map)

本文轉載自查看原文 2013-02-17 11:13 14260 OpenLayers/ WebGIS

除了WMS地圖外，OpenLayers可以直接添加Google Map, Microsoft Virtual Earth等地圖。

1. 添加google map的key
使用google map的數據需要google map的一個key。OpenLayers的examples里面有一個key，可以直接使用。也可以在https://developers.google.com/maps/signup?hl=zh-cn上獲取一個自己的key。

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
2）

2. 創建OpenLayers Google 圖層對象

<script  type="text/javascript">
    
    var map = null;
    function init()
    {
        //創建map對象，
        map = new OpenLayers.Map("map");
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        
        //創建google Map圖層對象
        var gphy = new OpenLayers.Layer.Google(
            "Google Physical",                      //Google Map Physical圖層
            {type: G_PHYSICAL_MAP}
        );
        var gmap = new OpenLayers.Layer.Google(
            "Google Streets",                       //Google Map Streets圖層
            {numZoomLevels: 20}                     //設置Google Map的zoom級別
        );
        var ghyb = new OpenLayers.Layer.Google(
            "Google Hybrid",                        //Google Physical圖層
            {type: G_HYBRID_MAP, numZoomLevels: 20}
        );
        var gsat = new OpenLayers.Layer.Google(
            "Google Satellite",                     //Google Map Satellite圖層
            {type: G_SATELLITE_MAP, numZoomLevels: 22}
        );

        // 添加圖層
        map.addLayers([gphy, gmap, ghyb, gsat]);
        // 放大到全屏
        map.zoomToMaxExtent();
    }
  </script>

3. 設置html的onload函數

<BODY onload="init()">

然后打開網頁就可以看到OpenLayers加載的Google Map地圖。通過右側的Layer Switch可以切換圖層。

完整的代碼如下所示：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> Google Map </TITLE>
 5   <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />
 6   <link rel="stylesheet" href="css/style.css" type="text/css" />
 7   <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>
 8   <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
 9   <script  type="text/javascript">
10     
11     var map = null;
12     function init()
13     {
14         //創建map對象，
15         map = new OpenLayers.Map("map");
16         map.addControl(new OpenLayers.Control.LayerSwitcher());
17         
18         //創建google Map圖層對象
19         var gphy = new OpenLayers.Layer.Google(
20             "Google Physical",                      //Google Map Physical圖層
21             {type: G_PHYSICAL_MAP}
22         );
23         var gmap = new OpenLayers.Layer.Google(
24             "Google Streets",                       //Google Map Streets圖層
25             {numZoomLevels: 20}                     //設置Google Map的zoom級別
26         );
27         var ghyb = new OpenLayers.Layer.Google(
28             "Google Hybrid",                        //Google Physical圖層
29             {type: G_HYBRID_MAP, numZoomLevels: 20}
30         );
31         var gsat = new OpenLayers.Layer.Google(
32             "Google Satellite",                     //Google Map Satellite圖層
33             {type: G_SATELLITE_MAP, numZoomLevels: 22}
34         );
35 
36         // 添加圖層
37         map.addLayers([gphy, gmap, ghyb, gsat]);
38         // 放大到全屏
39         map.zoomToMaxExtent();
40     }
41   </script>
42 
43  </HEAD>
44 
45  <BODY onload="init()">
46   <div id="map" class="smallmap"></div>
47  </BODY>
48 </HTML>

免責聲明！

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

猜您在找 openlayers之加載谷歌地圖 OpenLayers加載QQ地圖 OpenLayers加載天地圖基於OpenLayers加載電子地圖（一） OpenLayers-第一個程序 Openlayers+Geoserver（一）：項目介紹以及地圖加載 openlayers加載天地圖WMTS服務使用openlayers 3 在線加載天地圖及GeoServer發布的地圖 OpenLayers加載高德地圖離線瓦片地圖 vue中openlayers 加載離線瓦片地圖