読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

【OpenLayers2】地図の縮尺(ズーム)でマーカサイズを動的に変更する

OpenLayersをそのまま使った場合、マーカサイズが変わらない。

日本全体が見える縮尺にしても、最大に拡大しても、描画されるアイコン・ベクターのサイズは同じ

そのためマーカサイズ地図の縮尺でアイコンサイズを動的に変えようとするのは、あるあるパターンだと思う。

でもGoogle先生に聞いてみても、検索ワードが悪いのか全然ヒットしない

色々試してみて、実現方法がわかったので書いておく

ちなみに使用しているレイヤクラスは「OpenLayers.Layer.Markers」ではなく、ポイントとか線とかポリゴンとか描ける「OpenLayers.Layer.Vector」です

( ´ー`)。о(ブログタイトルこれで大丈夫かな・・・)



↓実際のソースコードはコチラ

動的に変えているのをわかりやすくするため、設定値を極端にしている



jsfiddleにゴチャゴチャ書いているが、ポイントは以下の点

  1. OpenLayers.Mapのインスタンスのeventsプロパティに'zoomend'イベントリスナを登録
  2. zoomendイベント発生時に、styleMapインスタンスを更新



zoomendイベントは名前の通り、ズームが完了したら発生するイベント。

「地図の縮尺でアイコンサイズを動的に変える」機能の実装なので、このイベントが適切だと思う

試しにzoomstartイベントを使ってみようと思ったら、zoomstartイベントが発火しない・・・



styleMapインスタンスはプロパティの根が深いので厄介

↓「window.console.log(styleMap);」でプロパティの構造を覗いてみたところ f:id:monakaice88:20160218071403p:plain


※各プロパティについて

  1. default・・・デフォルト。描いた時このスタイルが使われる。
  2. select・・・選択状態のスタイル。OpenLayers.Control.SelectFeatureでFeatureを選択可能な状態にする必要あり
  3. delete・・・どこで使われているかナゾのスタイル。Deleteなのにスタイルがある・・・だと?
  4. temporary・・・図の編集中に使われるスタイル。


styleMapについて、参考になるサイト&ソースコード

OpenLayers Labeled features example

今回は円の大きさを動的に変更するので「styles.default.defaultStyle.pointRadius」をzoomの値によって変更している。

defaultスタイルの中にdefaultStyleプロパティ・・・解せないんだよなぁ