OpenLayers加载谷歌地球离线瓦片地图
2024-08-21 18:48:10
本文使用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级。
最后单击【下载】按钮开始下载。下载完成后,Alt+W快捷键打开下载任务列表。选中下载任务单击文件夹图标打开下载演示数据所在目录,如下图:
打开目录下“影像”文件夹,即可看到10~17级瓦片数据,备用。
使用OpenLayer加载谷歌地球离线瓦片地图
任意新建空目录命名为geTileMap;解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTileMap目录;geTileMap目录下新建tiles空目录,并复制之前下载的10~17级演示瓦片至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 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中运行实例截图和局部放大后截图:
最新文章
- 谈BFC和haslayout
- 微信开放平台,微信登陆第三方网站 提示redirect_uri 参数错误
- 集DDD,TDD,SOLID,MVVM,DI,EF,Angularjs等于一身的.NET(C#)开源可扩展电商系统–Virto Commerce
- Mac OS X 中安装JDK 7
- matlab求距一个数最近的奇(偶)数
- How to cancel parallel loops in .NET C# z
- C语言:Message类
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
- Android FragmentStatePageAdapter的使用Demo
- 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交
- C# delegate的匿名方法
- C#生成随机汉字
- LimeSDR 无线信号重放攻击和逆向分析
- Java学习笔记之——static关键字
- Vue基础进阶 之 实例方法--生命周期
- Python2.7-marshal
- 使用JavaScript缓存图片
- iOS 应用中打开其他应用 (转)
- Dungeon Master---2251(bfs)
- PyQt5-GUI生成随机生成小工具
热门文章
- [ARC064F] Rotated Palindromes
- webpack打包vue单文件组件
- Mac 无法安装安装psutil 报错 error: command &#39;/usr/bin/clang&#39; failed with exit status 1
- 【LG3582】[POI2015]KIN
- SQL基础-游标&;事务
- COCI 2015、2016 1st round 题解(官方)
- 这个中秋,我用 Java 画了一个月饼!
- 阿里云服务器25端口禁用之如何使用Java发邮件(解决25端口禁用问题)
- 算法题----任意进制转换(C++)
- mac jq for json format