`
tessykandy
  • 浏览: 80910 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • GIS
阅读更多

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

 

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

 

  • 大小: 4.3 KB
分享到:
评论
3 楼 sheva.wen 2013-02-25  
第19行可能需要改成

projection : new OpenLayers.Projection("EPSG:900913"),  
2 楼 gds1987 2012-09-01  
您好,楼主,我按照您的方法实验了,初步没问题,直接在html上面双击,可以显示地图,包括缩放的图片,但是部署到 tomcat 上,使用 8080 端口打开,照片就无法显示了,这个。。。向楼主请教!!!谢谢
1 楼 dxqrr 2012-05-21  
mark下,学习了

相关推荐

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    本案例的主题是“openlayers加载本地离线底图瓦片google数据直接运行即可”,这意味着我们可以通过OpenLayers加载已经下载好的Google Maps离线瓦片数据。离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256...

    离线地图展示demo

    离线地图展示技术是现代GIS(地理信息系统)领域中的一个重要组成部分,它允许用户在没有互联网连接的情况下查看和操作地图数据。这种技术对于那些在偏远地区、网络信号不稳定或需要节省数据流量的用户来说尤其有用...

    离线地图实现示例(可完全实现断网访问)

    通过学习和理解这个离线地图实现示例,开发者可以掌握如何在自己的项目中应用OpenLayers进行离线地图的开发,这对于创建不依赖网络的GIS应用非常有价值。同时,这也涉及到前端开发的基本知识,包括HTML、CSS和...

    离线地图学习而已

    GoogleOutLine可能是一个与Google Maps相关的离线地图解决方案,可能包含了将Google Maps的数据转换为可离线使用的格式的方法或工具。 在电子书中,你可以期待找到离线地图的工作原理、数据结构、数据压缩技术以及...

    离线瓦片图下载器(谷歌/百度/高德/腾讯)

    离线瓦片图下载器是一种工具,主要用于获取地图服务提供商如谷歌、百度、高德和腾讯等的地图数据,以便在没有网络连接的情况下也能查看地图。这种工具对于户外探险、旅行规划或者在没有稳定网络环境的应用场景中非常...

    离线地图下载以及使用.rar

    离线地图下载与使用是GIS(地理信息系统)领域中的一个重要技术,它允许用户在没有网络连接的情况下查看和操作地图。这种技术尤其适用于户外活动、航海、航空、远程地区或者网络不稳定的地方。本压缩包"离线地图下载...

    离线BD瓦片地图加载.zip

    总的来说,离线BD瓦片地图加载涉及地图切片、Web开发技术、地理空间数据处理等多个方面,通过合理的设计和实现,可以提供无缝、高效的离线地图浏览体验。这个示例提供了一个基础的框架,开发者可以根据自己的需求...

    google map应用实例

    总的来说,Google Map的离线应用实例是一个综合性的开发项目,涵盖了地图数据处理、前端开发、用户交互等多个方面,对于提升开发者在GIS领域的技能非常有帮助。通过学习和实践,我们可以打造出功能强大的离线地图...

    Web Gis_webgis_GIS地图开发Js_gis_webgis地图来源_web地图可视化_

    在"Web Gis_webgis_GIS地图开发Js_gis_webgis地图来源_web地图可视化_"这个主题中,我们将探讨如何使用JavaScript来开发Web GIS应用,实现地图的显示、地点查找和地图可视化。 首先,JavaScript(简称Js)是Web开发...

    北京BD离线瓦片地图1-19级

    从标签“瓦片地图”来看,这份资料显然与地理信息系统(GIS)、地图开发和相关应用程序开发等领域的专业人员密切相关。瓦片地图广泛应用于网络地图服务,例如谷歌地图、百度地图、高德地图等,它们通过在不同的缩放...

    google离线API调用google瓦片叠加TMS瓦片源码及数据

    在IT行业中,地图服务是不可或缺的一部分,特别是在地理信息系统(GIS)和Web开发中。Google Maps API是一个广泛使用的工具,它允许...对于有兴趣进行地图开发或GIS应用的人员来说,这是一份非常有价值的参考资料。

    mapcontrol加载地图

    在IT行业中,地图控制组件(Map Control)是用于在应用程序中显示地图的一种工具,常见于地理信息系统(GIS)和导航应用。"mapcontrol加载地图"这个主题涉及到的是如何使用特定的地图控制来显示地图数据,以及与之...

    瓦片地图下载工具.rar

    在离线地图开发中,瓦片地图是一种常见的数据组织方式。地图被分割成多个小块,每个小块称为一个瓦片,通常以256x256像素的图像格式存在,根据不同的缩放级别有不同的数量。这种分块方式便于快速加载和显示大范围的...

    太乐地图下载器V4.6破解+步骤

    供ArcGIS、SuperMap、Openlayers等客户端直接远程访问,支持Openlayers/ArcGIS API For Javascript/Flex等多款GIS客户端离线浏览,同时支持发布TPK,发布ArcGIS缓存为WMTS地图,助您轻松构建自己的局域网离线地图...

    OL地图瓦片下载器

    下载的瓦片数据可以用于各种用途,如GIS分析、地图制作、地理信息系统开发等。通过集成到自定义的地图应用程序中,用户可以创建自己的地图服务,展示特定区域的详细信息。 8. **安全性与合法使用**: 在使用OL...

    计算机地图制图的14个源代码

    开源项目如OSM Buildings或Cesium提供了丰富的三维地图开发工具。 12. **地图可视化**:使用D3.js或Three.js等库,可以创建交互式、动态的可视化效果,增强地图的表达力。 13. **地图API**:Google Maps API、...

    山东地图.zip

    7. **地图服务**:这些文件可能与地图服务提供商(如Google Maps、高德地图、百度地图等)提供的API相结合,以创建自定义地图视图或提供离线地图支持。 总的来说,"山东地图.zip" 提供了一个了解GIS应用开发、地图...

    MapDownloader

    总的来说,MapDownloader是一款针对地图下载和离线使用的高效工具,特别适合地图爱好者、GIS专业人员以及需要构建离线地图应用的开发者。通过C#的编程支持和对OpenLayers的兼容,它提供了一条简单而强大的途径来管理...

    开源地图下载器

    OpenLayers是一个流行的JavaScript库,用于在Web上创建交互式地图应用,而这款下载器则是基于该库构建的,为GIS(地理信息系统)爱好者和专业人士提供了便利。 GIS,全称Geographic Information System,是一种能够...

    青岛 谷歌地图瓦片

    青岛谷歌地图瓦片的本地部署,可以让青岛地区的用户更快地获取和浏览地图信息,尤其适用于离线环境或者需要高性能地图应用的场合。 4. 文件名称列表解析: 在提供的文件名称列表中,我们可以推测这些文件可能代表...

Global site tag (gtag.js) - Google Analytics