eoxelements MCP：地図やグラフコンポーネントを統合し、地理空間アプリを迅速に構築するWebツール

Eoxelements

EOxElementsはEOXによって開発されたWebコンポーネントのセットで、地理空間ユーザーインターフェイス要素に特化しており、地図、グラフ、描画ツール、レイヤー制御、時間制御、フォームレンダリング、検索フィルターなどの様々なコンポーネントが含まれ、地理空間アプリケーションを構築するために使用されます。

位置情報サービス開発者ツール #地理空間UI #Webコンポーネント #地図ツール #フロントエンド開発 .JavaScript

スコア : 2.5ポイント

ダウンロード数 : 4.7K

更新時間 : 2025-12-29

サイトを開く

EOxElementsとは？

EOxElementsは、地理空間アプリケーション向けに特別に設計されたオープンソースのWeb Componentsコンポーネントライブラリです。インタラクティブな地図、データグラフ、地理検索、描画ツールなど、一連の再利用可能なUIコンポーネントを提供しており、開発者は簡単なHTMLタグまたはJavaScriptのインポート方法を通じて、自分たちのWebアプリケーションにすばやく統合することができます。

EOxElementsの使い方は？

EOxElementsは、2つの主要な使用方法を提供しています。1) npmパッケージマネージャーを使用してインストールし、ViteやWebpackなどの現代的なビルドツールを使ってインポートする方法；2) CDNを通じて直接scriptタグでインポートする方法。すべてのコンポーネントは標準的なWeb Componentsであり、Web Componentsをサポートするすべての現代的なブラウザで使用することができます。

適用シナリオ

EOxElementsは、以下のタイプのアプリケーションの構築に非常に適しています。地理情報システム(GIS)アプリケーション、衛星画像ビューワー、環境モニタリングダッシュボード、地図データの可視化、空間データ分析ツール、位置サービスアプリケーションなど、地理空間機能を必要とするWebアプリケーションです。

主要機能

インタラクティブな地図コンポーネント

強力な機能を備えた地図コンポーネントを提供し、複数のレイヤータイプ（タイル、ベクトル、画像）、地図コントロール、インタラクション操作およびイベント処理をサポートします。

動的なデータグラフ

データ取得と可視化機能が組み込まれたグラフコンポーネントで、複数のグラフタイプをサポートし、指定されたURLから自動的にデータを取得してレンダリングすることができます。

地図描画ツール

ユーザーが地図上に点、線、多角形などの幾何学的な図形を描画することを許可し、図形の編集、削除および管理機能を提供します。

地理検索

自動補完機能を備えた地理位置検索入力ボックスで、複数の地理コーディングサービスプロバイダーをサポートします。

JSONフォーム生成器

JSON Schemaに基づいて動的にフォームインターフェイスを生成し、検証とカスタムスタイルをサポートします。

時間制御

地図レイヤーに時間軸制御と再生機能を提供し、時系列データの可視化に適しています。

ストーリーテリングツール

Markdownベースのインタラクティブなストーリーテリングコンポーネントで、地図、グラフおよびテキストコンテンツを組み合わせて物語体験を作成することができます。

UIレイアウトシステム

柔軟なUIレイアウトコンポーネントを提供し、開発者がレスポンシブなアプリケーションインターフェイス構造をすばやく作成するのを支援します。

利点

Web標準に基づいている：ネイティブのWeb Components技術を使用しており、フレームワークに依存する必要がなく、互換性が良好です。

モジュール化設計：各コンポーネントは独立してリリースされており、必要に応じて導入することができ、アプリケーションのサイズを削減します。

型安全：完全なTypeScript型定義を提供し、開発効率を向上させます。

詳細なドキュメント：各コンポーネントには完全なAPIドキュメントとインタラクティブなサンプルが用意されています。

活発なメンテナンス：プロジェクトは継続的に更新されており、安定したリリースプロセスとバージョン管理が行われています。

十分なテスト：コンポーネントテストとエンドツーエンドテストが含まれており、コードの品質が保証されます。

制限

学習曲線：Web Componentsの基本概念と使用方法を理解する必要があります。

ブラウザ互換性：一部の古いブラウザでは、polyfillのサポートが必要になる場合があります。

スタイルのカスタマイズ：深いレベルでのスタイルカスタマイズには、Shadow DOMのスタイル透過技術を理解する必要があります。

エコシステム：ReactやVueなどのフレームワークと比較すると、Web Componentsのサードパーティライブラリは少ないです。

使い方

インストール方法を選択する

プロジェクトの要件に応じて、適切なインストール方法を選択します。npmパッケージマネージャーを使用するか、CDNを通じて直接インポートします。

コンポーネントをインポートする

JavaScriptファイルで必要なコンポーネントをインポートするか、HTMLでscriptタグを使用してインポートします。

HTMLで使用する

HTMLテンプレートで対応するカスタム要素タグを使用し、属性を通じてコンポーネントを構成します。

コンポーネントの属性を構成する

HTML属性またはJavaScriptの属性/メソッドを通じて、コンポーネントの動作と外観を構成します。

イベントを処理する

コンポーネントが発行するイベントを監視し、インタラクションロジックを実装します。

使用例

インタラクティブな地図アプリケーションを作成する

eox - mapコンポーネントを使用して、複数のレイヤーとコントロールを含む地図アプリケーションを作成し、ユーザーが地理データを閲覧できるようにします。

データ可視化ダッシュボード

eox - chartとeox - mapコンポーネントを組み合わせてデータ可視化ダッシュボードを作成し、地理データと分析グラフを表示します。

地理検索と描画ツール

eox - geosearchとeox - drawtoolsを使用して、ユーザーが位置を検索し、地図上に描画できるツールを作成します。

時系列データビューワー

eox - timecontrolコンポーネントを使用して時系列データビューワーを作成し、ユーザーが時間で地図レイヤーを閲覧できるようにします。

よくある質問

EOxElementsはどのブラウザをサポートしていますか？

コンポーネントのスタイルをどのようにカスタマイズできますか？

EOxElementsはReact/Vue/Angularと一緒に使用できますか？

コンポーネントの状態マーク（⭕️ Alpha、🟡 Beta、✅ Stable）は何を意味しますか？

EOxElementsにコードを貢献するにはどうすればいいですか？

EOxElements v1とv2の違いは何ですか？

🚀 EOxElements

EOXによって作成された、地理空間UIエレメントのWebコンポーネントコレクションです。

🚀 クイックスタート

このEOxElementsは、地理空間UIエレメントのWebコンポーネントコレクションです。以下に、使い方や開発に必要な情報をまとめています。

📚 ドキュメント

こちらで説明、APIドキュメント、インタラクティブなサンプルを見ることができます。

✨ 主な機能

エレメントの状態

⭕️ Alpha エレメントは開発中で、頻繁に破壊的な変更が加えられる可能性があります。
🟡 Beta エレメントはほぼ完成しており、使用可能ですが、まだ破壊的な変更がある可能性があります。
✅ Stable エレメントはレビューされ、ドキュメント化され、APIが完成しています。

エレメント一覧

エレメント	説明	ドキュメントとサンプル	バージョン	状態
eox-chart	データ取得機能付きの動的なチャート	ドキュメントとサンプル	CHANGELOG	✅
eox-drawtools	地図上での図形の描画と管理	ドキュメントとサンプル	CHANGELOG	✅
eox-feedback	簡単なフィードバックウィジェット	ドキュメントとサンプル	CHANGELOG	✅
eox-geosearch	地理的な場所の自動補完検索入力	ドキュメントとサンプル	CHANGELOG	✅
eox-itemfilter	クライアント側またはサーバー側での大量のアイテムのフィルタリング/検索	ドキュメントとサンプル	CHANGELOG	✅
eox-jsonform	JSONスキーマからフォームをレンダリング	ドキュメントとサンプル	CHANGELOG	✅
eox-layercontrol	地図レイヤーの管理と変更	ドキュメントとサンプル	CHANGELOG	✅
eox-layout	簡単にUIレイアウトを作成	ドキュメントとサンプル	CHANGELOG	✅
eox-map	強力なツールとヘルパー付きの地図	ドキュメントとサンプル	CHANGELOG	✅
eox-stacinfo	STACファイルのプロパティを表示	ドキュメントとサンプル	CHANGELOG	✅
eox-storytelling	Markdownベースのストーリーテリングツール	ドキュメントとサンプル	CHANGELOG	✅
eox-timecontrol	地図レイヤーの時間制御と再生	ドキュメントとサンプル	CHANGELOG	✅

📦 インストール

バンドラー（Vite、Webpackなど）

npm install @eox/<element>

import "@eox/<element>"
<eox-element></eox-element>

スクリプトタグ

<eox-element></eox-element>

<script type="module">
import "@eox/<element>" from "https://cdn.skypack.dev/@eox/<element>"
</script>

🔧 技術詳細

ブランチ命名規則

この記事に触発されています。ブランチ名は <element>/<changetype>/<name> としてください。

main
map/feature/new-feature
map/fix/some-fix
chart/feature/new-feature
chart/fix/some-fix
[...]

初期セットアップ

npmワークスペースとすべてのエレメントを適切に使用するには、Node.js >= 20.9.0 LTS を使用してください。すべてのルートとエレメントの依存関係をインストールします。

npm install

一般的には、個々のエレメントフォルダではなく、ルートレベルからすべてのアクションを実行することをお勧めします。たとえば、エレメントをビルドする場合は、次のコマンドを使用します。

npm run build -w @eox/<element-name>

詳細については、npmワークスペースのドキュメントを参照してください。

開発サーバー

Storybook開発サーバーを起動するには、次のコマンドを使用します。

npm start

これにより、localhost（ポート6006）でStorybookサーバーが開き、複数のエレメント状態を開発に使用することができます。エレメントの複数の状態を作成して作業するには、対応するエレメントの *.stories.js ファイルを編集します。

型生成

すべての型出力を生成するには、次のコマンドを使用します。

npm run types:generate:all

テストサーバー

CypressテストGUIを使用して個々のテストを実行することができます。これは、コンポーネントテストを通じて各エレメントの一連の構成にアクセスでき、複数のエレメントを組み合わせたE2Eテストも提供します。

コンポーネントテスト

npm run cypress
--> コンポーネントテストを選択
--> ブラウザを選択
--> スペックを選択

E2Eテスト

エンドツーエンド（E2E）テストでは、エレメントのバンドルされたバージョンを使用します。特定のエレメントのE2Eテストを実行できるようにするには、まずそのエレメントを build または watch（変更のたびに再ビルド）コマンドを使用してビルドする必要があります。

npm run watch -w <element>

すべてのエレメントをビルド/監視するには、次のコマンドを使用できます。

npm run watch:all

選択したエレメントがビルドされたら、Cypress GUIで対応するテストを実行できます。

npm run cypress
--> E2Eテストを選択
--> ブラウザを選択
--> スペックを選択

自動化テストの実行

自動化テスト（コンポーネントテストとE2Eテスト）は、mainブランチへの各PRでトリガーされるGitHubアクションによって実行されます。ローカルでトリガーするには、次のコマンドを実行します。

npm run test:all // コンポーネントテストとE2Eテスト
npm run test:component // コンポーネントテストのみ
npm run test:e2e // E2Eテストのみ

上記のように、E2Eテストを実行する前にすべてのコンポーネントをビルド/監視することを忘れないでください。

便利なコマンド

すべてのエレメントをフォーマットします。

npm run format:all

すべてのエレメントをリント/修正します。

npm run lint:all
npm run lint:fix:all

型チェックを行います。

npm run types:generate:all
npm run typecheck

VS Codeを使用していて、インテリセンス機能がCLIの型チェックと異なるエラーを表示する場合は、次の設定を行うことができます。

"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,

何かが正常に動作しない場合は、時には全体のセットアップをクリーンアップし、すべてのノードモジュールを削除してから最初から始めると役立ちます。

npm run clean
--> すべてのnode_moduleフォルダを削除
npm install

新しいエレメントのブートストラップ

基本的には、に新しいサブフォルダを作成するだけです。さらに、preview.js（Storybookへのすべてのエレメントのインポートを一元管理する場所）とrelease-please-config.json（リリース自動化のため）に対応するエントリを追加することをお勧めします。その他の推奨事項は次のとおりです。