1、一、多标注显示1、多标注显示：通过Feature和Marker实现多点标注。我对openlayers例子提供的代码做了一些改动，添加单个标注函数如下:[javascript]view plaincopy/***Function:addMarker*Addanewmarkertothemarkerslayergiventhefollowinglonlat,*popupClass,andpopupcontentsHTML.Alsoallowspecifying*whetherornottogivethepopupaclosebox.**Parameters:*ll-{<OpenLayers.LonLat>}Wheretoplacethemarker*popupClass-{<OpenLayers.Class>}Whichclassofpopuptobringup*whenthemarkerisclicked.*popupContentHTML-{String}Whattoputinthepopup*closeBox-{Boolean}Shouldpopuphaveaclosebox?*overflow-{Boolean}Letthepopupoverflowscrollbars?*/functionaddMarker(markerName,icon,ll,popupClass,popupContentHTML,closeBox,overflow){varfeature=newOpenLayers.Feature(markerName,ll,{icon:icon.clone()});feature.closeBox=closeBox;feature.popupClass=popupClass;feature.data.popupContentHTML=popupContentHTML;feature.data.overflow=(overflow)?"auto":"hidden";varmarker=feature.createMarker();varmarkerClick=function(evt){if(this.popup==null){this.popup=this.createPopup(this.closeBox);this.popup.setBackgroundColor("#E2E7EB");this.popup.setBorder("1px#0066ffsolid");map.addPopup(this.popup);this.popup.show();}else{this.popup.toggle();}currentPopup=this.popup;OpenLayers.Event.stop(evt);};marker.events.register("mousedown",feature,markerClick);markerName.addMarker(marker);}上诉函数中[javascript]view plaincopyif(this.popup==null){this.popup=this.createPopup(this.closeBox);this.popup.setBackgroundColor("#E2E7EB");this.popup.setBorder("1px#0066ffsolid");map.addPopup(this.popup);this.popup.show();}else{this.popup.toggle();}currentPopup=this.popup;同时也实现了点击弹出框的效果，显示内容见下面。2、调用上面函数实现多点标注，核心代码如下：[javascript]view plaincopyvarurl='gis/img/cctv.gif';varsz=newOpenLayers.Size(20,20);//尺寸大小varcalculateOffset=function(size){returnnewOpenLayers.Pixel(-(size.w/2),-size.h);};varicon=newOpenLayers.Icon(url,sz,null,calculateOffset);varlonLat,popupContentHTML,popupClass;if(cctvList==null){return;}//遍历显示for(vari=0;i<cctvList.length;i++){lonLat=newOpenLayers.LonLat(cctvList[i].gis_x,cctvList[i].gis_y);//google地图需要转换坐标lonLat.transform(map.displayProjection,map.getProjectionObject());device_name=cctvList[i].device_name;//popupContentHTML="<b>治安监控<br>"+device_name+"</b>";popupContentHTML=createPopupContentHTML('治安监控',cctvList[i]);popupClass=OpenLayers.Popup.Anchored;addMarker(cctvMarkers,icon,lonLat,popupClass,popupContentHTML,true);}其中cctvList是从数据库获取设备列表json格式；createPopupContentHTML函数实现点击GIS标注弹出框显示内容；cctvMarkers是定义的全局图层变量，用于多图层显示控制；用户通过遍历将多个点在GIS上显示；
2、二、图层控制通过定义全局Markers变量实现不同图层的显示控制。预先定义几个变量，如：var cctvMarkers,tgsMarkers,epsMarkers; 每个变量表示一个图层，每个图层上的标注通过方法一实现添加即可；在页面加载时把各图层的标注全部加载完毕，需要隐藏某一个图层则通过调用Markers.clearMarkers()方法清理掉该图层数据即可，待需要显示时再重新加载，即调用方法一即可。[javascript]view plaincopy//隐藏图层functionhiddenMarker(markerName){if(markerName=='cctv'){cctvMarkers.clearMarkers();}elseif(markerName=='tgs'){tgsMarkers.clearMarkers();}else{epsMarkers.clearMarkers();}}
3、三、搜索定位搜索定位其实首先是从数据库中根据关键字查找出符合的结果项，然后再将这些结果根据坐标在GIS上进行渲染标注，当点击某一结果是进行定位；我这里定位的实现是通过marker标注的定位图片的方式实现，这样做有个问题就是定位marker会覆盖方法一中设备的点击弹出事件，我这里用了最笨的方法就是定位标注时重新注册点击弹出事件。关键代码如下：[javascript]view plaincopy//gis定位并居中functiondeviceLocate(data){//alert(data);varurl='jsp/gis/img/location.gif';varsz=newOpenLayers.Size(25,30);//尺寸大小varcalculateOffset=function(size){returnnewOpenLayers.Pixel(-(size.w/2),-size.h);};varicon=newOpenLayers.Icon(url,sz,null,calculateOffset);varlonLat=newOpenLayers.LonLat(locationDataList[data].gis_x,locationDataList[data].gis_y);//google地图需要转换坐标lonLat.transform(map.displayProjection,map.getProjectionObject());locateMarkers.clearMarkers();//varpopupContentHTML,popupClass;vartitle='设备信息';if(locationDataList[data].device_type=='10'){title='卡口';}elseif(locationDataList[data].device_type=='11'){title='电警';}elseif(locationDataList[data].device_type=='12'){title='治安监控';}popupContentHTML=createPopupContentHTML(title,locationDataList[data]);popupClass=OpenLayers.Popup.Anchored;addMarker(locateMarkers,icon,lonLat,popupClass,popupContentHTML,true);//locateMarkers.addMarker(newOpenLayers.Marker(lonLat,icon));//居中显示map.setCenter(lonLat,4);}
4、四、新增标注在GIS上添加新标注只需获取相应的经纬度坐标，保存志数据库即可。init方法里增加[javascript]view plaincopy//单击事件varclick=newOpenLayers.Control.Click();map.addControl(click);click.activate();单机获取坐标函数[javascript]view plaincopy//单击事件响应OpenLayers.Control.Click=OpenLayers.Class(OpenLayers.Control,{defaultHandlerOptions:{'single':true,'double':false,'pixelTolerance':0,'stopSingle':false,'stopDouble':false},initialize:function(options){this.handlerOptions=OpenLayers.Util.extend({},this.defaultHandlerOptions);OpenLayers.Control.prototype.initialize.apply(this,arguments);this.handler=newOpenLayers.Handler.Click(this,{'click':this.trigger},this.handlerOptions);},trigger:function(e){markers.clearMarkers();varurl='gis/img/biaozhu.png';varsz=newOpenLayers.Size(30,30);//尺寸大小varcalculateOffset=function(size){returnnewOpenLayers.Pixel(-(size.w/2),-size.h);};varicon=newOpenLayers.Icon(url,sz,null,calculateOffset);varlonlat=map.getLonLatFromPixel(e.xy);marker=newOpenLayers.Marker(lonlat,icon);markers.addMarker(marker);//将墨卡托坐标转换成经纬坐标lonlat.transform(newOpenLayers.Projection("EPSG:900913"),newOpenLayers.Projection("EPSG:4326"));//坐标传回给父页面变量parent.gisx=lonlat.lon.toFixed(5);parent.gisy=lonlat.lat.toFixed(5);}});以上几个功能对付简单GIS应用已经足够。典型界面如下：
