上一篇文章介绍了使用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. 为什么用IP无法访问网站，域名可以访问？

    我们访问网站都是通过域名进行访问的,偶尔会使用网站IP进行访问,如学校通常使用IP登录教务处,但很多的时候我们无法通过ip进行访问其他网站,这就涉及到服务器的问题了. 网站都是依托在服务器上面的,而服 ...

  2. SLF4J 的几种实际应用模式--之三：JCL-Over-SLF4J+SLF4J

    我们前面已经讲过了 SLF4J 的两种用法:SLF4J+Log4J  和 SLF4J+Logback,那是在比较理想的情况下,所用组件只使用了 SLF4J 这一种统一日志框架的时候.可是 JCL 一直 ...

  3. SqlServer转换为Mysql

    昨天顺利把MySQL成功安装后,正准备着手把原来项目中的SQL SERVER数据库改为MYSQL数据库,可大量的表结构和表数据如要手动写,那就...... 接下来就是各种百度.谷歌.问先驱等,可得到的 ...

  4. 使用 POJO 对象绑定请求参数

    概述 Spring MVC 会按请求参数名和 POJO 属性名进行自动匹配,自动为该对象填充属性值并且支持级联属性.这一特性在日常开发过程中使用频率比较高,开发效率也高,本文主要对 POJO 对象绑定 ...

  5. JSON与JAVA的数据转换

    http://developer.51cto.com/art/200906/129090.htm java.lang.ClassNotFoundException: net.sf.json.JSONA ...

  6. 学点Groovy来理解build.gradle代码

    在写这篇博客时,搜索参考了很多资料,网上对于 Groovy 介绍的博客已经特别多了,所以也就没准备再详细的去介绍 Groovy,本来也就计划写一些自己认为较重要的点.后来发现了 Groovy 的官方文 ...

  7. a里面不能嵌套a

    1. <a href=""> <a href=""></a></a> 会被浏览器解析为 2. <a hre ...

  8. Google永远不可能回到国内，只能是回忆

    今天早上在微博上无意看 [谷歌翻译App在大陆地区恢复无障碍使用]这篇文章,不知不觉就点进去看一下,内心还是比较兴奋,为什么兴奋说不清楚.或许我们是真的喜欢Google的产品. 回想2010年Goog ...

  9. POPTEST联合创始人李爱然的“IT培训创业的随想"

    POPTEST联合创始人李爱然的“IT培训创业的随想" IT教育行业最大的问题是缺少像互联网行业一样的产品经理. 大多数IT教育机构在早期依靠个人或者一套课程开创了一定的局面,随着机构的壮大 ...

  10. 老李推荐：第2章1节《MonkeyRunner源码剖析》了解你的测试对象: NotePad应用简介

    老李推荐:第2章1节<MonkeyRunner源码剖析>了解你的测试对象: NotePad应用简介   本书脚本相关的示例常会用到Android SDK自带的NotePad这个应用,所以这 ...