As used herein, OpenLayers latest version V5.3.0 Demo: How to use OpenLayer Perfect offset load Baidu offline map tiles. OpenLayers 5.3.0 download address is: https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip .
Baidu offline map tiles download " Mellow map - the map data downloader " (hereinafter referred to as: high-step diagram), the presentation of data to the tile data 12 to 18 Furong District, Changsha, Hunan Province.
Download the demo data
Mellow map selection Baidu map as the current map source, select the map layer as satellite imagery, and switch to download mode, specify the administrative boundary Hunan Furong District, Changsha City to the download area, as shown below:
Click the button [Download] [Download] in the pop-up dialog box, select Download image layer to the base map, check by border crop, export options for tile -PNG- original number, select the level of 12 to 18.
Finally, click [Download] button to start the download. After the download is complete, Alt + W shortcut to open the download task list. Select the download tasks, click the folder icon to open the download demo data directory, as follows:
Open the directory "Images" folder to see 12 to 18 tile data, the standby.
Use OpenLayer load the Google Earth map offline tiles
Any new empty directory named geTileMap; v5.3.0-dist.zip decompressed and copied wherein ol.js, ol.css to geTileMap file directory; tiles before downloading the new empty directory geTileMap directory and copy the 12 to 18 watts Demo piece to tiles directory; finally named the new index.html file.
After the completion of the operation, the directory structure is as follows:
Open index.html enter the following source code:
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>
Paul running the browser in the store demo OpenLayer Perfect offset the effect of load Baidu offline map tiles. Chrome below shows examples of the operation and the partial enlarged theme screenshot:
