Openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等

来源：互联网发布：产品培训知乎编辑：程序博客网时间：2024/06/16 14:48

一、多标注显示

1、多标注显示：通过Feature和Marker实现多点标注。

我对openlayers例子提供的代码做了一些改动，添加单个标注函数如下:

/**     * Function: addMarker     * Add a new marker to the markers layer given the following lonlat,      *     popupClass, and popup contents HTML. Also allow specifying      *     whether or not to give the popup a close box.     *      * Parameters:     * ll - {<OpenLayers.LonLat>} Where to place the marker     * popupClass - {<OpenLayers.Class>} Which class of popup to bring up      *     when the marker is clicked.     * popupContentHTML - {String} What to put in the popup     * closeBox - {Boolean} Should popup have a close box?     * overflow - {Boolean} Let the popup overflow scrollbars?     */    function addMarker(markerName,icon,ll, popupClass, popupContentHTML, closeBox, overflow) {        var feature = new OpenLayers.Feature(markerName,ll,{icon:icon.clone()});        feature.closeBox = closeBox;        feature.popupClass = popupClass;        feature.data.popupContentHTML = popupContentHTML;        feature.data.overflow = (overflow) ? "auto" : "hidden";                        var marker = feature.createMarker();        var markerClick = function (evt) {            if (this.popup == null) {                this.popup = this.createPopup(this.closeBox);                this.popup.setBackgroundColor("#E2E7EB");                this.popup.setBorder("1px #0066ff solid");                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);    }

上诉函数中

 if (this.popup == null) {                this.popup = this.createPopup(this.closeBox);                this.popup.setBackgroundColor("#E2E7EB");                this.popup.setBorder("1px #0066ff solid");                map.addPopup(this.popup);                this.popup.show();            } else {                this.popup.toggle();            }            currentPopup = this.popup;

同时也实现了点击弹出框的效果，显示内容见下面。

2、调用上面函数实现多点标注，核心代码如下：

var url = 'gis/img/cctv.gif';var sz = new OpenLayers.Size(20, 20);  //尺寸大小var calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h); }; var icon = new OpenLayers.Icon(url, sz, null, calculateOffset); var lonLat,popupContentHTML,popupClass; if(cctvList == null){ return; }//遍历显示for(var i=0;i<cctvList.length;i++){lonLat = new OpenLayers.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上显示；

二、图层控制

通过定义全局Markers变量实现不同图层的显示控制。

预先定义几个变量，如：var cctvMarkers,tgsMarkers,epsMarkers; 每个变量表示一个图层，每个图层上的标注通过方法一实现添加即可；

在页面加载时把各图层的标注全部加载完毕，需要隐藏某一个图层则通过调用Markers.clearMarkers()方法清理掉该图层数据即可，待需要显示时再重新加载，即调用方法一即可。

//隐藏图层function hiddenMarker(markerName){if(markerName == 'cctv'){cctvMarkers.clearMarkers();}else if(markerName == 'tgs'){tgsMarkers.clearMarkers();}else{epsMarkers.clearMarkers();}}

三、搜索定位

搜索定位其实首先是从数据库中根据关键字查找出符合的结果项，然后再将这些结果根据坐标在GIS上进行渲染标注，当点击某一结果是进行定位；

我这里定位的实现是通过marker标注的定位图片的方式实现，这样做有个问题就是定位marker会覆盖方法一中设备的点击弹出事件，我这里用了最笨的方法就是定位标注时重新注册点击弹出事件。关键代码如下：

//gis定位并居中function deviceLocate(data){//alert(data);var url = 'jsp/gis/img/location.gif';var sz = new OpenLayers.Size(25, 30);  //尺寸大小var calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h); };var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);var lonLat = new OpenLayers.LonLat(locationDataList[data].gis_x,locationDataList[data].gis_y);//google地图需要转换坐标lonLat.transform(map.displayProjection, map.getProjectionObject());locateMarkers.clearMarkers();//var popupContentHTML,popupClass;var title = '设备信息';if(locationDataList[data].device_type == '10'){title = '卡口';}else if(locationDataList[data].device_type == '11'){title = '电警';}else if(locationDataList[data].device_type == '12'){title = '治安监控';}popupContentHTML = createPopupContentHTML(title,locationDataList[data]);popupClass = OpenLayers.Popup.Anchored;addMarker(locateMarkers,icon,lonLat, popupClass, popupContentHTML,true);//locateMarkers.addMarker(new OpenLayers.Marker(lonLat, icon));//居中显示map.setCenter(lonLat, 4);}

四、新增标注

在GIS上添加新标注只需获取相应的经纬度坐标，保存志数据库即可。

init方法里增加

//单击事件var click = new OpenLayers.Control.Click();            map.addControl(click);            click.activate();

单机获取坐标函数

//单击事件响应        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 = new OpenLayers.Handler.Click(                    this, {                        'click': this.trigger                    }, this.handlerOptions                );            },             trigger: function(e) {            markers.clearMarkers();            var url = 'gis/img/biaozhu.png';    var sz = new OpenLayers.Size(30, 30);  //尺寸大小    var calculateOffset = function(size) {    return new OpenLayers.Pixel(-(size.w/2), -size.h);     };    var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);                var lonlat = map.getLonLatFromPixel(e.xy);marker = new OpenLayers.Marker(lonlat, icon);markers.addMarker(marker);//将墨卡托坐标转换成经纬坐标lonlat.transform(new OpenLayers.Projection("EPSG:900913"),new OpenLayers.Projection("EPSG:4326"));                //坐标传回给父页面变量parent.gisx = lonlat.lon.toFixed(5);parent.gisy = lonlat.lat.toFixed(5);            }        });

以上几个功能对付简单GIS应用已经足够。

典型界面如下：

7 0