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 。

谷歌地球离线瓦片下载使用“迈高图-地图数据下载器”(以下简称:迈高图),演示数据以湖南省长沙市芙蓉区10~17级瓦片数据为例。

 

下载演示数据

迈高图选择谷歌地球为当前地图源,地图图层选择为卫星影像,并切换到下载工作模式,指定湖南省长沙市芙蓉区行政边界为下载区域,如下图:

单击【下载】按钮在弹出的【下载】对话框中选择下载影像图层为底图,勾选按边界裁剪,导出选择为瓦片-PNG-原始编号,选中级别10~17级。

OpenLayers加载谷歌地球离线瓦片地图_第1张图片

最后单击【下载】按钮开始下载。下载完成后,Alt+W快捷键打开下载任务列表。选中下载任务单击文件夹图标打开下载演示数据所在目录,如下图:

OpenLayers加载谷歌地球离线瓦片地图_第2张图片

打开目录下“影像”文件夹,即可看到10~17级瓦片数据,备用。

使用OpenLayer加载谷歌地球离线瓦片地图

任意新建空目录命名为geTileMap;解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTileMap目录;geTileMap目录下新建tiles空目录,并复制之前下载的10~17级演示瓦片至tiles目录;最后新建名为index.html文件。

完成上述操作后,目录结构如下:

OpenLayers加载谷歌地球离线瓦片地图_第3张图片

打开index.html输入如下源码:

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Openlayer Tile Maptitle>
        <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>

 

保存后浏览器中运行演示OpenLayer加载谷歌地球离线瓦片地图效果。下图为Chrome中运行实例截图和局部放大后截图:

OpenLayers加载谷歌地球离线瓦片地图_第4张图片

OpenLayers加载谷歌地球离线瓦片地图_第5张图片

你可能感兴趣的:(OpenLayers加载谷歌地球离线瓦片地图)