Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

OpenLayers的使用


        找个好工作,好难,回学校好好学习,明年实习吧!


 
         基本函数

1.    初始话一个MAP对象

Varmap=new OpenLayers.Map(param1, param2 );参数一指示用于显示地图的HTML页面中元素的ID;参数二是一个JSON数据对象,包含一组键值对;

2.    创建一个WMS的图层对象

Varwms=new OpenLayers.Layer.WMS(param1,param2,param3,param4);第一个参数传递图层的名称;第二个参数表示接受图层的URL;第三个参数指示图层的属性,也是JSON的数据格式;第三个参数设置所有图层的属性;

3.    将图层添加到MAP

Map.addLayers(wms),这里参数可以传递一个数组,类似于[layer1,layer2,layer3….]

4.    设置地图的显示区域

Map.zoomToMaxExtent(),这种方式用于显示整体地图

Map.setCenter(new OpenLayers.LonLat(x,y));

Map.zoomTo(5);

拿出代码来

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建一个简单的电子地图</title>
<script type="text/javascript" src="code/OpenLayers.js"></script>
	<style>
		body{
			width:80%;
			height:80%;
			margin-left:18%;
			padding:0;
			
		}
    </style>
</head>

<body onLoad="init()">
<div id="map_element" style="width:500px; height:500px">
</div>
<script type="text/javascript">
	var map; 
	function init(){
		map=new OpenLayers.Map('map_element',{});
		var wms=new OpenLayers.Layer.WMS(
			'OpenLayers WMS',
			'http://vmap0.tiles.osgeo.org/wms/vmap0',
			{layers:'basic'},
			{}
		);
		map.addLayer(wms);
		if(map.getCenter()){
			map.zoomToMaxExtent();
		}	
	}
</script>
</body>
</html>

转载自:https://blog.csdn.net/whynottrythis/article/details/12760441