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 。
谷歌地球离线瓦片下载使用“迈高图-地图数据下载器”(以下简称:迈高图),演示数据以湖南省长沙市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加载高德地图离线瓦片地图的更多相关文章
- OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- openLayers加载高德地图
之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...
- OpenLayers加载百度离线瓦片地图(完美无偏移)
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- WebGIS开发之用openlayers加载离线百度地图
因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...
- (转)Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
- OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
- ArcGIS加载高德、OSM和谷歌等地图
1. 引言 网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...
- arcgis 加载高德地图 es6的方式
目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...
- ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...
随机推荐
- Selenium元素定位的几种方式
一.通过id查找 例:<input id="kw" name="wd" class="s_ipt" value="" ...
- (尚033)Vue_案例_slot(组件间的通信4:slot)
1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿 ...
- Numpy | 04 数组属性
NumPy 数组的维数称为秩(rank),一维数组的秩为 1,二维数组的秩为 2,以此类推. 在 NumPy中,每一个线性的数组称为是一个轴(axis),也就是维度(dimensions).比如说,二 ...
- kafka消费端提交offset的方式
Kafka 提供了 3 种提交 offset 的方式 自动提交 复制 1234 consumer.commitSync(); 手动异步提交 offset 复制 1 consumer.commitAsy ...
- SQL进阶-去重
一.去重的2种基本方法 1.DISTINCT ## 建表: CREATE TABLE teacher( teacher_id ), teacher_name ), id_no ) ); CREATE ...
- Logback的基本使用方法
一.Logback简介 Logback是由log4j创始人设计的又一个开源日志组件. 1.logback当前分成三个模块:logback-core,logback- classic和logback-a ...
- Element + Vue I18n动态import加载国际化语言包翻译文件
需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...
- 自动创建Kibana索引
参考 https://www.cnblogs.com/dance-walter/p/10471950.html 参考 https://www.elastic.co/guide/en/kibana/cu ...
- PHP & JS 链接跳转的几种方式
网站开发中,我们经常需要使用链接跳转,比如登录成功后,自动跳转到首页等等,下面方面介绍 PHP & JS 的几种链接跳转方式 PHP <?php header("Locatio ...
- scrapy入门案例
一. 新建项目(scrapy startproject) 在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令: scrapy startproject scrapy ...