Openlayers发布谷歌离线地图

例子是基于OpenLayers-2.13,离线地图下载工具推荐OGCer,可以从这里下载,找了几个下载工具,这个还是比较不错的。

这个工具下载好离线地图后会自动生成一个基于openlayers发布的html文件,把地图范围等都计算好了,但这个版本是2.07的,我在此基础上做了修改,增加了一些功能。

不多说直接上代码了,都是js代码,拷贝过去直接可以用了,路径放在OpenLayers-2.13\examples目录下即可,相应的图片文件也需拷贝过去。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Tiled Map Service Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
	<style type="text/css">
html, body { overflow: hidden; 
			 padding: 0; 
			 height: 100%; 
			 width: 100%; 
			 font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; 
		   } 
body { margin: 1px; 
	   background: #fff; 
	 }  
#map { height: 99%; 
	   border: 1px solid #888; 
	 } 
</style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
		var map; 
		var mapBounds = new OpenLayers.Bounds( 1.3172798200611E7,3400604.87623691,1.34309719074187E7,3576746.35051871);
		var mapMinZoom =8; 
		var mapMaxZoom =13;
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		OpenLayers.Util.onImageLoadErrorColor = "transparent";

        function init(){

			var options = { controls: [
				new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.ScaleLine(),
				new OpenLayers.Control.OverviewMap()
				],
					projection: new OpenLayers.Projection("EPSG:900913"), 
					displayProjection: new OpenLayers.Projection("EPSG:4326"), 
					units: "m", 
					numZoomLevels:13,
					maxResolution: 156543.0339, 
					maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508.3427892, 20037508.3427892) 
					};
			map = new OpenLayers.Map('map', options);

			var tmsoverlay = new OpenLayers.Layer.TMS( "OpenGSC", "",{ type: 'png', 
																	   getURL: overlay_getTileURL, 
																	   alpha: true, 
																	   isBaseLayer: true,
																	   minResolution : 4.777314267158508,
																	   maxResolution : 611.4962261962891 });
			if (OpenLayers.Util.alphaHack() == false) {
					tmsoverlay.setOpacity(1); 
			}
			map.addLayers([tmsoverlay]);

			//var switcherControl = new OpenLayers.Control.LayerSwitcher(); 
			//map.addControl(switcherControl);
			//switcherControl.maximizeControl(); 
			map.zoomToExtent( mapBounds );
			

			//map.addControl(new OpenLayers.Control.Scale());
	
			//map.addControl(new OpenLayers.Control.PanZoomBar()); 
			map.addControl(new OpenLayers.Control.MousePosition());
			//map.addControl(new OpenLayers.Control.MouseDefaults()); 
			//map.addControl(new OpenLayers.Control.KeyboardDefaults());
			
			//map.setCenter(new OpenLayers.LonLat(120.18295,30.31787), 3);
			
			var lonLat = new OpenLayers.LonLat(120.18295,30.31787);
			//google地图需要转换坐标
			lonLat.transform(map.displayProjection, map.getProjectionObject());
			map.setCenter(lonLat, 4);

			

			// 注册map缩放事件
			map.events.register("zoomend", map, onMapZoom);

        }

	function overlay_getTileURL(bounds) {
		var res = this.map.getResolution(); 
		var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
		var y = Math.round((this.maxExtent.top-bounds.top) / (res * this.tileSize.h));
		var z = this.map.getZoom();
		z=z+8;
		if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) { 
			return this.url + z + "/" + y + "/" + x+ "." + this.type;
		} else { 
			return "";
		} 
	} 

	function onMapZoom(e){
			//alert('zoom level:'+map.getZoom());
			//alert('sclse:'+map.getScale());
	}

    </script>
  </head>
  <body οnlοad="init()">
    <div id="map" class=""></div>
  </body>
</html>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值