OpenLayers 3 之加載百度地圖

primivite_ 2017-11-16

展開全文

雖然百度地圖有自己的 JavaScript API,，但是有時候，一個項目已經(jīng)用 OpenLayers 做了很多功能,，不可能棄之不用,，同時，又想使用百度地圖,，該怎么辦呢,？所以很多人想使用 OpenLayers 調(diào)用百度地圖,，本文就討論一下其可能性和實現(xiàn)原理。

一,、地圖調(diào)用原理分析

我們以百度地圖為例,，分析其地圖調(diào)用原理，我們都使用過百度地圖,，在網(wǎng)速不快的情況下,，肯定有過感受，地圖是一塊一塊加載的,，從這里我們就可以看出,，地圖是被切成了很多塊的小圖片，調(diào)用時按照一定規(guī)則請求需要的“切片”,，可視區(qū)域以外的“切片”不加載,，這樣可以減小數(shù)據(jù)傳輸數(shù)據(jù)量，使地圖加載更快,。

我們 F12 查看瀏覽器的網(wǎng)絡(luò)圖片請求,，可以證實我們看到的現(xiàn)象，每一個圖片切片都是 256*256 尺寸的圖片：

地圖請求

圖1 地圖請求

仔細看每一個請求：

http://online0.map./onlinelabel/?qt=tile&x=707&y=217&z=12&styles=pl&udt=20151021&scaler=1&p=1,，

其中,，http://online0.map./onlinelabel/?，表示百度地圖的圖片緩存地址,；qt=tile 表示請求類型（Quest Type）為切片（tile）,；x=707&y=217，請求的切片位于整張地圖中的坐標(biāo)位置,；z=12,，是指當(dāng)前的地圖縮放級別是第 12 級，為什么會分級呢,？因為瀏覽地圖時我們注意到地圖是可以放大縮小的,，放大后我們可以看到地物的更多細節(jié)，同時 z 值會越大,；styles=pl,，可能是返回地圖的樣式；udt=20151021,，應(yīng)該是上一次切片的更新時間（Update DateTime）是2015年10月21號,，為什么需要更新地圖呢？因為地圖是真實世界的抽象,，真實世界就是處在不斷的變化中的,，所以地圖要實時更新；至于后兩個參數(shù) scaler=1&p=1 ，本人不是百度的員工,，就不太清楚是什么了,。

所有的“切片”請求，一共有 21 個,，用網(wǎng)格形式表示“切片”布局如下圖（其中橫坐標(biāo)和縱坐標(biāo)是由請求 URL 中的 x 和 y 參數(shù)決定的）：

切片分布示意圖

圖2 切片分布示意圖

那么我們清楚了地圖請求的原理,，下一步就是要驗證一下請求百度的地圖是否需要一定的權(quán)限呢？我們點擊每一個請求的 URL ,，可以看到其對應(yīng)的圖片,，說明不需要特殊的權(quán)限便可以訪問百度的切片地圖，這樣我們就可以自己編寫程序來調(diào)用百度的切片地圖,。

二,、編寫調(diào)用程序

現(xiàn)在，我們要著手編寫程序調(diào)用百度地圖了,，最終的結(jié)果是在瀏覽器中顯示地圖,，那么我們首先要根據(jù)用戶的交互確定兩個主要的參數(shù)：縮放級別、視圖中需要的切片 x y 索引,。然后構(gòu)造相應(yīng)的請求 URL,，再按照相應(yīng)的索引拼接地圖切片，這樣我們就能完成調(diào)用地圖了,。

好了,，講完原理，我們是否要馬上就開始著手編寫嗎,？不要這么著急下手,，我們在開始一項任務(wù)的時候，首先在比如 GitHub 的開源項目網(wǎng)站上尋找一下是否有已經(jīng)實現(xiàn)你需要功能的開源項目,，要盡量避免重復(fù)造輪子,。OpenLayers 便是我們理想的 JavaScript 工具庫，實現(xiàn)了大部分我們需要的操作,，所以我們不必再需要自己從頭開始構(gòu)建,。

首先貼出實現(xiàn)調(diào)用效果圖：

OpenLayers調(diào)用百度地圖

圖3 OpenLayers 3 調(diào)用百度地圖

2.1 關(guān)鍵代碼

下面是調(diào)用的關(guān)鍵代碼：

<script type="text/javascript">
    var projection = ol.proj.get("EPSG:3857");
    var resolutions = [];
    for(var i=0; i<19; i++){
        resolutions[i] = Math.pow(2, 18-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: resolutions
    });

    var baidu_source = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            if(!tileCoord){
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            if(x<0){
                x = "M"+(-x);
            }
            if(y<0){
                y = "M"+(-y);
            }

            return "http://online3.map./onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1";
        }
    });

    var baidu_layer = new ol.layer.Tile({
        source: baidu_source
    });

    var map = new ol.Map({
        target: 'map',
        layers: [baidu_layer],
        view: new ol.View({
            center:  [12959773,4853101],
            zoom: 12
        })
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

注：
1、頁面需要引用 openlayers 3.10.1,， js 和 css
2,、頁面需要有一個 DIV 元素，其 ID 屬性為 “map”

我們分析一下以上的關(guān)鍵代碼,，首先，初始化一個圖片切片地圖數(shù)據(jù)源,，var baidu_source = new ol.source.TileImage({}),，ol.source.TileImage 是 OpenLayers 中專門負責(zé)調(diào)用地圖以切片圖片存放的類，其中給定了三個參數(shù)，projection 參數(shù)指定了地圖切片使用的坐標(biāo)系,，一般是 EPSG:3857（球形墨卡托投影坐標(biāo)系）,，谷歌地圖、必應(yīng)地圖都是使用的這個坐標(biāo)系,，可以說是國際通用的慣例,，tileGrid 指定了切片使用的網(wǎng)格的模式，tileUrlFunction 指定一個回調(diào)函數(shù),，這個回掉函數(shù)第一個參數(shù)中包含三個變量,，主要是當(dāng)前縮放級別（z），切片的 x y 索引,，每次用戶與地圖交互,，比如縮放、平移等,，就會觸發(fā)會觸發(fā)回調(diào)函數(shù),，該函數(shù)根據(jù)傳入的變量參數(shù)構(gòu)造圖片切片的 URL 地址。

然后,，使用圖片切片地圖數(shù)據(jù)源初始化一個切片圖層： var baidu_layer = new ol.layer.Tile({source: baidu_source }); 最后將圖層加入到地圖中（最后一段代碼）,，這樣我們就完成了核心代碼，刷新頁面,，你就會看到上圖的效果,。

三、總結(jié)

結(jié)果表明,，使用 OpenLayers 3 可以成功調(diào)用百度地圖,。文章里主要講了百度地圖的切片地圖的調(diào)用原理，并簡要闡釋了切片地圖的組織結(jié)構(gòu),，以及使用 OpenLayers 3 調(diào)用百度地圖的關(guān)鍵代碼,。

本文并沒有對其他的地圖做實驗，如谷歌地圖,、必應(yīng)地圖,、騰訊地圖、搜狗地圖,、天地圖等地圖,。如果需要使用相關(guān)地圖，你可以使用本文的方法檢查其可用性,，找出其請求規(guī)律,，然后根據(jù)實際情況構(gòu)造 URL ，替換關(guān)鍵代碼中 tileUrlFunction 中 return 的URL,。

好的,，就寫到這里,，有什么問題，可以到文章下面評論,。