当前位置: 代码迷 >> GIS >> GIS开发记录(六):OpenLayers显示Google离线map
  详细解决方案

GIS开发记录(六):OpenLayers显示Google离线map

热度:188   发布时间:2016-05-05 06:29:39.0
GIS开发记录(六):OpenLayers显示Google离线地图

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

?

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 onload="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

?

1 楼 dxqrr 2012-05-21  
mark下,学习了
  相关解决方案