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

もなかアイスの試食品

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

OpenLayers + AngularJSでdirectiveを使ったら捗った

Javascript OpenLayers AngularJS

AngularJSを使い始めて6ヶ月・・・

やっと使い方がわかって気がする

あとJavascriptのいわゆる「MV*」も


いや、わかっていないな~


わかったことは、とにかくcontrollerはイベント処理に徹底しよう!というぐらい


OpenLayers(2.13.1) + AngularJS を使ったWEBアプリを作ってて

OpenLayersとAngularJSのつなぎ合わせがうまくいかない(うまく作れない)

OpenLayersインスタンス・操作関数をfactoryにまとめて、controllerで操作すると

初期化処理で「地図オブジェクトないよ!」とか「レイヤの表示状態が取れねぇ」とか・・・

結局「$timeout(function・・・ ,0)」を入れまくる始末・・・

だいたい、controllerの中に「window.onload」とか書いて、その中にOpenLayersの初期化処理 書いてる時点でお察しください 地図が出れば良いのだ!

これはよろしくない

controller、factory(service)、viewについて以下のサイトで再勉強

AngularJS - お前のAngular.jsはもうMVCではない。と言われないためのTutorial - QiitaAngularJS - お前のAngular.jsはもうMVCではない。と言われないためのTutorial - Qiita
AngularJSのMVWパターンを理解する - QiitaAngularJSのMVWパターンを理解する - Qiita

OpenLayersの処理がcontrollerに1行でも入っていること自体がよろしくないんじゃ・・・?

OpenLayersって地図画面操作だよなぁ・・・

画面操作?・・・あれ?directiveが良いんじゃね?


というわけでAngularJSのdirective(&factory)とOpenLayersを使って地図を表示してみた。

↓サンプル

id="map_canvas"が読み込まれるタイミングやらインスタンスができるタイミングで悩んでいたのに・・・最初からこう書けばよかった・・・

どちらかと言えば、超肥大化してしまったOpenLayersのラッパーファクトリをなんとかしないと 似たような処理しかないのに2000行あるでござる!