4

这个小OpenLayers.Control.EditingToolbarfrom 默认插入：

这些按钮的含义并不十分明显。我想用一个按钮组替换这个编辑工具栏（例如 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>

这些图像是基本的精灵——所以我知道我可以改变这些。但我看不出我怎么能摆脱这些divs，用 s 代替它们button。我想过手动创建按钮组并向按钮添加click()事件侦听器，触发 OpenLayers 的不同编辑模式。但我找不到任何关于如何做到这一点的文档。

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

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

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

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

4

1 回答 1

5

最好的方法是手动构建控制按钮。基于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 标记。对于更改控件的每个元素，添加一个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>

您可以在此处查看此操作（使用测试用户注册，无需真正的电子邮件）并在 GitHub 上找到代码。

于 2012-05-13T13:30:07.390 回答