OpenLayers加載百度離線瓦片地圖（完美無偏移）

本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美無偏移加載百度離線瓦片地圖。OpenLayers 5.3.0下載地址爲：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip 。javascript

百度地圖離線瓦片下載使用「邁高圖-地圖數據下載器」（如下簡稱：邁高圖），演示數據以湖南省長沙市芙蓉區12~18級瓦片數據爲例。css

下載演示數據

邁高圖選擇百度地圖爲當前地圖源，地圖圖層選擇爲衛星影像，並切換到下載工做模式，指定湖南省長沙市芙蓉區行政邊界爲下載區域，以下圖：html

單擊【下載】按鈕在彈出的【下載】對話框中選擇下載影像圖層爲底圖，勾選按邊界裁剪，導出選擇爲瓦片-PNG-原始編號，選中級別12~18級。java

最後單擊【下載】按鈕開始下載。下載完成後，Alt+W快捷鍵打開下載任務列表。選中下載任務單擊文件夾圖標打開下載演示數據所在目錄，以下圖：git

打開目錄下「影像」文件夾，便可看到12~18級瓦片數據，備用。github

使用OpenLayer加載谷歌地球離線瓦片地圖

任意新建空目錄命名爲geTileMap；解壓v5.3.0-dist.zip並複製其中ol.js、ol.css文件至geTileMap目錄；geTileMap目錄下新建tiles空目錄，並複製以前下載的12~18級演示瓦片至tiles目錄；最後新建名爲index.html文件。瀏覽器

完成上述操做後，目錄結構以下：spa

打開index.html輸入以下源碼：設計

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Openlayer Tile Map</title>
 6         <link type="text/css" href="ol.css" rel="stylesheet" />
 7         <script type="text/javascript" src="ol.js" charset="utf-8"></script>
 8         <script type="text/javascript" src="http://www.megomap.com/ol/bd09.js" charset="utf-8"></script>
 9     </head>
10     <body>
11         <div id="map" style="width: 100%"></div>
12         <script>
13             /*定義百度投影，這是實現無偏移加載百度地圖離線瓦片核心所在。 14  網上不少相關資料在用OpenLayers加載百度地圖離線瓦片時都認爲投影就是EPSG:3857(也就是Web墨卡託投影)。 15  事實上這是錯誤的，所以沒法作到無偏移加載。 16  百度地圖有本身獨特的投影體系，必須在OpenLayers中自定義百度投影，才能實現無偏移加載。 17  百度投影實現的核心文件爲bd09.js，在邁高圖官網能夠找到查看這個文件。*/
18             var projBD09 = new ol.proj.Projection({ 19  code: 'BD:09', 20  extent : [-20037726.37,-11708041.66,20037726.37,12474104.17], 21  units: 'm', 22  axisOrientation: 'neu', 23  global: false
24  }); 25                   
26  ol.proj.addProjection(projBD09); 27  ol.proj.addCoordinateTransforms("EPSG:4326", "BD:09", 28                 function (coordinate) { 29                     return lngLatToMercator(coordinate); 30  }, 31                 function (coordinate) { 32                     return mercatorToLngLat(coordinate); 33  } 34  ); 35             
36             /*定義百度地圖分辨率與瓦片網格*/
37             var resolutions = []; 38             for (var i = 0; i <= 18; i++) { 39  resolutions[i] = Math.pow(2, 18 - i); 40  } 41 
42             var tilegrid = new ol.tilegrid.TileGrid({ 43  origin: [0, 0], 44  resolutions: resolutions 45  }); 46 
47             /*加載百度地圖離線瓦片不能用ol.source.XYZ，ol.source.XYZ針對谷歌地圖（注意：是谷歌地圖）而設計， 48  而百度地圖與谷歌地圖使用了不一樣的投影、分辨率和瓦片網格。所以這裏使用ol.source.TileImage來自行指定 49  投影、分辨率、瓦片網格。*/
50             var source = new ol.source.TileImage({ 51  projection: "BD:09", 52  tileGrid: tilegrid, 53  tileUrlFunction: function(tileCoord, pixelRatio, proj) { 54                     var z = tileCoord[0]; 55                     var x = tileCoord[1]; 56                     var y = tileCoord[2]; 57 
58                     return 'tiles/' + z + '/' + x + '/' + y + '.png'; 59  } 60  }); 61 
62             var mapLayer = new ol.layer.Tile({ 63  source: source 64  }); 65 
66             new ol.Map({ 67  layers: [ 68  mapLayer 69  ], 70  view: new ol.View({ 71  center: ol.proj.transform([113.03914, 28.20354], 'EPSG:4326', 'BD:09'), 72  projection: 'BD:09', 73  zoom: 14
74  }), 75  target: 'map'
76  }); 77         </script>
78     </body>
79 </html>

保存後瀏覽器中運行演示OpenLayer完美無偏移加載百度離線瓦片地圖效果。下圖爲Chrome中運行實例截圖和局部放大後截圖：

原文出處：https://www.cnblogs.com/megomap/p/12026114.html3d