openlayers自定义图层控制的实现
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就不会在地图中显示。实现后的效果如下：
没有节点选中
选中“省级行政区”节点
总结：虽然在效果上实现了类似于图层控制的效果，但是始终感觉这种方式不怎么靠谱，不知道哪位仁兄有更好的办法，小弟在线等答案！