Implementation of openlayers custom Layer Control

I haven't written a blog post for a long time. Today I come out to take a bubble.

One thing I have been thinking about recently is the Layer Control for custom WMS in openlayers. Anyone who has used openlayers knows that there is a Layer Control in openlayers, and the calling method is also very simple:

Map. addcontrol (New openlayers. Control. layerswitcher ({'ascending': true}); // Layer Control

However, in terms of convenience and aesthetics, the layer control cannot meet your needs. After a while, we have finally achieved it for some time, the following describes my Implementation ideas.

First, let's talk about the difficulties. Anyone who has used ArcGIS for JavaScript knows that wmslayer in the ArcGIS for javascript API has the setvisiblelayers (layers) method, which can easily implement WMS layer control, however, there is no similar implementation method in the WMS of openlayers, so you have to consider the implementation.

Next, let's talk about the implementation environment. The map service uses geoserver and jquery ztree for Layer Control. The following describes the implementation steps.

1. Publish the WMS layer in geoserver. The published layers include the following.

VaR znodes = [{ID: "base", PID: 0, name: "Administrative Area Chart", open: true}, {ID: "China: capital", PID: "base", name: "provincial capital city" },{ ID: "China: pro_polygon", PID: "base", name: "provincial administrative district" },{ ID: "theme", PID: 0, name: "图", open: true}, {ID: "China: Lake", PID: "theme", Name: "Lake"}];

2. After the map is published, define the map and layer and add the layer to the map.

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

The code for getextendwms is as follows:

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 is not displayed during layer initialization.

3. Create layers control panel and tree

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

After the tree is created, the effect is as follows:

The style is not too big to be decorated. It is ugly and can be used together first.
4. The main effect of layer control is to select the node of the layer control directory. This layer is displayed in the figure. Whether a layer node is selected is mainly to implement the oncheck event of ztree. The implementation method is getcheckednodes. The Code is as follows:

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

The idea is: first obtain the name of the layer of the selected child node. If a child node is selected, remove the WMS layer from the map, and then define the WMS layer as the selected child node, set its visibility to true and add WMS to the map. The selected coating is displayed on the map. If no node is selected, remove the WMS layer from the map, define the WMS layer as any layer, set its visibility to false, and add WMS to the map so that WMS will not be displayed on the map. The effect after implementation is as follows:
No Node Selected
Select the "Provincial Administrative Region" Node
Summary: although the effect is similar to that of Layer Control, I always feel that this method is not very reliable. I don't know which of my friends has a better solution. I am waiting for answers!

Implementation of openlayers custom Layer Control