首页 > 代码库 > openlayers自定义图层控制的实现

openlayers自定义图层控制的实现

2024-07-23 13:13:01   217人阅读

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


最近一直在考虑一件事情，那就是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就不会在地图中显示。实现后的效果如下：

没有节点选中

选中“省级行政区”节点

总结：虽然在效果上实现了类似于图层控制的效果，但是始终感觉这种方式不怎么靠谱，不知道哪位仁兄有更好的办法，小弟在线等答案！







openlayers自定义图层控制的实现


联系
我们