openlayers图层控制加入group layer功能

/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD * license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the * full text of the license. */ /** * @requires OpenLayers/Control.js */ /** * Class: OpenLayers.Control.LayerSwitcher * The LayerSwitcher control displays a table of contents for the map. This * allows the user interface to switch between BaseLasyers and to show or hide * Overlays. By default the switcher is shown minimized on the right edge of * the map, the user may expand it by clicking on the handle. * * To create the LayerSwitcher outside of the map, pass the Id of a html div * as the first argument to the constructor. * * Inherits from: * - <OpenLayers.Control> */ OpenLayers.Control.LayerSwitcher = OpenLayers.Class(OpenLayers.Control, { /** * Property: activeColor * {String} */ activeColor: "darkblue", /** * Property: layerStates * {Array(Object)} Basically a copy of the "state" of the map's layers * the last time the control was drawn. We have this in order to avoid * unnecessarily redrawing the control. */ layerStates: null, // DOM Elements /** * Property: layersDiv * {DOMElement} */ layersDiv: null, /** * Property: baseLayersDiv * {DOMElement} */ baseLayersDiv: null, /** * Property: baseLayers * {Array(<OpenLayers.Layer>)} */ baseLayers: null, /** * Property: dataLbl * {DOMElement} */ dataLbl: null, /** * Property: dataLayersDiv * {DOMElement} */ dataLayersDiv: null, /** * Property: dataLayers * {Array(<OpenLayers.Layer>)} */ dataLayers: null, /** * Property: minimizeDiv * {DOMElement} */ minimizeDiv: null, /** * Property: maximizeDiv * {DOMElement} */ maximizeDiv: null, /** * APIProperty: ascending * {Boolean} */ ascending: true, /** Add by Peter for group extension * Property: groupDivs * Object with {DOMElements}, {Booleans} and {Strings} */ groups: { groupDivs:{}, checked: {}, layers:{}, display: {} }, /** /** * Constructor: OpenLayers.Control.LayerSwitcher * * Parameters: * options - {Object} */ initialize: function(options) { OpenLayers.Control.prototype.initialize.apply(this, arguments); this.layerStates = []; }, /** * APIMethod: destroy */ destroy: function() { OpenLayers.Event.stopObservingElement(this.div); OpenLayers.Event.stopObservingElement(this.minimizeDiv); OpenLayers.Event.stopObservingElement(this.maximizeDiv); //clear out layers info and unregister their events this.clearLayersArray("base"); this.clearLayersArray("data"); this.map.events.un({ "addlayer": this.redraw, "changelayer": this.redraw, "removelayer": this.redraw, "changebaselayer": this.redraw, scope: this }); OpenLayers.Control.prototype.destroy.apply(this, arguments); }, /** * Method: setMap * * Properties: * map - {<OpenLayers.Map>} */ setMap: function(map) { OpenLayers.Control.prototype.setMap.apply(this, arguments); this.map.events.on({ "addlayer": this.redraw, "changelayer": this.redraw, "removelayer": this.redraw, "changebaselayer": this.redraw, scope: this }); }, /** * Method: draw * * Returns: * {DOMElement} A reference to the DIV DOMElement containing the * switcher tabs. */ draw: function() { OpenLayers.Control.prototype.draw.apply(this); // create layout divs this.loadContents(); // set mode to minimize if(!this.outsideViewport) { this.minimizeControl(); } // populate div with current info this.redraw(); return this.div; }, /** * Method: clearLayersArray * User specifies either "base" or "data". we then clear all the * corresponding listeners, the div, and reinitialize a new array. * * Parameters: * layersType - {String} */ clearLayersArray: function(layersType) { var layers = this[layersType + "Layers"]; if (layers) { for(var i=0, len=layers.length; i<len ; i++) { var layer = layers[i]; OpenLayers.Event.stopObservingElement(layer.inputElem); OpenLayers.Event.stopObservingElement(layer.labelSpan); } } this[layersType + "LayersDiv"].innerHTML = ""; this[layersType + "Layers"] = []; /**Add by peter for group extension * */ this.groups.groupDivs = {}; }, /** * Method: checkRedraw * Checks if the layer state has changed since the last redraw() call. * * Returns: * {Boolean} The layer state changed since the last redraw() call. */ checkRedraw: function() { var redraw = false; if ( !this.layerStates.length || (this.map.layers.length != this.layerStates.length) ) { redraw = true; } else { for (var i=0, len=this.layerStates.length; i<len; i++) { var layerState = this.layerStates[i]; var layer = this.map.layers[i]; if ( (layerState.name != layer.name) || (layerState.inRange != layer.inRange) || (layerState.id != layer.id) || (layerState.visibility != layer.visibility) ) { redraw = true; break; } } } return redraw; }, /** * Method: redraw * Goes through and takes the current state of the Map and rebuilds the * control to display that state. Groups base layers into a * radio-button group and lists each data layer with a checkbox. * * Returns: * {DOMElement} A reference to the DIV DOMElement containing the control */ redraw: function() { //if the state hasn't changed since last redraw, no need // to do anything. Just return the existing div. if (!this.checkRedraw()) { return this.div; } //clear out previous layers this.clearLayersArray("base"); this.clearLayersArray("data"); var containsOverlays = false; var containsBaseLayers = false; // Save state -- for checking layer if the map state changed. // We save this before redrawing, because in the process of redrawing // we will trigger more visibility changes, and we want to not redraw // and enter an infinite loop. var len = this.map.layers.length; this.layerStates = new Array(len); for (var i=0; i <len; i++) { var layer = this.map.layers[i]; this.layerStates[i] = { 'name': layer.name, 'visibility': layer.visibility, 'inRange': layer.inRange, 'id': layer.id }; /**Add by peter for group extension * create group divs */ if (layer.group && !layer.isBaseLayer) { layer.group = layer.group.replace(/\/$/,""); layer.group = layer.group.replace(/^\//,""); this.createGroupDiv(layer.group); } } var layers = this.map.layers.slice(); if (!this.ascending) { lay