上一篇文章介绍了使用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. angularjs fileUpload

    文件上传一直是我不熟悉的地方,<a href='https://github.com/nervgh/angular-file-upload/wiki/Module-API'>官网解释的例子 ...

  2. cuda编程学习1——hello world！

    将c程序最简单的hello world用cuda编写在GPU上执行,以下为代码: #include<iostream>using namespace std;__global__ void ...

  3. 关于jstl的问题：The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar files deployed

    Current sofeware:java Eclipse ee 4.5.2 + Tomcat 6.0 Question: 在tomcat中部署好了我的项目,然后发布后没有报错.但是当在浏览器打开的时 ...

  4. 手动es6编译es5（命令行）

    package.json:"devDependencies": { "babel-cli": "^6.18.0", "babel- ...

  5. 【Java 并发】详解 ThreadLocal

    前言 ThreadLocal 主要用来提供线程局部变量,也就是变量只对当前线程可见,本文主要记录一下对于 ThreadLocal 的理解.更多关于 Java 多线程的文章可以转到 这里. 线程局部变量 ...

  6. java实现8种排序算法（详细）

    八种排序分别是:直接插入排序.希尔排序.冒泡排序.快速排序.直接选择排序.堆排序.归并排序.基数排序. 希尔排序在时间性能上优于直接插入排序,但希尔排序是一种不稳定排序. 快速排序的时间性能也优于冒泡 ...

  7. Java结合WebUploader文件上传

    之前自己写小项目的时候也碰到过文件上传的问题,没有找到很好的解决方案.虽然之前网找各种解决方案的时候也看到过WebUploader,但没有进一步深究.这次稍微深入了解了些,这里也做个小结. 简单的文件 ...

  8. Zookeeper-3.4.9 集群搭建

    这里用了三台主机,系统为CentOS7 1.修改hosts #vim /etc/hosts 172.50.0.31 node1 172.50.0.34 node2 172.50.0.37 node3 ...

  9. linux ssh -l 命令运用

    ssh是远程登录命令,-l选项是最常用的选项,下面是我的一些总结 远程登录:ssh  -l  userName  ip # 远程登录到 10.175.23.9 ssh -l root2 10.175. ...

  10. 02 nodejs命令参数（NodeJS基础入门）

    声明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 建议使用开发软件:webstorm或hbuil ...