openlayers

OpenLayers的使用

by giser · 2019-04-03

找个好工作，好难，回学校好好学习，明年实习吧！

~~基本函数~~

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

相关推荐

Tags: openlayers

You may also like...