关于OpenLayers的初步使用小例子
? ? 刚开始接触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的idvar 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>?好了，到此为止！贴别要感谢那些在网上分享学习经验的前辈们，正是你们的分享才让我们这些后来的学习者更快的学习。谢谢！