组合两个控制面板（AB）或切换它们（A）或（B）

Question

我有两个控制面板;一个用于默认绘图功能，另一个用于测量工具。

问题在于，由于它们位于不同的面板中，因此可以同时运行两个控件，每个面板一个。 （之前这似乎不是什么大问题，但我注意到当测量和默认绘图工具一起激活时，它们会取消行结束功能）

我要做的是将所有控件放在一个面板中并将它们切换到一起或切换面板（例如，当面板1的控制被激活时，停用面板2中的所有控件）

这是我的代码：

默认控制面板：

OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
  initialize: function(options){
    OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
    this.addControls([
      new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
      new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
      new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
      new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
      new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true})
    ])
    this.displayClass = 'olControlCustomNavToolbar'
  },
  draw: function(){
    var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
    this.defaultControl = this.controls[0];
    return div;
  }
});
var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
map.addControl(panel);

测量控制面板：

allControls = {
  line: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
    persist: true,
    handlerOptions: {
      layerOptions: {
        renderers: renderer,
        styleMap: styleMap
      }
    },
    textNodes: null,
    callbacks:{
      create:
      function(){
        this.textNodes = [];
//      vlayer.destroyFeatures(vlayer.features);
        mouseMovements = 0;
      },
      modify:
      function(point, line){
        if(mouseMovements++ < 5){
          return;
        }
        var len = line.geometry.components.length;
        var from = line.geometry.components[len -2];
        var to = line.geometry.components[len -1];
        var ls = new OpenLayers.Geometry.LineString([from, to]);
        var dist = this.getBestLength(ls);
        if(!dist[0]){
          return;
        }
        var total = this.getBestLength(line.geometry);
        var label = dist[0].toFixed(3) + " " + dist[1];
        var textNode = this.textNodes[len -2] || null;
        if(textNode && !textNode.layer){
          this.textNodes.pop();
          textNode = null;
        }
        if(!textNode){
          var c = ls.getCentroid();
          textNode = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(c.x, c.y), {}, {
            label: "",
            fontColor: "#800517",
            fontSize: "13px",
            fontFamily: "Tahoma",
            fontWeight: "bold",
            labelAlign: "cm"
          });
          this.textNodes.push(textNode);
          vlayer.addFeatures([textNode]);
        }
        textNode.geometry.x = (from.x + to.x) / 2;
        textNode.geometry.y = (from.y + to.y) / 2;
        textNode.style.label = label;   
        textNode.layer.drawFeature(textNode);
        this.events.triggerEvent("measuredynamic", {
          measure: dist[0],
          total: total[0],
          units: dist[1],
          order: 1,
          geometry: ls
        });
      }
    }
  }),
  polygon: new OpenLayers.Control.Measure(
    OpenLayers.Handler.Polygon, {
      persist: true,
      immediate: true,
      handlerOptions: {
        layerOptions: {
          renderers: renderer,
          styleMap: styleMap
        }
      }
    }
  )
};

var control;
for(var key in allControls) {
  control = allControls[key];
  control.events.on({
    "measure": handleMeasurements,
    "measurepartial": handleMeasurements
  });
  map.addControl(control);
}

..仅供参考

function handleMeasurements(evt){
  var geometry = evt.geometry;
  var units = evt.units;
  var order = evt.order;
  var measure = evt.measure;
  var element = document.getElementById('output');
  var position = (map.getLonLatPxFromViewPortPx);
  var out = "";
  if(order == 1){
    out += "Distance: " + measure.toFixed(3) + " " + units;
  }
  else{
    out += "Area: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
  }
  element.innerHTML = out;
}

function toggleControl(element){
  vlayer.destroyFeatures(vlayer.features);
  for(key in allControls){
    var control = allControls[key];
    if(element.value == key && element.click){
      control.activate();
      var label = document.getElementById('output');
      var emptyOut = "";
      label.innerHTML = emptyOut;
    }
    else{
      control.deactivate();
    }
  }
}

一直在寻找一种方法来做到这一点，到目前为止还没有找到任何有用的东西，如果你可以帮我提一些关于如何去做的建议，我将非常感激。感谢

编辑：我没有使用GeoExt，也没有考虑使用它。我正在寻找有关如何仅使用OpenLayers 2.11库进行此操作的建议。再次感谢。