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就不會在地圖中顯示。實現後的效果如下：

沒有節點選中

選中“省級行政區”節點

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