openlayers---加载离线谷歌地图

首先我们需要一份离线谷歌地图，可以使用太乐地图下载也可以使用bigmap下载。这里不再过多阐述。

把地图资源拷贝到服务器目录下（注：Jboss直接拷贝到war包下一层，Tomcat直接拷贝到webapp目录下，不要直接提交到SVN上，我使用的是Jboss，这样子因为地图资源图片非常多会参与编译，用起来非常不方便），然后启动服务器。

接下来就是使用openlayers加载地图了。我这里使用的jquery，当然你也可以使用其他方式。

1.首先创建地图中心点

var center = ol.proj.transform([106.24947, 37.08698],'EPSG:4326','EPSG:3857')

2.添加使用离线地图的tile

var sffLineMap = new ol.layer.Tile({	
	source:new ol.source.XYZ({
	projection:"EPSG:3857",
	url:'./tile_new/{z}/{x}/{y}.png'//我把地图命名为tile_new放在Jboss的war包下，请注意找正确图片路径以免加载不出来
	})
});

3.定义kml矢量图层的样式（为了展示边界，我选择了kml加载）

//加载宁夏省边界kml
var vector_province = new ol.layer.Vector({
	source: new ol.source.Vector({
	    url: './kml/Nxborder.kml',
	    format: new ol.format.KML()
	}),
	 style: areaLineStyle,
});

//加载宁夏固原城市边界kml
var vector_cityGY = new ol.layer.Vector({
    source: new ol.source.Vector({
            url: './kml/gy_border.kml',
	    format: new ol.format.KML()
    }),
     style: areaLineStyle,
     visible:false,
});

4.把layer加载到地图上展示

//加载地图以及边界线
 var map = new ol.Map({
	layers: [sffLineMap, vector_province],  
	renderer :'canvas',  
	view:new ol.View({
		center:center,
		minZoom:7.6,
		maxZoom:11,
		zoom:7.7,
		extent : ol.proj.transformExtent([104.2869, 35.2494, 107.6536, 38.8758 ], 'EPSG:4326', 'EPSG:3857')
	}),
	target:'map'
});

5.添加固原城市tile

map.addLayer(vector_cityGY);

6.层级大于等于8.5展示城市边界，小于则只展示省边界

map.getView().on("change:resolution",function(){
	var zoom = map.getView().getZoom();
	if(zoom > 8.5) {
		//加载地图以及边界线
	    vector_province.setVisible(false);
	    vector_cityGY.setVisible(true);
	} else {
	//加载地图以及边界线
	    vector_province.setVisible(true);
	    vector_cityGY.setVisible(false);
	}
}) 
return map;

7.最终全部代码如下所示：

$(function(){
	this.loadMap = function () {
		//创建地图中心点
		var center = ol.proj.transform([106.24947, 37.08698],'EPSG:4326','EPSG:3857')

		//添加使用离线瓦片地图的层
		var sffLineMap = new ol.layer.Tile({
			
			source:new ol.source.XYZ({
				projection:"EPSG:3857",
				url:'./tile_new/{z}/{x}/{y}.png'
			})
		});
		/** 
		 * 定义矢量图层 
		 * 其中style是矢量图层的显示样式  
		 */  
		function areaLineStyle(feature) {  
		    var style = new ol.style.Style({  
		        stroke: new ol.style.Stroke({  
		            width: 3,  
		            color: '#47b5ea'  
		        })  
		    })  
		    return style;  
		}   

		//加载宁夏省边界kml
		var vector_province = new ol.layer.Vector({
		    source: new ol.source.Vector({
		    	url: './kml/Nxborder.kml',
		        format: new ol.format.KML()
		    }),
		    style: areaLineStyle
		});

		//加载宁夏固原城市边界kml
		var vector_cityGY = new ol.layer.Vector({
		  source: new ol.source.Vector({
		  	url: './kml/gy_border.kml',
		      format: new ol.format.KML()
		  }),
		  style: areaLineStyle,
		  visible:false,
		});

		//加载地图以及边界线
		var map = new ol.Map({
			layers: [sffLineMap, vector_province],  
			renderer :'canvas',  
			view:new ol.View({
				center:center,
				minZoom:7.6,
				maxZoom:11,
				zoom:7.7,
				extent : ol.proj.transformExtent([104.2869, 35.2494, 107.6536, 38.8758 ], 'EPSG:4326', 'EPSG:3857')
			}),
			target:'map'
		});
		
		map.addLayer(vector_cityGY);
		//层级大于等于9展示城市边界
		map.getView().on("change:resolution",function(){
			var zoom = map.getView().getZoom();
			if(zoom > 8.5) {
				//加载地图以及边界线
				vector_province.setVisible(false);
				vector_cityGY.setVisible(true);
			} else {
				//加载地图以及边界线
				vector_province.setVisible(true);
				vector_cityGY.setVisible(false);
			}
		}) 
		return map;
	};	
}())