本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer加载谷歌地球离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip 。

谷歌地球离线瓦片下载使用“迈高图-地图数据下载器”（以下简称：迈高图），演示数据以湖南省长沙市7~16级瓦片数据为例。

下载演示数据

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

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

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

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

使用OpenLayer加载高德地图离线瓦片地图

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

完成上述操作后，目录结构如下：

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

<!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 gaodeMapLayer = new ol.layer.Tile({

                source: new ol.source.XYZ({

                    url: 'tiles/{z}/{x}/{y}.png'

                })

            });

            var map = new ol.Map({

                layers: [gaodeMapLayer],

                view: new ol.View({

                    center: [112.8114, 28.3620],

                    projection: 'EPSG:4326',

                    zoom: 12

                }),

                target: 'map'

            });

        </script>

    </body>

</html>

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

后记

高德地图投影和瓦片网格均与谷歌地图一致，可以直接用ol.source.XYZ来加载。

OpenLayers加载高德地图离线瓦片地图的更多相关文章

  1. OpenLayers加载谷歌地球离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  2. openLayers加载高德地图

    之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...

  3. OpenLayers加载百度离线瓦片地图（完美无偏移）

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...

  4. WebGIS开发之用openlayers加载离线百度地图

    因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...

  5. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  6. OpenLayers加载QQ地图(转)

    OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...

  7. ArcGIS加载高德、OSM和谷歌等地图

    1. 引言 网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...

  8. arcgis 加载高德地图 es6的方式

    目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...

  9. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

随机推荐

  1. 验证码破解 | Selenium模拟登录知乎

      import requests import re import execjs import time import hmac from hashlib import sha1 class Zhi ...

  2. 错误解决Caused by: org.hibernate.MappingException: Repeated column in mapping for entity: pers.zhb.domain.Student column: classno (should be mapped with insert="false" update="false")

    1.在学习hibernate的一对多多对一关系的时候,出现了一下错误: 2.错误原因: 这是因为在配置student.hbm.xml的配置文件的时候出现了将两个属性映射到同一个字段: <?xml ...

  3. Problem 3 基站建设 (station.cpp)———2019.10.6

    在此郑重的感激wxyww大佬 wxyww tql [题目描述]小 Z 的爸爸是一位通信工程师,他所在的通信公司最近接到了一个新的通信工程建设任务,他们需要在 C 城建设一批新的基站.C 城的城市规划做 ...

  4. 【LG3783】[SDOI2017]天才黑客

    [LG3783][SDOI2017]天才黑客 题面 洛谷 题解 首先我们有一个非常显然的\(O(m^2)\)算法,就是将每条边看成点, 然后将每个点的所有入边和出边暴力连边跑最短路,我们想办法优化这里 ...

  5. 关于C++中extern的简单笔记

    extern可以实现多文件共享同一个变量.const常量.函数. 下面结合几个例子来讲一下extern的相关性质(下述皆为多文件编译): 例1: //file1.cpp #include<ios ...

  6. 复旦高等代数I（19级）每周一题

    本学期的高等代数每周一题活动计划从第2教学周开始,到第15教学周结束,每周的周末公布一道思考题(共14道,思考题一般与下周授课内容密切相关),供大家思考和解答.每周一题将通过“高等代数官方博客”(以博 ...

  7. webpack vue-cli2 配置打包测试环境

    目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置,但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置,将测试环境和线上环境的打包代码分开就不需要切来切 ...

  8. 2018ECNA Difference[时空复杂度]

    目录 题干 代码和解释 题干 代码和解释 本题给出一个数列的第一个数A(1),要求找出m第一次出现(直接出现在数列中或是数列中某两项的差的绝对值)在这个数列的第几步中.数列递推公式:A(n+1)=A( ...

  9. NOTIC: [8] Trying to get property of non-object

      NOTIC: [8] Trying to get property of non-object /home/wwwroot/qwsd/Application/Admin/Controller/Pr ...

  10. js判断字符串是否以指定字符串开头或是否包含指定字符串

    1.  用js判断一个字符串是否是以某个子字符串开头如:ssss001是否以ssss开头, 可以这样做: 1 2 3 4 5 6 var fdStart = strCode.indexOf(" ...