我可以用普通按钮替换OpenLayers编辑工具栏吗？

Question

默认情况下插入此OpenLayers.Control.EditingToolbar来自

这些按钮的意思并不明显。我想用一个按钮组替换这个编辑工具栏（例如，像一个Twitter Bootstrap提供的）：

编辑工具栏的标记目前是：

<div id="panel" class="olControlEditingToolbar">
  <div class="olControlNavigationItemInactive olButton"></div>
  <div class="olControlDrawFeaturePointItemActive olButton"></div>
  <div class="olControlDrawFeaturePathItemInactive olButton"></div>
  <div class="olControlDrawFeaturePolygonItemInactive olButton"></div>
</div>

图像是基本的精灵 - 所以我知道我可以改变这些。但我无法看到我如何摆脱这些div，用button替换它们。我想过手动创建按钮组并将click()事件监听器添加到按钮，触发OpenLayers的不同编辑模式。但我找不到任何关于如何做到这一点的文件。

---

所以，基本上，我看到了这些选项：

• 手动创建按钮组，并通过我自己的JS触发相应的OpenLayers事件 - 但我需要触发哪些事件？

• 不要使用EditingToolbar，而是使用OpenLayers手动构建我的工具栏 - 我该怎么做？

• 通过黑客攻击OpenLayers来源修改自动创建的编辑工具栏（meh ...） - 这是值得的吗？

Answer 1

最好的方法是手动构建控制按钮。根据{{​​3}}，您可以继续添加控件：

drawControls = {
  point: new OpenLayers.Control.DrawFeature(pointLayer,
      OpenLayers.Handler.Point),
  line: new OpenLayers.Control.DrawFeature(lineLayer,
      OpenLayers.Handler.Path),
  polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
      OpenLayers.Handler.Polygon),
  )
};

for(var key in drawControls) {
  map.addControl(drawControls[key]);
}

然后，添加一个函数，根据单击的元素更改当前使用的控件：

function toggleControl(element) {
    for(key in drawControls) {
        var control = drawControls[key];
        if(element.value == key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

最后，自己创建HTML标记。对于更改控件的每个元素，添加一个调用onClick函数的toggleControl处理程序。您还可以通过jQuery附加单击处理程序，但实质上，这可以工作：

<ul id="controlToggle">
  <li>
      <input type="radio" name="type" value="none" id="noneToggle"
             onclick="toggleControl(this);" checked="checked" />
      <label for="noneToggle">navigate</label>
  </li>
  <li>
      <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
      <label for="pointToggle">draw point</label>
  </li>
  <!-- add more elements here, based on which draw modes you added -->
</ul>

您可以看到此Draw Feature Example（注册测试用户，无需真正的电子邮件）并找到in action here。