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

一、多标注显示

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应用已经足够。

典型界面如下:

转载自:https://blog.csdn.net/linlzk/article/details/20049405

You may also like...

退出移动版