刚开始接触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>
好了,到此为止!贴别要感谢那些在网上分享学习经验的前辈们,正是你们的分享才让我们这些后来的学习者更快的学习。谢谢!