上一篇文章介绍了使用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应用（二）：加载百度离线瓦片的更多相关文章

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

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

  2. Qt加载百度离线地图

    1.下载百度地图离线API 1.3 下载链接:http://download.csdn.NET/detail/caoshangpa/9476608,网上虽然出现了2.0版本离线API,但是经试用,存在 ...

  3. Smart3D系列教程7之 《手动配置S3C索引加载全部的瓦片数据》

    一.前言 迄今为止,Wish3D已经出品推出了6篇系列教程,从倾斜摄影的原理方法.采集照片的技巧.Smart3D各模块的功能应用.小物件的照片重建.大区域的地形重建到DSM及正射影像的处理生产,立足于 ...

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

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

  5. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  6. leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  7. Delphi中用Webbrowser加载百度地图滚轮失效（ApplicationEvents里使用IsChild提前判断是哪个控件的消息）

    在Delphi中使用Webbrowser加载百度地图时,点击了其它界面,再回到百度地图中,即使点击了鼠标,再用滚轮也不能缩 放地图,除非点地图里面的自带的控件,之后才能缩放,原因是因为其它窗体控件获得 ...

  8. （转） Arcgis for js加载百度地图

    http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...

  9. 利用ServiceWorker实现页面的快速加载和离线访问

    Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理.它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是 ...

随机推荐

  1. 000 Python之禅

    The Zen of Python, by Tim Peters Beautiful is better than ugly.Explicit is better than implicit.Simp ...

  2. iOS开发之iOS程序的启动过程

    程序启动的完整过程: (1)main函数 (2)UIApplicationMain * 创建UIApplication对象 * 创建UIApplication的delegate对象 (3)delega ...

  3. 2.4G无线收发模块/射频RFM75调试总结/RF知识整理

    射频RFM75通信是收发双方都需要编程的器件,收发双方的通道频率,空中传输速率设置一致,调试时必须先调通一块再调另一块,否则出现问题了就不知道是发送端有问题还是接收端有问题.调试必须理清思路.正确的方 ...

  4. vue的使用总结

    1.vue的生命周期

  5. 从PRINCE2引起项目失败的共性原因？

    一.项目与组织的关键战略优先排序之间缺乏明确的联系 项目必须体现和贯彻发起者的目标.每个项目是怎样支持这些目标的,怎样对项目进行优先排序能提供最大的回报,这些都应该能明确地表述出来. PRINCE2持 ...

  6. MongoDB基础教程系列--第四篇 MongoDB 查询文档

    查询文档 查询文档可以用 find() 方法查询全部文档,可以用 findOne() 查询第一个文档,当然还可以根据 条件操作符 和 $type操作符 查询满足条件的文档. find() 和 find ...

  7. 老李谈HTTP1.1的长连接 1

    老李谈HTTP1.1的长连接   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...

  8. 测试开发Python培训：模拟登录新浪微博-技术篇

    测试开发Python培训:模拟登录新浪微博-技术篇   一般一个初学者项目的起点就是登陆功能的自动化,而面临的项目不同实现的技术难度是不一样的,poptest在做测试开发培训中更加关注技术难点,掌握技 ...

  9. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  10. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...