SuperMapが提供する開発パッケージを利用する際に多くの問題に直面したため、ここにメモとして記録します。

一、Vue 3.xプロジェクトの作成（Vue CLI/WebPackを使用）

1. CMDコマンドプロンプトまたはVSCodeターミナルを開き、Vue 3.xプロジェクトを作成

（ここでは直接コマンドを使用して新しいフォルダを作成しています。Windowsシステムでは右クリックで新しいフォルダを作成できますが、コマンドを使用する必要はありません）

mkdir vue_map_project

新しいvueプロジェクトを作成（後でデフォルト設定を維持するか、必要に応じてプロジェクトを設定できます。ここでは面倒なのでスクリーンショットは省略します）

vue create map_demo

フォルダ内にcdしてください

cd map_demo

二、プロジェクトに必要な依存関係のインストール（モジュール化されたiClientの導入）

1.SuperMap iClient for Leafletとbabel-pluginのインストール

npm install @supermap/iclient-leaflet

npm install @supermap/babel-plugin-import -D

node_modulesフォルダにbabel-plugin-import、iclient-common、iclient-leafletが見つかり、ターミナルにERRエラーがない場合は、インストールが成功したことを示します。

（この時点で、ElementPlus、Axios、Echartsなどの必要な他のコンポーネントも一緒にインストールできます）

2.Leafletのインストール

このステップは非常に重要です。公式ドキュメントではleafletのCSSスタイルをCDN経由で導入していますが、プロジェクトを完全にローカル化したいので、leafletをプロジェクトにインストールする必要があります。この方法では、index.htmlでファイルを導入する必要はありません。

npm install leaflet

三、.babelrcまたはbabel.config.jsでの設定

Vueのバージョンの問題により、ここではbabel.config.jsで設定を行います（ここでESlintエラーが発生する可能性がありますが、続けてください）

1.ルートディレクトリのbabel.config.jsファイルを見つける

module.exports = {
  "presets": [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    ["@supermap/babel-plugin-import",
      {
        "libraryName": "@supermap/iclient-leaflet"
      }
    ]
  ]

}

2.package.jsonの修正

ファイルのこの位置に赤枠内の内容を追加（追加しなくても現在のプロジェクトの実行に影響はありませんが、追加するとエラーが乱雑に見えなくなります）

四、main.jsでの依存関係のインポート

import { createApp } from 'vue'
import App from './App.vue'

// SuperMapをインポート
import '@supermap/iclient-leaflet'
// Leafletをインポート
import 'leaflet/dist/leaflet.css'

createApp(App).mount('#app')

五、地図の初期化

ここでは簡単のために、HelloWorld.vueをクリアして整理し、直接地図の基盤を配置するコンポーネントとして使用します。

六、効果の表示

詳細については、公式ドキュメントを参照してください：iClient for Leaflet 開発ガイド (supermap.io)