好久沒寫博文了,今天出來冒個泡。
最近一直在考慮一件事情,那就是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就不會在地圖中顯示。實現後的效果如下:
沒有節點選中
選中“省級行政區”節點
總結:雖然在效果上實現了類似於圖層控制的效果,但是始終感覺這種方式不怎麼靠譜,不知道哪位仁兄有更好的辦法,小弟在線等答案!