WebGIS情報システム - 要素プロジェクト戦闘

エレメントの取り付け

プロジェクトのルート ディレクトリで、まず Shift キーを押しながら右マウス ボタンを押し、ポップアップ右クリック メニューで [ここでコマンド ライン ウィンドウを開く] を選択し、コマンド ライン ウィンドウでコマンドを実行します。

Element のダウンロードとインストールを開始できます。Element を正常にインストールした後、package.json ファイルを開くと、図 1-11 に示すように、「dependency」キーに対応する値に element-ui が含まれていることがわかります。

図 1-11 「dependency」キーに対応する値には要素 ui が含まれます

OpenLayers のインストール

プロジェクトのルート ディレクトリで、Shift キーを押しながら右マウス ボタンを押し、ポップアップ右クリック メニューで [ここでコマンド ライン ウィンドウを開く] を選択し、コマンド ライン ウィンドウでコマンドを実行します。

OpenLayers のダウンロードとインストールを開始できます。OpenLayers が正常にインストールされた後、package.json ファイルを開くと、図 1-12 に示すように、「dependency」キーに対応する値に ol が含まれていることがわかります。

図 1-12 「依存関係」キーに対応する値には ol が含まれています

直接参照による開発環境の構成

初心者にとっては、直接参照して開発環境を構築するのが最も簡単で理解しやすいです。

Vueファイルをダウンロードする

Vue 公式 Web サイトを開き、最初に「開始」ボタンをクリックし、次にページ上の「インストール」ボタンをクリックします。次に、ページ上の「開発バージョン」ボタンと「製品バージョン」ボタンを見つけて、最後に「開発バージョン」をクリックします。図 1-13 に示すように、Vue ファイルをローカルにダウンロードします。

図 1-13 [開発バージョン] ボタンをクリックして Vue ファイルをダウンロードする
図 1-14 に示すように、読者は CDN を使用して Vue ファイルをオンラインで直接参照することもできます。

図 1-14 CDN を使用してオンラインで Vue ファイルを直接参照する

要素ファイルをダウンロードする

Element の公式 Web サイトを開き、図1-15に示すように、まず公式 Web サイトのホームページで「コンポーネント」ボタンをクリックし、新しいページで「unpkg.com/element-ui」をクリックします。「コンポーネント」ボタンをクリックした後、「unpkg.com/element-ui」をクリックします。

をクリックすると、図 1-16 に示すように、UNPKG ページが表示されます。

図 1-16 UNPKG ページ
図 1-17 に示すように、図 1-16 の lib フォルダにあるファイルindex.js を開きます。図 1-17 の [View Raw] ボタンをクリックすると、図 1-18 に示すように、Element の JavaScript コードが取得されます (コードの一部のみが表示されています)。
図 1-17 ファイルindex.jsを開いた後のページ

図 1-18 要素の JavaScript コード
Ctrl+S キーの組み合わせを押して、ページの JavaScript コードをローカルに保存します。「lib\theme-chalk」内のファイルindex.cssを開き、ページ上の「View Raw」ボタンをクリックし、Ctrl+Sキーの組み合わせを押してindex.cssのJavaScriptコードをローカルに保存します。
図 1-19 に示すように、読者は Element の公式 Web サイトで CDN を通じて Element ファイルを直接参照することもできます。

図 1-19 CDN を通じて Element ファイルを直接参照する

OpenLayers ファイルをダウンロードする

図 1-20 に示すように、OpenLayers 公式 Web サイトを開き、「コードを取得」を見つけてクリックします。図 1-21 に示すように、開いたページで「v6.0.0-dist.zip」をクリックすると、OpenLayers ファイルの圧縮パッケージをダウンロードできます。解凍後、ol.css ファイルと ol.js ファイルをコピーします。あなた自身のプロジェクトに。
図 1-20 「コードを取得」をクリックします。

図1-21 「v6.0.0-dist.zip」をクリック

図 1-22 に示すように、読者は OpenLayers ファイルを直接参照することもできます。

図 1-22 OpenLayers ファイルを直接参照する
この時点で、app という名前のフォルダーを作成できます。まずこのフォルダーの下に lib フォルダーを作成して、プロジェクトが参照する必要があるローカル リソースを保存します。次に、lib フォルダー内に Vue を作成します。フォルダー、Element フォルダー、OpenLayers フォルダーを作成し、ダウンロードした Vue ファイル、Element ファイル、OpenLayers ファイルを対応するフォルダーに保存します。プロジェクトのディレクトリ構造を図 1-23 に示します。読者は、個人の習慣に応じてプロジェクトのディレクトリ構造をカスタマイズすることもできます。
図 1-23 プロジェクトのディレクトリ構造

図に示すように、自分に合ったエディターを選択し (本書で使用するエディターは Visual Studio Code)、アプリ フォルダーに HTML ファイルを作成し、ダウンロードしたさまざまなライブラリ ファイルを HTML ファイルにインポートします。