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>

画像は基本的なスプライトなので、これらを変更できることはわかっています。divしかし、これらの s を s に置き換えて、これらの 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 に答える