使用OpenLayers 3发布离线地图（百度地图）

说明：之前离线地图用谷歌地图来实现，给客户看了效果之后，客户说还不清晰，要换成清晰度高一点的，示例图如下所示：

这个是谷歌地图11级层级清晰度：

这个是百度地图11层级清晰度：

其实我个人觉得吧，这两个图差别不是很大，只是百度地图对应标记的点比较多，地名也比较全，清晰度两个倒是都差不多。再要下载高清的离线地图瓦片就要花3600块钱去购买永久激活BIGEMAP地图下载器，客户当然不会舍得这笔钱，在网上找一大推例子给你讲哪里哪里有离线地图，又清楚又免费。。。哎，算了我也不想多说啥。毕竟客户是老大，说改咱就改吧。那实现百度离线地图发布与谷歌离线地图有什么差异呢？

使用谷歌离线地图发布在我的另外一篇博客中：
使用OpenLayers发布离线地图（谷歌地图）
里面有详细的离线地图实现过程，本篇博客主要是写谷歌地图与百度地图实现离线地图的差异。

一.离线地图瓦片下载方面：

1.首先你得先选择对应的百度地图，如下图所示：

2.然后下载选项中瓦片选择百度，图片类型还是选择png，如下图所示：

二。调用离线地图瓦片方面：

1.谷歌地图进行调用离线地图瓦片代码块：

/**
	 * 实例化Map对象加载地图,默认底图加载天地图
	 */
			//地图设置中心，设置为海南五指山
	var center=ol.proj.transform([109.5170,18.77520],'EPSG:4326','EPSG:3857');
	//创建地图
	//创建地图
	var map=new ol.Map({
		view:new ol.View({
			center:center,
			minZoom:7,//设置缩放的最大和最小级别
			maxZoom:15,
			zoom:8//设置默认加载的级别
		}),
		target:'mapCon'//要显示地图的DIV的ID
	});

	//添加一个使用离线瓦片地图的层
	var offLineMap=new ol.layer.Tile({
		source:new ol.source.XYZ({
			url:'tile/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
		})
	});
	map.addLayer(offLineMap);

2.百度地图进行调用离线地图瓦片代码块：

// 自定义分辨率和瓦片坐标系
    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 "tile/" + 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([109.5170,18.77520], 'EPSG:4326', 'EPSG:3857'),
            zoom: 8
        }),
        target: 'mainMap'
    });

总结：谷歌地图与百度地图由于下载的离线地图瓦片不尽相同，所以调用地图的方式也不同，如果离线地图解决了，就可以根据OpenLayersAPI：OpenLayersAPI对其进行操作

下面是我个人关于离线地图的一些博文，有兴趣的可以看看：

1.使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）
2.使用OpenLayers根据经纬度对地图进行多个标点，以及点击标点弹框的实现（从后台数据库获取经纬度数据）

欢迎大家留言相互学习，本人对这块了解不多，大神勿喷，我只是一只被逼上绝路的后台java程序猿…