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

GIS开发记录(七):基于Scale切换地图BaseLayer

    博客分类:
  • GIS
阅读更多

实现:最初显示”中国地图(省界)“,放大到一定程度显示”中国地图(地市分界)“,继续放大切换到Google街道地图。

 

 

<!DOCTYPE html>
<html>
	<head>
		<title>中国地图</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<style type="text/css" media="screen">
			body {
				margin:0;
				padding:0;
				height:100%; 
			}
			.bigmap {
				position:absolute;
				left:0;
				top:0px;
				padding:0;
				width:100%;
				height:100%; 
				border:1px solid #333;
			}
		</style>
		<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
		<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
		<script type="text/javascript">
			var map, layer_province, layer_city, layer_street, vlayer;
			
			// 第一次打开地图的中心位置(经度、纬度)
			var firstLon = 109.33981;
			var firstLat = 33.72419;
			
			/*
			 * 切换地图比例尺设置
			 *	scale1:
			 *  scale2: 省地图和地市地图切换点
			 *  scale3: 地市地图和谷歌街道地图切换点
			 */
			var scale1 = 20000000;
			var scale2 = 10000000;
			var scale3 = 2000000;
			
			var level1 = 1;
			var level2 = 2;
			var level3 = 3;
			var level = level1;
			
				
			function init() {
				// 创建MAP DIV框架
				map = new OpenLayers.Map("map",
					{
						maxResolution: 'auto',
						maxExtent: new OpenLayers.Bounds(
							73.44696044921875, 6.318641185760498, 
							135.08583068847656, 53.557926177978516),
						displayProjection: new OpenLayers.Projection("EPSG:4326")
					});
				
				// 增加中国地图(省界) Layer
				addProvinceLayer()
				
				// 增加中国地图(地市分界) Layer
				addCityLayer();
				
				// 增加Google Street Layer
				addStreetLayer();
				
				// 增加地图Layer切换Register
				addMapRegister();
				
				map.zoomToMaxExtent();
				map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0);
				
				map.addControl(new OpenLayers.Control.Scale());
				map.addControl(new OpenLayers.Control.MousePosition());
				map.addControl(new OpenLayers.Control.LayerSwitcher());
			}
			
			function addProvinceLayer() {
				layer_province = new OpenLayers.Layer.WMS(
				    "China:province", "http://10.0.0.239:8081/geoserver/wms",
				    {
				    	layers: "China:province",
				    },
				    {
				    	singleTile: true, //set single label
				    	isBaseLayer: true,
				    	projection: "EPSG:4326",
				    	maxExtent: new OpenLayers.Bounds(
				    		73.44696044921875, 6.318641185760498, 
				    		135.08583068847656, 53.557926177978516)
				    }
				);
				map.addLayer(layer_province);
			}
			
			function addCityLayer() {
				layer_city = new OpenLayers.Layer.WMS(
				    "China:city", "http://10.0.0.239:8081/geoserver/wms",
				    {
				    	layers: "China:city"
				    },
				    {
				    	singleTile: true, //set single label
				    	visibility: false,
				    	projection: "EPSG:4326",
				    	displayInLayerSwitcher: false,
				    	maxExtent: new OpenLayers.Bounds(
				    		73.44696044921875, 6.318641185760498, 
				    		135.08583068847656, 53.557926177978516)
				    }
				);
				map.addLayer(layer_city);
			}
			
			function addStreetLayer() {
				layer_street = new OpenLayers.Layer.Google(
				    "Google Streets", // the default
				    {
				    	numZoomLevels: 18 ,
				    	projection: "EPSG:900913",
				    	visibility: false,
				    	displayInLayerSwitcher: false,
				    	maxExtent: new OpenLayers.Bounds(
				    		-128 * 156543.03390625,
				    		-128 * 156543.03390625,
				    		128 * 156543.03390625,
				    		128 * 156543.03390625)
				    }
				);
				map.addLayer(layer_street);
			}
			
			function addMapRegister(){
				map.events.register("zoomend", map, function(){
					var cur_scale = map.getScale();
					if(cur_scale >= scale2) {
						if(level != level1) {
						    
						    if(level == level2) {
								map.setCenter(map.center.transform(
							       new OpenLayers.Projection("EPSG:4326"),
							       new OpenLayers.Projection("EPSG:4326")
							    ), map.getZoom());
							} else {
								map.setCenter(map.center.transform(
							       new OpenLayers.Projection("EPSG:900913"),
							       new OpenLayers.Projection("EPSG:4326")
							    ), map.getZoom());
							}
						    
						    level = level1;
						    
						    layer_province.displayInLayerSwitcher = true;
							layer_city.displayInLayerSwitcher = false;
							layer_street.displayInLayerSwitcher = false;
							
							map.setBaseLayer(layer_province);
							layer_city.setVisibility(false);
							layer_street.setVisibility(false);
							
						}
					} else if(cur_scale < scale2 && cur_scale >= scale3){
						if(level != level2){
							if(level == level1) {
								map.setCenter(map.center.transform(
							       new OpenLayers.Projection("EPSG:4326"),
							       new OpenLayers.Projection("EPSG:4326")
							    ), map.getZoom());
							} else {
								map.setCenter(map.center.transform(
							       new OpenLayers.Projection("EPSG:900913"),
							       new OpenLayers.Projection("EPSG:4326")
							    ), map.getZoom());
							}
						    
						    level = level2;
						    
						    layer_province.displayInLayerSwitcher = false;
							layer_city.displayInLayerSwitcher = true;
							layer_street.displayInLayerSwitcher = false;
							
							map.setBaseLayer(layer_city);
							layer_province.setVisibility(false);
							layer_street.setVisibility(false);
							
						}
					} else if(cur_scale < scale3){
					   	if(level != level3) {
							map.setCenter(map.center.transform(
						        new OpenLayers.Projection("EPSG:4326"),
						        new OpenLayers.Projection("EPSG:900913")
						    ), map.getZoom());
						    
						    level = level3;
						    
						    layer_province.displayInLayerSwitcher = false;
							layer_city.displayInLayerSwitcher = false;
							layer_street.displayInLayerSwitcher = true;
							
							map.setBaseLayer(layer_street);
							layer_city.setVisibility(false);
							layer_province.setVisibility(false);
							
					    }
					} 
				});
			}
		</script>
	</head>

	<body onload="init()" >
		<div id="map" class="bigmap"></div>
	</body>
</html>

 

参考:

add, remove base layers depending on zoom, change baselayer

Zoom Control Example

分享到:
评论

相关推荐

    Gis工程师训练营:supermap object组件式开发pdf文件

    Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发pdf文件! Gis工程师训练营:supermap object组件式开发...

    GIS For CAD插件:基于AutoCAD高效便捷的地理信息处理辅助工具

    GIS4CAD插件是一款基于AutoCAD的功能套件,它提供了一系列 GIS 功能。通过该插件,您可以轻松地在AutoCAD中导入和导出SHP、MDB、Kml、Kmz、Gpx、GeoJson、EXCEL、TXT、CSV等多种格式的矢量文件,并支持SQL Server、...

    基于arcobjects与c#.net的gis应用开发 源代码-兰_gis_

    在GIS(地理信息系统)领域,基于ArcObjects与C#.NET的开发是构建地图应用程序和进行空间数据处理的常见方法。ArcObjects是Esri公司提供的一个强大的API(应用程序接口),它允许开发者利用C#等.NET语言来创建桌面、...

    Web GIS从基础到开发实践(基于ArcGIS API FOR JavaScript)

    本主题聚焦于“Web GIS从基础到开发实践”,特别是基于ArcGIS API for JavaScript的实现方法。ArcGIS是Esri公司推出的一款强大的GIS平台,其JavaScript API为开发者提供了在Web环境中构建交互式地图应用的能力。 一...

    《移动GIS开发技术》课程教学大纲.docx

    * 移动GIS应用开发类型:基于Web的移动GIS应用、基于Native的移动GIS应用等。 * 移动GIS应用开发流程:需求分析、设计、开发、测试、部署等。 * 移动GIS应用开发技术:REST、XML、JSON 等。 四、移动GIS开发工具和...

    GIS二次开发:第五讲 地图是如何组成的 Map.ppt

    GIS二次开发中,地图的构建和管理是至关重要的部分,特别是在使用ArcObjects进行VBA编程时。本讲主要探讨了地图的组成,包括Map的双重身份、数据的组织方式、地图显示背后的机制以及地图布局。 首先,Map拥有“双重...

    GIS二次开发:第七讲 GeoDatabase.ppt

    GIS二次开发:第七讲 GeoDatabase.ppt

    GIS软件:QGIS二次开发-Python基础与QGIS脚本开发+GIS软件:QGIS二次开发-QGISAPI文档解析

    GIS软件:QGIS二次开发_Python基础与QGIS脚本开发.docx GIS软件:QGIS二次开发_QGISAPI文档解析.docx GIS软件:QGIS二次开发_QGIS与WebGIS集成.docx GIS软件:QGIS二次开发_QGIS与外部数据源集成.docx GIS软件:QGIS...

    GIS二次开发:第一部分 GIS软件开发基础.ppt

    GIS(地理信息系统)二次开发是基于现有的GIS软件平台进行定制化开发,以满足特定用户需求的过程。这一领域涵盖了多个关键知识点,包括GIS的定义、类型、构成、功能、软件发展、开发模式以及相关技术。 1. **GIS的...

    ArcObjects GIS 应用开发 基于 C#.NET

    《ArcObjects GIS 应用开发 基于 C#.NET》是江西理工大学兰小机、刘德儿两位专家编著的一本专业书籍,主要聚焦于使用C#.NET语言进行GIS(地理信息系统)应用的开发。ArcObjects是Esri公司提供的核心开发组件,它允许...

    基于C#的GIS开发Demo

    在本项目"基于C#的GIS开发Demo"中,我们将深入探讨如何利用C#语言进行GIS应用的开发。 【C#语言与GIS的结合】 C#是一种面向对象的编程语言,由微软公司推出,广泛应用于Windows平台的开发。在GIS领域,C#提供了...

    插件式GIS应用框架的设计与实现:基于C#和AE+9.2

    本主题聚焦于“插件式GIS应用框架的设计与实现”,具体是基于C#编程语言和ArcEngine 9.2这一GIS开发平台。以下是对这个主题的详细阐述: 1. **C#语言基础**:C#是一种面向对象的、类型安全的编程语言,由微软公司...

    基于ArcObject与C#.NET的GIS应用开发

    兰小机老师的《基于ArcObject与c#.NET应用开发》是这个领域的经典教材,现在我们来看看基于ArcObject与C#.NET的GIS应用开发涉及哪些知识点。 1. ArcObject介绍:ArcObject是Esri公司的核心GIS组件,提供了对地图、...

    GIS二次开发:第七讲 GeoDatabase-1.ppt

    GIS二次开发:第七讲 GeoDatabase-1.ppt

    ArcObjects GIS应用开发——基于C#.NET(第一版).pdf

    《ArcObjects GIS应用开发——基于C#.NET(第一版)》是一本专注于使用C#.NET进行GIS(地理信息系统)开发的教程。ArcObjects是ESRI(Environmental Systems Research Institute)提供的一个强大的开发工具集,用于...

    基于组件GIS开发

    【基于组件GIS开发】是一种利用GIS(地理信息系统)技术,通过可重用的软件组件来构建定制化的GIS应用的方法。这种开发方式具有灵活性高、可扩展性强的特点,适合各种规模和复杂度的项目。在VB(Visual Basic)环境...

    插件式GIS应用框架的设计与实现:基于C#和AE+9.2 PDF

    《插件式GIS应用框架的设计与实现:基于C#和AE+9.2》是一本深入探讨GIS(地理信息系统)开发技术的专业书籍,主要聚焦于使用C#编程语言和ArcGIS Engine(AE)9.2版本来构建插件式GIS应用的理论与实践。GIS是一种集成...

    GIS软件:SuperMap二次开发-SuperMapWebGIS开发+基础知识与环境搭建+插件开发+地图显示与控制

    GIS软件:SuperMap二次开发_SuperMap地图显示与控制.docx GIS软件:SuperMap二次开发_SuperMap基础知识与环境搭建.docx GIS软件:SuperMap二次开发_SuperMap安全与权限管理.docx GIS软件:SuperMap二次开发_SuperMap...

Global site tag (gtag.js) - Google Analytics