openlayers自定義圖層控制的實現

好久沒寫博文了,今天出來冒個泡。

最近一直在考慮一件事情,那就是openlayers中自定義wms的圖層控制。用過openlayers的人都知道,在openlayers中有自帶的圖層控制的控件,調用方法也很簡單:

map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));//圖層控制

但是,不論是從操作的方便程度還是美觀性方面考慮,自帶的圖層控制是無法滿足需求的,考慮了一段時間,今天終於有時間實現了,下面就說說我的實現思路。

首先,說說難點,用過arcgis for javascript的人都知道,在arcgis for javascript API中的wmsLayer有setVisibleLayers(layers)的方法,可以很方便的實現WMS的圖層控制,但是在openlayers的wms沒有類似的實現方法,所以得自己考慮實現。

接着,說說實現的環境。地圖服務我用的是geoserver,圖層控制用jquery的zTree,下面詳細說說我的實現步驟。

1、在geoserver中發佈wms圖層,發佈的圖層包括以下。

var zNodes =[
	{ id:"base", pId:0, name:"行政區劃圖", open:true},
	{ id:"china:capital", pId:"base", name:"省會城市"},
	{ id:"china:pro_polygon", pId:"base", name:"省級行政區"},
	{ id:"theme", pId:0, name:"專題圖", open:true},
	{ id:"china:lake", pId:"theme", name:"湖泊"}
];

2、地圖發佈好以後就定義地圖與圖層,並將圖層添加到地圖中。

map = new OpenLayers.Map('map');
wms=GetExtendWms('china:pro_polygon',"wms",false);
map.addLayer(wms);

GetExtendWms的方法代碼如下:

var GetExtendWms = function(layer,layername,visibility){
	var wms = new OpenLayers.Layer.WMS(
		layername, 
		"http://localhost:8088/geoserver/china/wms",
		{
			LAYERS: layer,
			transparent:true,
			STYLES: '',
			format: format
		},
		{
			singleTile: false, 
			ratio: 1, 
			isBaseLayer: false,
			visibility:visibility,
			yx : {'EPSG:4326' : true}
		} 
	);
	return wms;
}

在圖層初始化的時候不顯示wms。

3、創建圖層控制面板與樹

var setting = {
	check: {
		enable: true
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		onCheck: getCheckedNodes
	}
};
$(document).ready(function(){
	$.fn.zTree.init($("#tree"), setting, zNodes);
});

樹創建完成後效果如下:

沒有對樣式做太大的裝飾,比較醜陋,先湊合用。

4、圖層控制的實現

主要效果爲選中圖層控制目錄的節點,在圖中顯示該圖層,取消選擇,不顯示該圖層。圖層節點的選中與否主要是實現zTree的onCheck事件,實現方法爲getCheckedNodes,代碼如下:

function getCheckedNodes(){
	var checked="";
	var zTree = $.fn.zTree.getZTreeObj("tree");
	var checkedNodes = zTree.getCheckedNodes(true);
	if(checkedNodes.length!=0){
		for(var i=0;i<checkedNodes.length;i++){
			if(!checkedNodes[i].isParent){
				checked+=checkedNodes[i].id+",";
			}
		}
		checked=checked.substring(0,checked.length-1);
		map.removeLayer(wms);
		wms=GetExtendWms(checked,"wms",true);
		map.addLayer(wms);
	}
	else{
		map.removeLayer(wms);
		wms=GetExtendWms('china:pro_polygon',"wms",false);
		map.addLayer(wms);
	}
}

思路是:首先獲取選中的子節點的圖層的名稱,如果有子節點被選中,在地圖中將wms圖層移除,再定義wms的圖層爲選中的子節點,並設置其可見爲true,並將wms添加到地圖中,這時選中的塗層就會在地圖中顯示;如果沒有節點被選中,在地圖中將wms圖層移除,再定義wms的圖層爲任一圖層,設置其可見爲false,將wms添加到地圖中,wms就不會在地圖中顯示。實現後的效果如下:

沒有節點選中

選中“省級行政區”節點

總結:雖然在效果上實現了類似於圖層控制的效果,但是始終感覺這種方式不怎麼靠譜,不知道哪位仁兄有更好的辦法,小弟在線等答案!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章