2

マップ上の PanPanel コントロールと ZoomPanel コントロールを左上ではなく左下隅に再配置しようとしています。オプションを追加できることがわかりましたが、試してみた限り、ウィンドウのサイズが変更された場合でも、左下にとどまるように指示する方法が見つかりません。

また、左下を基準にして再配置するように指示したときに、通常のようにスタックするように指示する方法もわかりません。

両方のパネルを構成する画像を変更したため、パン パネルとズーム パネルの間に必要以上のスペースができたので、それらを互いに近づけようとしています。

コントロールでオプションを使用することを検討することに加えて、両方のパネルを囲む div の id のスタイルを作成しようとしましたが、div の id の値は「OpenLayers.Map_2_OpenLayers_Container」であり、「.」が含まれています。 . 私の知る限り、それはスタイリングの正当な ID ではありません。とにかく、うまくいきませんでした。その上、名前が常に同じであるとは信じられないと思います。このページでの継続的な作業により、時間の経過とともに多くの追加が行われます.

何か案は？

4

3 に答える 3

1

これが他の誰かに役立つかもしれない場合に備えて。私は OpenLayers 3 を使用しており、ズーム コントロールをマップの右側に移動したいと考えていました。私のマップは「tm-openlayers-map」クラス値を持つ要素にアタッチされており、ズーム コントロールを移動するために次の css/sass を使用しました

.tm-openlayer-map

   //change the colour of the map buttons
   button {
       background: $title-bar;
   }

   .ol-zoom {
      top: 0.5em;
      right: 0.5em;
      left: auto;
      //move the tooltips to the left of the now right aligned buttons
      .ol-has-tooltip:hover [role=tooltip] {
          left: -5.5em;
          border-radius: 4px 0 0 4px;
       }
      .ol-zoom-out.ol-has-tooltip:hover [role=tooltip]{
          left: -6.2em;
       }
    }
  //make sure the rotate controls included by default with an opacity of 0 don't
  //block clicks intended for the '+' button
  .ol-rotate {
     visibility: hidden;
  }
}
于 2015-01-09T16:01:40.913 に答える
0

だから私は問題を見つけました。まず、トップを自動に設定していませんでした。style.css ファイルで 10px に設定されていたので、style.css ファイルでそれを auto に変更すると、下が機能しました。しかし、その後、私の css ファイルは機能しませんでした。パンとズームの OpenLayers の例を見つけたところ、最終的に、私が行っていたことと彼らが行っていたことの違いは、ページの先頭で style.css ファイルを明示的にロードしていないことであることがわかりました。そのため、OpenLayers マップが作成されると、css が読み取られた後、style.css ファイルが遅く読み取られるため、オーバーライドが上書きされたようです。初期ロード (ページの先頭) を実行すると、完全に機能しました。

マップ レイヤーを作成するときに作成される属性コントロールは、ページ上にマップがまだ作成されていないため、現在の CSS を読み取る必要があるようです。初期ロードを削除しても、css ファイルから加えられた変更が引き続き適用されます。しかし、初期ロードを削除すると、パン コントロールとズーム コントロールが変更に応答しなくなります。これは、Map オブジェクトが style.css ファイルの後期ロード後にスタイルを読み取っていることを意味すると考えています。私のCSS。

図に行く...

于 2013-04-05T11:33:56.340 に答える