关键词：
上一篇文章介绍了使用openlayers3加载百度在线地图，对某些项目或应用场景比如不允许上外网的单位，某些项目只针对一定区域地图加载应用，比如一个县的地图，可以采用下载百度瓦片地图，在服务器或者本机单独部署的方式进行。
本篇主要讲述如何使用openlayers3调用下载的百度离线瓦片地图。瓦片地图下载器，网上有很多，在此不做详细描述。
Openlayers3加载离线百度瓦片地图，效果以及代码如下：
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ol/ol3/css/ol.css" />
<style type="text/css">
body, #mainMap {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
</style>
<script type="text/javascript" src="ol/ol3/build/ol-debug.js"></script>
</head>
<body>
<div id="mainMap">
</div>
</body>
</html>
<script type="text/javascript">
// 自定义分辨率和瓦片坐标系
var resolutions = [];
var maxZoom = 18;
// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
resolutions[i] = Math.pow(2, maxZoom - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions // 设置分辨率
});
// 创建百度地图的数据源
var baiduSource = new ol.source.TileImage({
projection: ‘EPSG:3857‘,
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
// 百度瓦片服务url将负数使用M前缀来标识
if (x < 0) {
x = -x;
}
if (y < 0) {
y = -y;
}
return "tiles/" + z + "/" + x + "/" + y + ".png";
}
});
// 百度地图层
var baiduMapLayer2 = new ol.layer.Tile({
source: baiduSource
});
// 创建地图
var map =new ol.Map({
layers: [
baiduMapLayer2
],
view: new ol.View({
// 设置成都为地图中心
center: ol.proj.transform([104.06, 30.67], ‘EPSG:4326‘, ‘EPSG:3857‘),
zoom: 3
}),
target: ‘mainMap‘
});
</script>
openlayers应用“三”：百度地图纠偏
前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图，页面上能够正常显示。地图加载后在地图上显示一条GPS轨迹，发现离实际位置相差太远，如下图所示： 轨迹形状和实际形状相同，但是位移太远，采用坐标加偏移的... 查看详情
android端实践openlayers离线地图
参考技术A笔者最近实践了利用openlayers在androidapp中实现离线地图应用，本文记录了笔者实践的思路。1、加载本地的地图瓦片；2、GPS定位；3、叠加部件（矢量）图层；android端用webview加载在线页面或离线的html页面都是没问题的，... 查看详情
openlayers3应用“三’”：百度地图坐标纠偏
前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图，页面上能够正常显示。地图加载后在地图上显示一条GPS轨迹，发现离实际位置相差太远，如下图所示： 650)this.width=650;"src="https://s5.51cto.com/wyfs02/M01/8F/34/wKioL1jXuLLQyiVQAAM... 查看详情
openlayers3加载百度高德google瓦片地图
1、加载高德地图//高德地图varAMapLayer=newol.layer.Tile({source:newol.source.XYZ({url:‘http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}‘})});2、google地图/ 查看详情
离线地图解决方案：加载瓦片地图
...google地图等。针对局域网内网内脱离要脱离互联网访问的应用，需要下载这些主流厂商的瓦片数据。网上有很多地图下载器软件可以下载地图瓦片，可以通过各种方式获取到这些地图厂商的瓦片数据。加载高德离线瓦片数据：650... 查看详情
qt之加载百度离线地图（webkit和webengine）
最近翻看进年前写了一篇关于百度离线地图的博客：Qt加载百度离线地图，发现存在很多问题，比如不能加载折线等图形覆盖物；只支持QtWebKit，不支持QtWebEngine。之前做项目需要在百度离线地图上绘制Mesh网络拓扑图，必须添加... 查看详情
openlayers使用百度地图瓦片偏移问题解决方案
参考技术Ahttps://github.com/openlayers/openlayers/issues/3522期初项目中是把所有的坐标点进行坐标转换,与百度地图保持一致,但是自定义瓦片地图始终会跟百度的瓦片对不上.于是找到上述方案,直接新建了百度的投影坐标系,这样百度就可... 查看详情
百度地图api可以加载本地瓦片吗
参考技术A可以的，但是你需要用离线API，瓦片切片规则也要符合百度的切片规则 查看详情
使用openlayers绘制geoserver离线瓦片(代码片段)
需求将遥感影像tif数据通过Geoserver进行发布，为了加快服务器响应速度，我们使用Geoserver对遥感数据做了缓存处理，如下图，使用离线瓦片，我这里出现了中文不识别的问题，因此没法直接Submit去执行切片... 查看详情
openlayers调用瓦片地图分析
网上有诸多资料介绍openlayers如何调用百度地图或者是天地图等常见互联网地图，本文作者使用的是不是常见的互联网瓦片，现将调用过程进行整理与大家分享。首先，openlayers就不赘述了（官网：http://openlayers.org/），之前一直使... 查看详情
openlayers3应用“四’”：百度地图坐标纠偏续
续前一篇，上一篇提到百度地图纠偏的基本思路，经过经过一天的努力，实现了百度地图坐标偏移参数的提取，步骤以及实现效果如下：1、数据来源：四川省的省道矢量数据2、提取坐标偏移参数的过程如下：A、将四川省地图范... 查看详情
openlayers系列关于地图投影的理解
...中存储一部分瓦片数据，写一个简单的存取服务器，使用Openlayers客户端加载瓦片进行展示。本来是个挺简单的功能，可是谁曾想，“打了一辈子鹰，却被鹰啄瞎了眼”。在使用Openlayers客户端进行瓦片加载时，出现了加载的瓦片... 查看详情
使用openlayers绘制geoserver离线瓦片(代码片段)
需求将遥感影像tif数据通过Geoserver进行发布，为了加快服务器响应速度，我们使用Geoserver对遥感数据做了缓存处理，如下图，使用离线瓦片，我这里出现了中文不识别的问题，因此没法直接Submit去执行切片... 查看详情
openlayers6结合geoserver实现地图矢量瓦片(附源码下载)(代码片段)
内容概览1.基于openlayers6结合geoserver实现地图矢量瓦片2.源代码demo下载效果图如下：实现思路：利用Geoserver发布矢量切片服务，然后openlayers调用矢量瓦片服务渲染加载，geoserver发布矢量服务步骤自行百度搜索相关教程，网上很多... 查看详情
openlayer3-加载第三方地图，百度，谷歌等
OpenLayers3之加载地图摘要在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要... 查看详情
如何离线发布百度地图
如何离线发布百度地图一键离线地图发布（工具软件下载） 使用教程谷歌离线地图发布 教程手机离线地图发布——Oruxmaps制作发布高清卫星离线地图说明：1. 当前版本支持百度电子地图瓦片和百度卫星地图瓦片... 查看详情
百度离线地图发布源代码
百度离线地图发布源代码一键离线地图发布（工具软件下载） 使用教程谷歌离线地图发布 教程手机离线地图发布——Oruxmaps制作发布高清卫星离线地图说明：1. 当前版本支持百度电子地图瓦片和百度卫星地图瓦... 查看详情
如何使用openlayer发布谷歌卫星地图
...歌，文件类型建议使用png格式，以获得最佳清晰度。配置Openlayer:地图瓦片下载完成之后，将瓦片放置在网站目录下的tile文件夹中。新建一个index.html文件，放在网站目录下。引入下载的Openlayer文件，这两个文件都需要引入最后文... 查看详情