ArcGIS Maps SDK for JavaScript シリーズのパート 1: Vue3 での ArcGIS マップの読み込み

ArcGIS Maps SDK for JavaScript の概要

ArcGIS Maps SDK for JavaScript は、インタラクティブなマップ アプリケーションを構築するために Esri によって開発された JavaScript ライブラリです。豊富な地図表示・分析・可視化機能を備え、さまざまなシーンに最適です。
現在、ArcGIS Maps SDK for JavaScript は、3.x と 4.x の 2 つの主要なバージョンで利用できます。

1. ArcGIS Maps SDK for JavaScript 3.x バージョン:
   • バージョン 3.x は ArcGIS Maps SDK for JavaScript の古いバージョンであり、一部の古いプロジェクトで依然として広く使用されています。
   • Dojo フレームワークに基づいて構築されており、強力な 2 次元マップ表示機能を提供し、さまざまなマップ サービス、レイヤー、レンダラー、シンボルなどをサポートしています。
   • バッファー分析、パス分析、空間クエリ、ヒート マップなどを含む、豊富なマップ分析ツールと視覚化コンポーネントを提供します。
   • 3.x バージョンは段階的に 4.x バージョンに置き換えられ、公式 Web サイトは徐々に 3.x のメンテナンスを終了します。
   • 今日のモジュール開発では、3.x は現在の開発モデルに適応できなくなりました。維持する古いプロジェクトがない場合、3.x を使用する必要はありません。したがって、ここでは 4.x バージョンに焦点を当てます。
2. ArcGIS Maps SDK for JavaScript 4.x バージョン:
   • バージョン 4.x は ArcGIS Maps SDK for JavaScript の最新バージョンであり、将来の主な開発方向でもあります。
   • バージョン 4.x では、アーキテクチャが再設計され、ES6 や TypeScript などの最新の Web テクノロジが使用され、モジュール型開発アプローチが採用されています。
   • 2D地図と3D地図をサポートし、より柔軟で高性能な地図表示機能を提供します。

ArcGIS Maps SDK for JavaScript 4.x の主な機能と機能

1. 地図表示機能：

   • さまざまなベースマップの読み込みをサポートし、マップのズーム、パン、回転のための対話型操作が可能です。
   • ベクター レイヤー、ラスター レイヤー、ダイナミック レイヤーなどを含む豊富なレイヤー タイプを提供します。
   • マップのシンボル化、ラベル、注釈をサポートします。

2. 地理空間分析機能:

   • バッファ解析、空間クエリ、ルート解析などの強力なジオプロセシングおよび解析機能を提供します。
   • ヒート マップ、クラスタリングなどの地理的特徴の視覚化とレンダリングをサポートします。

3. 3Dマップ機能：

   • 3D マップを作成および表示する機能を提供し、3D シーンの傾斜、回転、拡大縮小をサポートします。
   • 3D モデル、地下パイプ ネットワーク、点群などの 3D シーンへの追加をサポートします。

4. ユーザーインタラクションとナビゲーション機能:

   • ズーム コントロール、ナビゲーション ボタン、スケール バーなどのデフォルトのマップ ナビゲーション コントローラーを提供します。
   • マップクリックイベント、ドラッグアンドドロップなどのカスタムユーザーインタラクション機能をサポートします。

5. マップのスタイルと構成:

   • カスタム マップ スタイル、シンボル ライブラリ、カラー テーマをサポートします。
   • マップのデフォルトのビュー、初期範囲、座標系などは、構成ファイルを通じて設定できます。

6. 地図データとサービスの統合:

   • 地理データ形式 (GeoJSON、KML、Shapefile など) やサービス (ArcGIS Server サービス、WMS サービスなど) を含むさまざまなデータ ソースの読み込みをサポートします。
   • ArcGIS Online および ArcGIS Enterprise との統合をサポートし、豊富なマップおよびデータ リソースにアクセスします。

AMDモジュールとESモジュールの比較

ArcGIS Maps SDK for JavaScript 4.x では、AMD モジュールと ES モジュール (バージョン 4.17 以降でサポート) という 2 つのモジュールをロードする方法が提供されています。2 つのロード方法の長所と短所は次のとおりです。

1. AMD モジュール (非同期モジュール定義):

   • 長所: AMD は、JavaScript モジュールをロードするための非同期モジュール ロード メカニズムです。古いブラウザやレガシー システムでの使用に最適で、さまざまなブラウザと互換性があり、強力なクロスプラットフォーム互換性があります。
   • 短所: AMD の構文は比較的複雑なので、使用するのが難しく、モジュールをロードするには追加の AMD ローダー ライブラリも必要です。

2. ES モジュール (ECMAScript モジュール):

   • 長所: ES モジュールは JavaScript の公式モジュラー システムであり、そのシンプルさ、使いやすさ、静的分析で知られています。標準importとexport構文を使用してコードをより明確にし、保守しやすくすると同時に、async/awaitなどの最新の JavaScript 機能をサポートします。
   • 欠点: ES モジュールは古いブラウザでは完全にはサポートされていない可能性があり、互換性を確保するには適切な変換が必要です。

Vue3 では最新のブラウザと ES6 以降の機能を使用するため、ES モジュールを使用することをお勧めします。ES モジュールは、よりクリーンで読みやすい構文を持ち、Vue 3 の複合 API との互換性が高くなります。

Vue3 で ArcGIS Maps SDK for JavaScript を使用する手順

Vue 3 プロジェクトを作成する

1. 新しい ArcGISAPIProject フォルダーを作成し、vscode で開きます

npm create vite@latest2. ターミナルを開き、 「create vite project」と入力し、プロジェクト名を入力しvite-vue3-arcgis、vue フレームワークを選択して、JavaScript 音声作成プロジェクトを選択します。

3. 作成が成功したら、vite-vue3-arcgisフォルダーに入り、npm i依存関係をインストールするために使用します。

4. インストールが成功したら、npm run devプロジェクトを入力して実行し、基本フレームワークが正常であるかどうかを確認します。

ArcGIS Maps SDK for JavaScript をインストールする

ターミナルでnpm install @arcgis/core「install ArcGIS Maps SDK for JavaScript」と入力します。

マップコンポーネントを作成する

マップ コンポーネントを作成する前に、まずフレームワークによってデフォルトで提供されている App.vue 内のコンテンツを削除し、コンポーネント フォルダー内の HelloWorld.vue コンポーネントを削除します
。フォルダ。

2. ArcGisMap.vue コンポーネントのテンプレートに新しい div を作成し、id 属性をマップのコンテナーとして viewDiv に設定します。

3. 必要なマップ モジュールをインポートします。コンテナ内にマップを表示したい場合は、ArcGis が提供する Map モジュールと MapView モジュールをインポートする必要があります。

import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';

4. コード内で Map オブジェクトと MapView オブジェクトを作成し、関連パラメータを構成します

地図は div で表示されるため、コードは onMounted で実装する必要があります。コードは次のとおりです。

onMounted(()=>{
  initArcGisMap()
})

const initArcGisMap = () => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
}

このコードでは、最初にmapという名前のマップ オブジェクトを作成します。

• new Map()マップ インスタンスはを介し​​て作成されます。
• basemap: "topo-vector"マップが ArcGIS によって提供されるベース マップ (topo-vectorベクトル トポロジ マップ) を使用することを示します。次に、次の名前のマップ ビュー オブジェクト
  が作成されます。view
• new MapView()マップ ビュー インスタンスは、を介して作成されます。
• center: [-118.80500, 34.02700]経度と緯度の座標が設定される、マップ ビューの最初の中心点の位置を表します。
• zoom: 13マップ ビューの初期ズーム レベルを示し、値が大きいほどズーム レベルが近くなります。
• container: "viewDiv"マップ ビューがviewDivID を持つ HTML 要素にレンダリングされることを示します。
• map: mapマップ ビューが上で作成したオブジェクトをmapマップ インスタンスとして使用することを示します。

5.App.vueにマップコンポーネントをロードします。

<template>
  <ArcGisMap></ArcGisMap>
</template>

<script setup>  
import ArcGisMap from './components/ArcGisMap.vue'
</script>
<style scoped>
</style>

この時点でプログラムを実行すると、ブラウザーに空白が表示され、マップが読み込まれないことがわかります。これは、div に幅と高さを追加していないため、空白が表示されているためです。

視野の高さDiv

<style scoped>  
#viewDiv {
  width: 100%;
  height: 100vh; 
}
</style>

ブラウザを実行すると、マップがロードされたことがわかります。7

. ArcGIS に付属の UI コンポーネントをクリアします。
マップはロードされましたが、右側にスクロール バーがあることがわかりました。スクロール バーを下に引き下げます。一番下に移動します。以下にズームイン、ズームアウト、および ArcGIS 関連の情報があることがわかりました。これは、ArcGIS にデフォルトで付属している情報です。この情報は、設定を通じてクリア

できます。ビューのインスタンス化の後にこのコードを追加します。それをクリアします。view.ui.components = [];
view.ui.components = [];

const initArcGisMap = () => {
    
    
  const map = new Map({
    
    
    basemap: "topo-vector"
  });

  const view = new MapView({
    
    
    center: [-118.80500, 34.02700],
    zoom: 13,
    container: "viewDiv",
    map: map
  });
  view.ui.components = []; 
}

view.ui.components = []マップ ビューでデフォルトの UI コンポーネントを削除するために使用されます。

• view.uiマップビューを表すユーザーインターフェイスオブジェクト。
• components配列には表示用のデフォルトの UI コンポーネントが格納されます。空の配列に設定すると[]、デフォルトの UI コンポーネントが削除されます。

ブラウザを更新すると、現時点ではブラウザに全画面マップしかないことがわかります

。この時点で、ArcGIS マップは vue3 に読み込まれています。わかりました。まずここで終了しましょう。次のセクションで詳細を説明します。コードのこのセクションで使用されている Map および MapView のプロパティとメソッドを詳しく見てみましょう。