`
tessykandy
  • 浏览: 81728 次
  • 性别: 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

分享到:
评论

相关推荐

    Openlayers经典例子.doc

    var baseLayer = new OpenLayers.Layer.OSM("OpenStreetMap"); var overlayLayer = new OpenLayers.Layer.WMS("WMS Layer", "http://localhost:8080/geoserver/wms", {layers: 'topp:states'}); map.addLayers(...

    呼伦贝尔市-鄂温克族自治旗-街道行政区划_150724_Shp数据-wgs84坐标系.rar

    呼伦贝尔市-鄂温克族自治旗-街道行政区划_150724_Shp数据-wgs84坐标系.rar

    Cruise纯电动汽车仿真输入模板详解:涵盖8大核心模块参数设置与代码实现

    内容概要:本文详细介绍了用于Cruise纯电动汽车仿真的输入模板,该模板由8个表单组成,覆盖了从整车参数到计算输出的各个方面。每个表单都包含了关键参数的设置方法及其背后的逻辑,如校核清单、整车参数、电池参数、电机参数、传动系参数、制动轮胎参数、能量回收参数以及最终的计算输出。文中不仅提供了具体的参数定义和计算公式,还附有Python代码示例,帮助用户更好地理解和应用这些参数。此外,作者还分享了一些实用技巧,如防止参数遗漏的校验函数、处理电池温度效应的实际容量计算函数等。 适合人群:从事纯电动汽车仿真工作的工程师和技术人员,尤其是那些需要频繁处理复杂输入参数的人群。 使用场景及目标:① 提高纯电动汽车仿真工作的效率和准确性;② 规范参数收集流程,减少因参数错误导致的仿真失败;③ 提供详细的参数设置指导和代码实现,帮助用户更好地理解和应用Cruise仿真平台。 其他说明:本文不仅提供了一个全面的输入模板,还分享了许多实践经验,旨在帮助用户在实际工作中少走弯路,提高工作效率。

    张家口市-桥西区--街道行政区划_130703_Shp-wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    通辽市-通辽市-街道行政区划_150500_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据,wgs84坐标系,下载直接使用

    【预编码】基于matlab大规模多用户MIMO系统低复杂度混合预编码(Rayleigh信道)【含Matlab源码 13197期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    CTF竞赛基于杂项题目的隐写术与编码挑战:涵盖LSB隐写、摩斯密码、进制转换及文件格式转换技巧了文档的核心内容

    内容概要:本文档是作者在bugku平台进行CTF(夺旗赛)杂项题目练习的解题思路总结,涵盖第25至33题。题目类型多样,包括但不限于隐写术、进制转换、音频分析、图像处理等。每道题都详细介绍了背景信息、解题步骤和所使用的工具,如Stegsolve用于图片隐写分析、Python脚本处理进制转换、Audacity解析音频中的摩尔斯电码等。通过这些实例,展示了如何运用各种技术手段解决实际问题,强调了理论与实践相结合的重要性。 适合人群:对信息安全、逆向工程感兴趣的读者,特别是有一定编程基础和技术积累的安全爱好者或初学者。 使用场景及目标:①学习隐写术的基本原理及其在CTF比赛中的应用;②掌握不同进制间的转换方法及其实现;③熟悉音频文件中提取摩尔斯电码的技术;④了解图像处理技巧,如调整尺寸、解析隐藏信息等;⑤掌握压缩文件的明文攻击技巧,以及如何利用已知信息破解加密文件。 阅读建议:由于每道题涉及的知识点较为独立且专业性强,建议读者根据自己的兴趣选择相关题目深入研究。同时,在学习过程中应注重动手实践,尝试复现文中提到的操作流程,并结合网络资源进一步拓展知识面。对于遇到的工具和概念,可以通过查阅官方文档或参考教程加深理解。

    Qt时间标尺控件:实现丝滑缩放与自适应刻度的高效可视化组件

    内容概要:本文详细介绍了如何在Qt中实现一个高效的时间标尺控件,重点讲解了时间标尺的缩放功能、刻度自动生成以及曲线绘制的技术细节。首先,通过重载wheelEvent方法,利用QGraphicsView框架实现了基于鼠标的缩放功能,确保缩放过程中鼠标位置对应的时间点不变。其次,针对不同的时间范围,采用对数分级算法自动调整刻度间隔,使刻度线既美观又实用。最后,在曲线绘制方面,使用QPainterPath进行路径构建,并通过预处理和分段绘制优化性能,确保即使面对大量数据点也能保持流畅的用户体验。 适合人群:具有一定Qt开发经验的程序员,尤其是从事数据可视化项目的开发者。 使用场景及目标:适用于需要展示时间序列数据的应用程序,如金融图表、监控系统、日志分析工具等。主要目标是提供一个响应迅速、视觉效果优秀的交互式时间标尺控件,帮助用户更好地理解和分析数据。 其他说明:文中还提到了一些性能优化的小技巧,如数据预处理、路径分段绘制等,有助于提高大型数据集的渲染速度。同时,作者强调了在时间转换函数中避免使用低效的方法,推荐自行实现高效的缓存机制。

    天津市-静海区-街道行政区_120118_Shapefile_wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    石家庄市-石家庄市-石家庄市-赵县-街道行政区划_130133_Shp数据wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    赤峰市-喀喇沁旗-街道行政区划_150428_Shp数据-wgs84坐标系.rar

    赤峰市-喀喇沁旗-街道行政区划_150428_Shp数据-wgs84坐标系.rar

    【时间序列预测】基于Python和LSTM的时间序列预测系统设计与实现:从环境搭建到案例实战

    内容概要:本文详细介绍了使用Python和LSTM(长短期记忆网络)进行时间序列预测的方法及其应用场景。首先阐述了时间序列预测的重要性,指出传统ARIMA模型在处理复杂模式和长期依赖关系时的局限性,进而引出LSTM的优势。LSTM通过引入门控机制(输入门、遗忘门、输出门)和记忆单元,有效解决了长期依赖问题,能更好地捕捉时间序列中的复杂模式。接着,文章详细讲解了LSTM的工作原理,包括各个门控机制的作用和计算流程。随后,通过股票价格预测和气温预测两个案例,逐步演示了从环境搭建、数据准备(包括数据读取、归一化处理)、模型构建(使用Keras搭建LSTM模型)、模型编译、训练与评估到预测结果可视化的全过程。最后,文章总结了LSTM的关键技术和实现要点,并展望了其在自然语言处理、计算机视觉、生物学等领域的应用前景及未来研究方向。 适合人群:具备一定编程基础,尤其是对深度学习和时间序列预测感兴趣的开发者、数据科学家和研究人员。 使用场景及目标:①帮助读者掌握LSTM的基本原理和工作流程;②提供详细的Python实现步骤,包括环境配置、数据处理、模型搭建与训练;③通过具体案例展示LSTM在时间序列预测中的应用,如股票价格预测和气温预测;④探讨LSTM在其他领域的潜在应用,如自然语言处理、计算机视觉和生物学等。 阅读建议:本文内容详尽,涵盖理论与实践两方面,建议读者在阅读过程中结合代码实践,逐步理解LSTM的工作原理和实现细节,特别是注意数据处理和模型参数的选择对预测效果的影响。

    三菱FX5U机床双轴定位控制系统解析与优化 - 结构化编程及应用实例

    内容概要:本文详细介绍了基于三菱FX5U PLC的机床X轴和Y轴工作台定位控制系统的开发与优化过程。主要内容涵盖:使用J4-A系列伺服驱动器进行绝对位置控制,通过ST语言和结构化梯形图实现复杂的20组直线插补工序;手动模式下的点动与长按操作逻辑;MODBUS通讯协议的应用;以及详细的报警诊断和统计功能。文中展示了如何利用结构体封装参数,提高代码可读性和维护性,并通过具体案例解释了关键技术和调试经验。 适合人群:从事工业自动化控制领域的工程师和技术人员,尤其是熟悉三菱PLC编程的从业者。 使用场景及目标:适用于需要深入了解三菱FX5U PLC编程技巧及其在实际工程项目中应用的人群。目标是掌握高级编程方法如结构化编程、ST语言特性、MODBUS通讯优化等,从而提升工作效率并减少调试时间。 其他说明:文章不仅提供了理论知识,还包括大量实用的编程技巧和实践经验分享,有助于读者更好地理解和应用于实际工作中。

    大同市-大同市-街道行政区划_140200_Shp数据-wgs84坐标系.rar

    大同市-大同市-街道行政区划_140200_Shp数据-wgs84坐标系.rar

    火电厂协调仿真机:提升PID参数调试效率与安全性

    内容概要:本文详细介绍了火电厂协调仿真机的应用及其优势,特别是在PID参数调试方面的高效性和安全性。文中通过具体的Python代码示例展示了如何构建锅炉和汽轮机的仿真模型,并解释了PID控制器的工作原理。重点讨论了PID参数调试的关键点,如响应延迟、采样时间设定以及前馈控制的叠加效果。此外,还提到了实时曲线对比、参数扫描、自整定算法等功能的实际应用,强调了仿真机在提高调试效率和降低现场调试风险方面的重要作用。 适合人群:从事火电厂自动化控制领域的工程师和技术人员,尤其是需要进行PID参数调试的专业人士。 使用场景及目标:① 提高PID参数调试效率,减少现场调试时间和成本;② 降低现场调试的安全风险;③ 实现更加精确和平稳的控制系统性能。 其他说明:文章不仅提供了理论指导,还结合了大量的实战经验和具体代码示例,帮助读者更好地理解和掌握协调仿真机的使用方法。

    邢台市-襄都区--街道行政区划_130502_Shp-wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接下载使用。

    保定市-博野县--街道行政区划_130637_Shp-wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接使用。

    学号-姓名-作业二编写程序.ipynb

    学号-姓名-作业二编写程序.ipynb

    正弦内插算法的FPGA实现.docx

    正弦内插算法的FPGA实现.docx

    呼和浩特市_回民区_街道级--街道行政区划_150103_Shp_wgs84坐标系.rar

    街道级行政区划shp数据,wgs84坐标系,直接使用。

Global site tag (gtag.js) - Google Analytics