As used herein, OpenLayers latest version V5.3.0 Demo: How to use Google Earth to load OpenLayer 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 .
Google Earth offline tiles download " Mellow map - the map data downloader " (hereinafter referred to as: Mellow chart), presentation data 10 to 17 of the tile data Hunan Furong District, Changsha City.
Download the demo data
Mellow Fig select Google Earth map for the current source, choose map layers as satellite imagery, and switch to download mode, specify the administrative boundary Furong District, Changsha City, Hunan Province 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 10 to 17.
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 10 to 17 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 10 to 17 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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Openlayer Tile Map</title> <link type="text/css" href="ol.css" rel="stylesheet" /> <script type="text/javascript" src="ol.js" charset="utf-8"></script> </head> <body> <div id="map" style="width: 100%"></div> <script> /*定义谷歌地球分辨率与瓦片网格*/ var maxResolution = 180.0 / 256; var resolutions = []; for (var i = 1; i <= 20; i++) { resolutions[i] = Math.pow(2, 1 - i) * maxResolution; } var tilegrid = new ol.tilegrid.TileGrid({ origin: [-180, 180], resolutions: resolutions }); /*加载谷歌地球瓦片不能用ol.source.XYZ，ol.source.XYZ针对谷歌地图（注意：是谷歌地图）而设计， 而谷歌地球与谷歌地图用不同的投影、分辨率和瓦片网格。因此这里使用ol.source.TileImage来自行指定 投影、分辨率、瓦片网格。*/ var source = new ol.source.TileImage({ projection: 'EPSG:4326', tileGrid: tilegrid, tileUrlFunction: function(tileCoord, pixelRatio, proj) { var z = tileCoord[0]; var x = tileCoord[1]; /*由于OpenLayers5依然没有提供定义瓦片网格编号在X/Y轴上增长方向的入口. 这里用了个小技巧来明确这一信息。*/ var y = -tileCoord[2] - 1; return 'tiles/' + z + '/' + x + '/' + y + '.png'; } }); var mapLayer = new ol.layer.Tile({ source: source }); new ol.Map({ layers: [ mapLayer ], view: new ol.View({ center: [113.03914, 28.20354], projection: 'EPSG:4326', zoom: 14 }), target: 'map' }); </script> </body> </html>
After running the browser save your OpenLayer loaded Google Earth offline map tiles effect. Chrome below shows examples of the operation and the partial enlarged theme screenshot:
