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级。
最后单击【下载】按钮开始下载。下载完成后,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中运行实例截图和局部放大后截图:
OpenLayers加载谷歌地球离线瓦片地图的更多相关文章
- OpenLayers学习笔记(一)—在线加载谷歌影像地图&离线加载本地瓦片地图
实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...
- OpenLayers加载谷歌地图服务
谷歌地图的地址如下: 谷歌交通地图地址:http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i3800725 ...
- OpenLayers加载高德地图离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- OpenLayers加载百度离线瓦片地图(完美无偏移)
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- WebGIS开发之用openlayers加载离线百度地图
因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...
- OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
- openlayers 加载瓦片详解 一
在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- ArcGIS API for Silverlight中加载Google地形图(瓦片图)
原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS ...
随机推荐
- cc2530的I/O中断
通用I/O的中断 cc2530的CPU有18个中断源,每个中断都可以分别使能和控制. 18个中断源的优先级 18个中断源分为6个组,每一组有3个中断源,中断优先级可以通过配置相应寄存器来实现 中断源的 ...
- 4GB以上超大文件上传和断点续传服务器的实现
随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的 ...
- pipelinewise 基于singer 指南的的数据pipeline 工具
pipelinewise 是基于开源singer 指南开发的数据pipeline工具,与singer tap 以及target 兼容 支持的特性 内置的elt 特性 轻量级 支持多种复制方法,cdc( ...
- bootstrap-全局CSS&js插件
一.全局CSS 1.概述 1. 全局CSS样式: * 按钮:class="btn btn-default" * 图片: * class="img-responsive&q ...
- 【luoguP4720】【模板】扩展卢卡斯
快速阶乘与(扩展)卢卡斯定理 \(p\)为质数时 考虑 \(n!~mod~p\) 的性质 当\(n>>p\)时,不妨将\(n!\)中的因子\(p\)提出来 \(n!\) 可以写成 \(a* ...
- Math小记
20161231 黄金分割比:短/长=长/(短+长)=((根号5)-1)/2 ≍ 0.618 斐波那契数列前后两项的比值存在极限.设其中三个数为a.b.(a+b),则当项数趋于无穷时有a/b=b/(a ...
- ZooKeeper入门实战教程(一)-介绍与核心概念
1.ZooKeeper介绍与核心概念1.1 简介ZooKeeper最为主要的使用场景,是作为分布式系统的分布式协同服务.在学习zookeeper之前,先要对分布式系统的概念有所了解,否则你将完全不知道 ...
- Multihypothesis Trajectory Analysis for Robust Visual Tracking
Multihypothesis Trajectory Analysis for Robust Visual Tracking 2019-10-27 14:33:49 Paper: https://ww ...
- freeNas 数据record
- leetcode 968. Binary Tree Cameras
968. Binary Tree Cameras 思路:如果子节点只能覆盖到父节点.当前节点,但是父节点可以覆盖到他的父节点.子节点.当前节点,所以从叶子节点往上考虑 0代表子节点没有被覆盖 1代表子 ...