Openlayers发布谷歌离线地图

最新推荐文章于 2024-07-04 18:09:10 发布

ZeekerLin

最新推荐文章于 2024-07-04 18:09:10 发布

阅读量9.7k

点赞数

分类专栏：学习笔记 GIS 文章标签： openlayers gis开发离线地

本文链接：https://blog.csdn.net/linlzk/article/details/17354093

版权

学习笔记同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

GIS

6 篇文章 0 订阅

订阅专栏

例子是基于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>

ZeekerLin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
Openlayers发布谷歌离线地图

例子是基于OpenLayers-2.13，离线地图下载工具推荐OGCer，可以从这里下载，找了几个下载工具，这个还是比较不错的。这个工具下载好离线地图后会自动生成一个基于openlayers发布的html文件，把地图范围等都计算好了，但这个版本是2.07的，我在此基础上做了修改，增加了一些功能。不多说直接上代码了，都是js代码，拷贝过去直接可以用了，路径放在OpenLayers-2.13\
复制链接

扫一扫

专栏目录