ol5+vueで作成したオープン版の「ひなたGIS」です。「ひなたGIS」の作者が作っています
・初期時 ・２画面 ・４画面 ・５万分の１旧版地形図 ・海面上昇シミュレーション
地図ライブラリはol5を使用。フレームワークにvue+vuexを使用しています。vue CLI 3で開発、ビルドしています。
ダウンロードしたファイル群を保存したディレクトリで下記のコマンドを実行して必要モジュールをインストールしてください。
npm i
必要モジュールがインストールされたら次のコマンドで開発サーバーが立ち上がります。立ち上がったらブラウザでhttp://localhost:8080を表示してください。
npm run serve
次のコマンドでビルドします。なお、js/layers.jsに追記することによりレイヤーを追加することができます。
npm run build
ken ochiai
vuexを使用しています。 複数のコンポーネントから参照する可能性のある変数はstore(vuex)に設置しています。 自コンポーネントだけで済む変数は極力コンポーネントに置いています。
App.vueのmountedに一連の処理を置いています。
レイヤーリスト下段をクリックするとstoreにあるlayerListsにレイヤーの情報を追加します。追加されるとLayer.vueのmountedに仕掛けているwatchが動作してOLのレイヤーを操作します。