上一篇文章介绍了使用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. mysql---数据控制语言（用户及其权限管理）

    用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中--不管哪个数据库的用户,都存储在这里.

  2. git中常见的几个命令

    git中常见的几个命令 本地仓库 三个区域 工作目录 暂存区 本地仓库 文件的四个状态 未跟踪 untracked 已暂存 staged 已提交commited 已修改 modified 基本命令 g ...

  3. (11)连个工具类之间的比较4.Collections与Arrays

    集合框架中的工具类:特点:该工具类中的方法都是静态的. Collections:常见方法: 1, 对list进行二分查找: 前提该集合一定要有序. int binarySearch(list,key) ...

  4. oracle备份脚本

    利用EXP导出全库,必须用SYSTEM或者DBA用户来导出. 具体脚本实现如下 全库导出(fullbackup): #!/bin/bash bname=`date +%Y%m%d` cd /backu ...

  5. 《C++之那些年踩过的坑（三）》

    C++之那些年踩过的坑(三) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自:h ...

  6. post和get请求的区别

    post和get请求的区别: 1.post发送的数据在请求体中,用户看不到 get发送的数据在地址栏中 2.post请求中有content-type,作用是告诉服务器,发送给服务器的数据格式,是和ur ...

  7. vuejs2.0子组件改变父组件的数据

    在vue2.0之后的版本中,不允许子组件直接改变父组件的数据,在1.0的版本中可以这样操作的,但是往往项目需求需要改变父组件的数据,2.0也是可一个,区别是,当我们把父元素的数据给子组件时,需要传一个 ...

  8. cloud-init 工作原理 - 每天5分钟玩转 OpenStack（171）

    cloud-init 是 linux 的一个工具,当系统启动时,cloud-init 可从 nova metadata 服务或者 config drive 中获取 metadata,完成包括但不限于下 ...

  9. java如何停止一个运行的线程？

    关于线程的一点心得 //首先导入需要的包 improt java.util.Timer;import java.io.File;import java.util.TimerTask; //首先需要创建 ...

  10. 1.自定义控制器切换<一>

    一.自定义控制器切换:在同一个控制器上,展示不同的控制器,类似于tabbar一样 二.怎么做?(问题解决步骤) 1.创建若干控制器:OneViewController TwoViewControlle ...