关于OpenLayers的初步使用小例子

影非弦

浏览: 50817 次
性别:
来自: 北京

最近访客更多访客>>

oracle1234

y476414465

Black_Me

zhh1072773034

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

openlayers

OpenLayers java地图添加地图标注

刚开始接触openlayers的时候感觉GIS地图太难，压力太大，差点就要放弃这个了，后来随着慢慢的熟悉，感觉用起来确实也挺方便的。当然得感谢网上很多的前辈分享的经验。下面我来结合我自己的实际情况来讲讲openlayers的简单的功能的实现：

1.去官网下载OpenLayers，下载地址：http://openlayers.org/

有用到geoserver的可以去网上找找资料看看，我这里因为业务需求简单，就直接用的本地图片了，没有用geoserver。

下载之后解压，将img、lib、theme、OpenLayers.js这几个目录和文件拷贝到你的项目路径下。最好都放在一个路径下面。

2.在页面引入OpenLayers.js

<script type="text/javascript" src="OpenLayers.js"></script>

3.写js方法，创建地图：

var map = null;
function init(){
			
			<!-- create map -->
			var options={
				controls:[new OpenLayers.Control.KeyboardDefaults()]
			};//添加键盘控制的控件
			map = new OpenLayers.Map('map',options);//创建地图对象map,这里的map是用来显示的div的id
			var bounds = new OpenLayers.Bounds();//设置边界
			bounds.extend(new OpenLayers.LonLat(0,0));//扩展边界
			bounds.extend(new OpenLayers.LonLat(500,500));
			bounds.toBBOX();
			var size = new OpenLayers.Size(400,400);
			var wms = new OpenLayers.Layer.Image('b','img/maptest.jpg',bounds,size);//创建image类型的图层
			
			map.addLayer(wms);//将图层添加到地图里面
			map.setBaseLayer(wms);//设置图层为基层
			map.zoomToMaxExtent();
			
			<!-- add mapControl tools -->//下面几个事添加map控件的，根据自己需要添加
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position:new OpenLayers.Pixel(2,15)
			}));
			map.addControl(new OpenLayers.Control.ScaleLine());
			map.addControl(new OpenLayers.Control.OverviewMap());
			map.addControl(new OpenLayers.Control.Navigation());

好了，接下来就是显示地图啦，注意：上面代码中可以看出图片的路径和格式，这个可以根据需要更换。

<body onload="init()">
	<div id="map" style="width:500px;height:500px;"></div>
</body>

然后可以运行一下，就可以看到地图啦：

好啦，地图可以创建啦，接下来就是给地图创建标注点啦：

还是再init（）方法里面：

markers = new OpenLayers.Layer.Markers("Hello");
var lonlat = new OpenLayers.LonLat(x,y);//x、y为标注点的坐标，自己指定
markers = autoAddMarker(lonlat);

map.addLayer(markers);
}//init()结束

function getIcon(){
			var size = new OpenLayers.Size(21,25);
			var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
			var icon = new OpenLayers.Icon('img/marker.png',size,offset);
			return icon;
		}
		
function autoAddMarker(lonlat){
			var marker = new        OpenLayers.Marker(lonlat,getIcon());    
			marker.events.register("click", marker, function(evt){
				alert("Hello");
            });
			markers.addMarker(marker);
			return markers;
}

这样就可以在指定的坐标点产生标注图标了。

接下来你可能还会用到给地图添加文字标注，下面我们就一起来看看怎么添加文本标注吧：

还是再init()方法里面：

var style = new OpenLayers.Style({
				label:"${type}",
				fontColor:"#289E08",
				fontFamily:"sans-serif",
				fontWeight:"bold",
				fontSize:30
			});//这个style是文本标注图层的style，在这里可以设置文本标注的各种属性
			
			var point = new OpenLayers.Geometry.Point(126,262);//创建文本标注的坐标点
			
			vectorLayer = new OpenLayers.Layer.Vector("labelLayer",{
				styleMap:new OpenLayers.StyleMap(style)
			});//创建一个文本标注的图层，一个图层上可以有多个标注
			
			var feature = new OpenLayers.Feature.Vector(point);//这一步才是创建文本标注
			
			feature.attributes={
				type:"Hello"
			};//设置文本标注的内容
			var feature = [feature];//因为addFeatures()的参数是数组，所以这里把feature放到数组里面
			map.addLayer(vectorLayer);//将文本标注图层添加到map里面
			vectorLayer.addFeatures(feature);//将该文本标注添加到文本标注图层上面

接下来给我做的完整的小例子给大家，希望可以帮到跟我一样刚接触OpenLayers的同学来学习。

<html>
<head>
	<title>Text</title>
	<script type="text/javascript" src="OpenLayers.js"></script>
	<script type="text/javascript">
		var map = null;
		var markers = null;
		var vectorLayer=null;
		function init(){
			
			<!-- create map -->
			var options={
				controls:[new OpenLayers.Control.KeyboardDefaults()]
			};
			map = new OpenLayers.Map('map',options);
			var bounds = new OpenLayers.Bounds();
			bounds.extend(new OpenLayers.LonLat(0,0));
			bounds.extend(new OpenLayers.LonLat(500,500));
			bounds.toBBOX();
			var size = new OpenLayers.Size(400,400);
			var wms = new OpenLayers.Layer.Image('b','img/maptest.jpg',bounds,size);
			
			map.addLayer(wms);
			map.setBaseLayer(wms);
			map.zoomToMaxExtent();
			
			<!-- add mapControl tools -->
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position:new OpenLayers.Pixel(2,15)
			}));
			map.addControl(new OpenLayers.Control.ScaleLine());
			map.addControl(new OpenLayers.Control.OverviewMap());
			map.addControl(new OpenLayers.Control.Navigation());
			
			<!-- create textLayers -->
			var style = new OpenLayers.Style({
				label:"${type}",
				fontColor:"#289E08",
				fontFamily:"sans-serif",
				fontWeight:"bold",
				fontSize:30
			});
			
			var point = new OpenLayers.Geometry.Point(126,262);
			
			vectorLayer = new OpenLayers.Layer.Vector("labelLayer",{
				styleMap:new OpenLayers.StyleMap(style)
			});
			
			var feature = new OpenLayers.Feature.Vector(point);
			
			feature.attributes={
				type:"Hello",
				fontColor:"#7C99E2"
			};
			var feature = [feature];
			map.addLayer(vectorLayer);
			vectorLayer.addFeatures(feature);
			
			<!-- create markerLayers -->
			markers = new OpenLayers.Layer.Markers("Hello");
			var lls = [[112,252],[86,34],[150,350],[100,200],[450,300]];
			for(var i=0;i<lls.length;i++){
				var arr = lls[i];
				var lonlat = new OpenLayers.LonLat(arr[0],arr[1]);
				markers = autoAddMarker(lonlat,i);
				
			}
			map.addLayer(markers);
			
			
		}
		
		
		function getIcon(){
			var size = new OpenLayers.Size(21,25);
			var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
			var icon = new OpenLayers.Icon('img/marker.png',size,offset);
			return icon;
		}
		
		function autoAddMarker(lonlat,i){
			var marker = new OpenLayers.Marker(lonlat,getIcon());
			marker.events.register("click", marker, function(evt){
				evt = getEvt(i);
                window.location.href=evt+".html";
            });
			markers.addMarker(marker);
			return markers;
		}
		
		function getEvt(i){
			var evt=null;
			if(i==0){
				evt="Test2";
			}else if(i==1){
				evt="Test3";
			}else if(i==2){
				evt="Test4";
			}else if(i==3){
				evt="Test5";	
			}else if(i==4){
				evt="Test6";
			}
			
			return evt;
		}
	</script>
</head>

<body onload="init()">
	<div id="map" style="width:500px;height:500px;"></div>
</body>
</html>

好了，到此为止！贴别要感谢那些在网上分享学习经验的前辈们，正是你们的分享才让我们这些后来的学习者更快的学习。谢谢！