openlayers自定义图层控制的实现

标签：des   style   blog   http   color   io   os   java   ar   

好久没写博文了，今天出来冒个泡。

最近一直在考虑一件事情，那就是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:"湖泊"}
];

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

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;
}

3、创建图层控制面板与树

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

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);
	}
}

openlayers自定义图层控制的实现

标签：des   style   blog   http   color   io   os   java   ar   

原文地址：http://blog.csdn.net/gisshixisheng/article/details/39431675