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

Question

这个小OpenLayers.Control.EditingToolbar默认插入 from:

这些按钮的含义并不是很明显。我想用按钮组替换此编辑工具栏(例如，像 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>

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

---

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

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

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

• 通过破解 OpenLayers 源代码修改自动创建的编辑工具栏(meh…)——这值得吗？

Answer 1

最好的方法是手动构建控制按钮。基于Draw Feature Example ，您可以继续添加控件:

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 标记。对于每个更改控件的元素，添加一个调用 toggleControl 函数的 onClick 处理程序。您还可以通过 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>

可以看到这个in action here (用测试用户注册，不需要真实的电子邮件)并找到 code on GitHub .