GIS开发记录(六)：OpenLayers显示Google离线地图

最新推荐文章于 2024-01-31 23:20:04 发布

iteye_1007

最新推荐文章于 2024-01-31 23:20:04 发布

阅读量319

点赞数

分类专栏： GIS 文章标签： gis local tiles google 离线地图

本文链接：https://blog.csdn.net/iteye_1007/article/details/82303396

版权

GIS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文相关内容只用于个人研究，若用于商业请自行负责。

1. 下载Google地图切片到本地：如果没有要求地图显示中文，则可以用Google Maps Downloader下载Google地图到本地；如果要显示中文地图，则要用China Google Maps Downloader

2. 在tomcat服务器建个项目gmcn，为了方便查找文件，将文件按照zoom/x存放，如图：

3. 利用OpenLayers.Layer.TMS显示地图，重点是get_my_url()找到要显示的切片

<html>
	<head>
		<title>Google Local Tiles</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<script src="js/OpenLayers/lib/OpenLayers.js"></script>

		<script type="text/javascript">
			var map, layer; //complex object of type OpenLayers.Map
		
			//Initialise the 'map' object
			function init() {
		
				map = new OpenLayers.Map("map", {
					maxExtent : new OpenLayers.Bounds(-20037508.3427892,
							-20037508.3427892, 20037508.3427892, 20037508.3427892),
					numZoomLevels : 18,
					maxResolution : 156543.0339,
					units : 'm',
					projection : "EPSG:900913",
					displayProjection : new OpenLayers.Projection("EPSG:4326")
				});
		
				layer = new OpenLayers.Layer.TMS("Name",
						"http://10.0.0.239:8081/gmcn/", {
							'type' : 'png',
							'getURL' : get_my_url
						});
		
				map.addLayer(layer);
		
				map.addControl(new OpenLayers.Control.Scale());
				map.addControl(new OpenLayers.Control.MousePosition());
				map.addControl(new OpenLayers.Control.LayerSwitcher());
		
				var lonLat = new OpenLayers.LonLat(117.62519, 39.52329);
				lonLat.transform(map.displayProjection, map.getProjectionObject());
				map.setCenter(lonLat, 8);
			}
		
			function get_my_url(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();
		
				var path = "" + z + "/" + x + "/gmcn_" + x + "_" + y + "_" + z + "." + this.type;
				var url = this.url;
				if (url instanceof Array) {
					url = this.selectUrl(path, url);
				}
				return url + path;
		
			}
		</script>
	</head>

	<!-- body.onload is called once the page is loaded (call the 'init' function) -->
	<body οnlοad="init();">

		<!-- define a DIV into which the map will appear. Make it take up the whole window -->
		<div style="width: 100%; height: 100%" id="map"></div>

	</body>

</html>

参考：

Using Custom Tile Sources / Google-like Tile Layer Support