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

原创 2018年04月16日 11:05:32

首先我们需要一份离线谷歌地图,可以使用太乐地图下载也可以使用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;
	};	
}())



地图的开发研究--基于openlayers+geoserver+tomcat的离线地图--本地.shp地图

基于Openlayers的GIS地图开发:    地图就是一个一个的图层组合起来的,这些图层就是一些特定格式的地图,通过相应的技术将这些地图放大缩小来展示具体的信息。所以在开发地图之前需要读取相应的图...
  • sj836125
  • sj836125
  • 2013-12-11 15:15:32
  • 4812

离线地图解决方案【转载】

Web GIS离线解决方案 1、背景 在离线环境下(局域网中)的GIS系统中如何使用地图?这里的地图主要指的是地图底图,有了底图切片数据,我们就可以看到地图,在上面加上自己的业务数据图层,进行相关...
  • chenbinkria
  • chenbinkria
  • 2018-04-11 10:32:12
  • 46

Openlayers4+servlet实现切片的本地缓存

概述本文实现的是结合Openlayers4和java servlet实现公网资源切片的本地缓存。
  • GISShiXiSheng
  • GISShiXiSheng
  • 2017-10-16 18:07:37
  • 598

加载离线的谷歌地图

利用离线GoogleMapAPIV3加载本地谷歌地图并添加标注 一、准备工作 下载GoogleMapAPIV3.rar。 二、下载地图 首先通过水经注下载器把谷歌卫星地图下载下...
  • xiaobai_2511
  • xiaobai_2511
  • 2016-05-09 16:32:58
  • 1254

如何使用Openlayers 3加载谷歌离线地图

使用Openlayers 3 加载谷歌离线地图,将下载的谷歌离线地图使用合适的WEB服务器发进行发布,使用ol.source.XYZ来调用地图服务。 //定义一个地图调用函数 var BaseMapL...
  • wan320
  • wan320
  • 2016-03-02 13:39:05
  • 5493

百度地图离线API2.0(含示例,可完全断网访问)

PS:如百度地图瓦片匹配不上则请使用google瓦片作为底图(有人反应说下载的百度瓦片对不上,有人又说对得上,可能瓦片下载软件版本不一样吧),转换google瓦片的java代码:Google瓦片转百度...
  • leiyong0326
  • leiyong0326
  • 2015-01-08 18:15:39
  • 19212

Flex加载google地图、百度地图以及天地图作底图

一  Flex加载Google地图作底图 (1)帮助类GoogleLayer.as /* * 根据输入的地图类型加载Google地图(by chenyuming) */ package Layer...
  • u013934914
  • u013934914
  • 2015-03-24 16:52:09
  • 1533

google离线地图实例,加载本地地图瓦片, 支持点线面及图文标注,坐标定位,卫星、电子地图切换

说明: 1.无偏移坐标定位; 2.可以自由搭配点线面配置信息(颜色、粗细、透明度等); 3.地图级别自定义; 4.中心点自定义; 5.ajax提交通过php保存到mysql数据库(保存相应的标注信息,...
  • luopdjia520
  • luopdjia520
  • 2015-12-30 11:14:31
  • 4896

如何采用离线的_Google_Map_API_加载离线谷歌地图的方法.doc

  • 2014年05月26日 11:13
  • 1.86MB
  • 下载

使用OpenLayers加载高德离线地图简单实用

转载请标注:http://blog.csdn.net/qq_25552049/article/details/79453414概述  OpenLayers是一个用于开发WebGIS客户端的JavaSc...
  • qq_25552049
  • qq_25552049
  • 2018-03-06 09:16:53
  • 408
收藏助手
不良信息举报
您举报文章:openlayers---加载离线谷歌地图
举报原因:
原因补充:

(最多只允许输入30个字)