@trapar-waves/react-three-maplibre 1.1.23 → 2.0.0

package/readme/README-CN.md

@@ -9,107 +9,78 @@
 
 ---
 
-[English](../README.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
+[English](../README.md) | [日本語](./README-JP.md) | [Русский язык](./README-RU.md)
 
-> 一个基于React的库，集成了Three.js、MapLibre和AntV，用于高级地理空间3D可视化。
+> 一个基于 React 的库，集成了 Three.js、MapLibre 和 AntV，用于高级地理空间 3D 可视化。
 
-## ✨ 特性
+![react-three-maplibre hero](../assets/readme/hero.svg)
 
-- **地理空间可视化:** 结合`@antv/l7`和`maplibre-gl`，通过自定义地图图层实现强大的地理空间数据渲染。
-- **React 3D渲染:** 利用`@react-three/fiber`和`@react-three/drei`将Three.js集成到基于React的工作流中，实现声明式3D场景管理。
-- **可定制UI集成:** 提供与React（`react`、`react-dom`）的无缝集成，用于构建交互式地理空间应用。
-- **实用优先的样式:** 采用`tailwindcss`为组件和布局提供灵活快速的样式设计。
-- **类型安全:** 使用TypeScript确保类型安全，提升开发过程中的开发者体验。
-- **快速开发工作流:** 利用`rsbuild`实现优化构建和高效的开发服务器性能。
-- **丰富的组件库:** 与`three-stdlib`和`@react-three/drei`集成，提供可重用的Three.js工具和组件。
-- **地图交互性:** 实现`react-map-gl`，用于地理空间环境中的交互式地图控制和客户端导航。
-- **AntV增强功能:** 整合`@antv/l7-maps`，提供额外的地图分层功能和可视化工具。
+![Features](../assets/readme/headers/features.svg)
 
-## 💻 技术栈
+- **地理空间可视化：** 结合 `@antv/l7` 和 `maplibre-gl`，通过自定义地图图层实现强大的地理空间数据渲染。
+- **React 3D 渲染：** 利用 `@react-three/fiber` 和 `@react-three/drei` 将 Three.js 集成到基于 React 的工作流中，实现声明式 3D 场景管理。
+- **可定制 UI 集成：** 提供与 React（`react`、`react-dom`）的无缝集成，用于构建交互式地理空间应用。
+- **实用优先的样式：** 采用 `tailwindcss` 为组件和布局提供灵活快速的样式设计。
+- **类型安全：** 使用 TypeScript 确保类型安全，提升开发过程中的开发者体验。
+- **快速开发工作流：** 利用 `rsbuild` 实现优化构建和高效的开发服务器性能。
+- **丰富的组件库：** 与 `three-stdlib` 和 `@react-three/drei` 集成，提供可重用的 Three.js 工具和组件。
+- **地图交互性：** 实现 `react-map-gl`，用于地理空间环境中的交互式地图控制和客户端导航。
+- **AntV 增强功能：** 整合 `@antv/l7-maps`，提供额外的地图分层功能和可视化工具。
 
-- **框架/库:** React
-- **UI工具包/样式:** Tailwind CSS
-- **3D渲染:** Three.js（`@react-three/fiber`、`@react-three/drei`）
-- **地理空间库:** MapLibre GL、AntV L7
-- **构建工具:** Rsbuild
-- **语言:** TypeScript
+![Tech Stack](../assets/readme/headers/tech-stack.svg)
 
-完整依赖列表参见[package.json](package.json)。
+- **框架/库：** `React`
+- **UI 工具包/样式：** `Tailwind CSS`
+- **3D 渲染：** `Three.js`（`@react-three/fiber`、`@react-three/drei`）
+- **地理空间库：** `MapLibre GL`、`AntV L7`
+- **构建工具：** `Rsbuild`
+- **语言：** `TypeScript`
 
-## 🚀 开始使用
+查看 [package.json](../package.json) 获取完整的依赖列表。
 
-按照以下说明在本地运行项目。
+![Getting Started](../assets/readme/headers/getting-started.svg)
 
-### 前提条件
+## 前置条件
 
-确保已安装以下软件：
+- Node.js（推荐 >= 18.x）
+- 包管理器（npm、yarn 或 pnpm）
 
-- Node.js (推荐 >= 18.x 版本)
-- 包管理器 (npm, yarn 或 pnpm)
-
-```bash
-node -v
-npm -v
-```
-
-### 安装步骤
+### 安装
 
 1. 使用模板创建新项目：
 
-```bash
-pnpm create trapar-waves
-```
+   ```bash
+   pnpm create trapar-waves
+   ```
 
-2. 进入项目目录并安装依赖：
+2. 导航到项目目录并安装依赖：
 
-```bash
-cd your-project-name
-pnpm install
-# or
-npm install
-# or
-yarn install
-```
-
-### 开发
-
-启动带热重载的开发服务器：
-
-```bash
-pnpm dev
-# or
-npm run dev
-# or
-yarn dev
-```
+   ```bash
+   pnpm install
+   ```
 
-默认情况下，应用程序将在 `http://localhost:3000` 可用。
+3. 启动开发服务器：
 
-### 构建生产版本
+   ```bash
+   pnpm dev
+   ```
 
-创建生产构建：
+![Project Structure](../assets/readme/headers/project-structure.svg)
 
-```bash
-pnpm build
-# or
-npm run build
-# or
-yarn build
 ```
-
-在本地预览生产构建：
-
-```bash
-pnpm preview
-# or
-npm run preview
-# or
-yarn preview
+├── public/             # 静态资源
+├── src/                # 源代码
+│   ├── App.tsx         # 主应用组件
+│   └── index.tsx       # 入口点
+├── rsbuild.config.ts   # Rsbuild 配置
+├── tsconfig.json       # TypeScript 配置
+├── eslint.config.js    # ESLint 配置
+└── package.json        # 项目依赖和脚本
 ```
 
-## 📦 使用方法
+![Usage](../assets/readme/headers/usage.svg)
 
-该库被设计为用于创建地理空间3D可视化应用程序的模板。它提供了一个基础设置，包括 React、Three.js、MapLibre GL 和 AntV L7。
+该库被设计为用于创建地理空间 3D 可视化应用程序的模板。它提供了一个基础设置，包括 React、Three.js、MapLibre GL 和 AntV L7。
 
 ### 基本示例
 
@@ -142,7 +113,8 @@ const latLon = {
   latitude: 31.215175,
   longitude: 121.417463,
 };
-const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+const MAP_STYLE_URL
+  = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 
 function App() {
   const ref = useRef<HTMLDivElement>(null!);
@@ -187,7 +159,7 @@ function App() {
           zoom: 11,
           pitch: 64.88,
         }}
-        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        mapStyle={MAP_STYLE_URL}
         onLoad={initL7}
       >
         <Stats className="stats" parent={ref} />
@@ -211,40 +183,36 @@ export default App;
 ```
 
 这个示例演示了：
+
 - 使用 `react-map-gl` 创建 MapLibre GL 地图
 - 集成 AntV L7 进行地理空间数据可视化
 - 使用 React Three Fiber 和 Drei 进行 3D 渲染
 - 使用 `react-three-map` 将 3D 对象相对于地图进行定位
 
-### 环境变量
-
-要使用 MapTiler 等地图服务，您需要设置环境变量。在项目根目录创建一个 `.env` 文件：
+### 地图底图
 
-```
-PUBLIC_MAPTILER_KEY=your_maptiler_api_key_here
-```
+模板默认使用无需 API Key 的 Carto GL 样式（见 `src/App.tsx` 中的 `MAP_STYLE_URL`）。若改用 MapTiler 等需鉴权的服务，请自行设置 `mapStyle` 并通过 `.env` / CI 密钥管理凭据。
 
-确保将 `.env` 添加到 `.gitignore` 中以保证密钥安全。
+![Contributing](../assets/readme/headers/contributing.svg)
 
-## 🤝 贡献指南
+欢迎贡献，非常感谢！请按照以下步骤贡献：
 
-欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
-
-1. Fork 本仓库
-2. 创建功能分支（`git checkout -b feature/amazing-feature`）
-3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
+1. Fork 仓库
+2. 创建特性分支（`git checkout -b feature/amazing-feature`）
+3. 提交更改（`git commit -m 'Add some amazing feature'`）
 4. 推送到分支（`git push origin feature/amazing-feature`）
-5. 打开Pull Request
+5. 创建 Pull Request
+
+![License](../assets/readme/headers/license.svg)
 
-请确保您的代码遵循现有风格并通过所有测试。
+MIT License © 2025 Trapar Waves
 
-## 👤 Author
+## 👤 作者
 
-- **Rikka:** (admin@rikka.cc)
-- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
+- **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
+- **GitHub 主页：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
 
-## 🔗 Links
+## 🔗 链接
 
-- **仓库:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
-- **主页:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
-- **问题:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
+- **仓库：** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
+- **Issues：** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)

package/readme/README-JP.md

@@ -9,107 +9,78 @@
 
 ---
 
-[English](../README.md) | [中文](/readme/README-CN.md) | [Русский язык](/readme/README-RU.md)
+[English](../README.md) | [中文](./README-CN.md) | [Русский язык](./README-RU.md)
 
-> Three.js、MapLibre、AntVを統合したReactベースのライブラリで、高度な地理空間3D可視化を実現します。
+> Three.js、MapLibre、AntV を統合した React ベースのライブラリで、高度な地理空間 3D 可視化を実現します。
 
-## ✨ 特徴
+![react-three-maplibre hero](../assets/readme/hero.svg)
 
-- **地理空間可視化:** `@antv/l7`と`maplibre-gl`を組み合わせ、カスタムマップレイヤーを使用した強力な地理空間データレンダリングを実現します。
-- **Reactによる3Dレンダリング:** `@react-three/fiber`と`@react-three/drei`を活用し、Three.jsをReactベースのワークフローに統合し、宣言型3Dシーン管理を実現します。
-- **カスタマイズ可能なUI統合:** React（`react`、`react-dom`）とのシームレスな統合を提供し、インタラクティブな地理空間アプリケーションを構築します。
-- **ユーティリティファーストのスタイリング:** `tailwindcss`を採用し、コンポーネントとレイアウトの柔軟で迅速なスタイリングを実現します。
-- **型安全性:** TypeScriptを使用して型安全性を確保し、開発中の開発者エクスペリエンスを向上させます。
-- **高速開発ワークフロー:** `rsbuild`を活用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
-- **充実したコンポーネントライブラリ:** `three-stdlib`および`@react-three/drei`と統合し、再利用可能なThree.jsユーティリティとコンポーネントを提供します。
-- **マップインタラクティビティ:** `react-map-gl`を実装し、地理空間コンテキストにおけるインタラクティブなマップコントロールとクライアント側ナビゲーションを提供します。
-- **AntV拡張機能:** `@antv/l7-maps`を組み込み、追加のマップレイヤリング機能と可視化ツールを提供します。
+![Features](../assets/readme/headers/features.svg)
 
-## 💻 技術スタック
+- **地理空間可視化：** `@antv/l7` と `maplibre-gl` を組み合わせ、カスタムマップレイヤーを使用した強力な地理空間データレンダリングを実現します。
+- **React による 3D レンダリング：** `@react-three/fiber` と `@react-three/drei` を活用し、Three.js を React ベースのワークフローに統合し、宣言型 3D シーン管理を実現します。
+- **カスタマイズ可能な UI 統合：** React（`react`、`react-dom`）とのシームレスな統合を提供し、インタラクティブな地理空間アプリケーションを構築します。
+- **ユーティリティファーストのスタイリング：** `tailwindcss` を採用し、コンポーネントとレイアウトの柔軟で迅速なスタイリングを実現します。
+- **型安全性：** TypeScript を使用して型安全性を確保し、開発中の開発者エクスペリエンスを向上させます。
+- **高速開発ワークフロー：** `rsbuild` を活用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
+- **充実したコンポーネントライブラリ：** `three-stdlib` および `@react-three/drei` と統合し、再利用可能な Three.js ユーティリティとコンポーネントを提供します。
+- **マップインタラクティビティ：** `react-map-gl` を実装し、地理空間コンテキストにおけるインタラクティブなマップコントロールとクライアント側ナビゲーションを提供します。
+- **AntV 拡張機能：** `@antv/l7-maps` を組み込み、追加のマップレイヤリング機能と可視化ツールを提供します。
 
-- **フレームワーク/ライブラリ:** React
-- **UIツールキット/スタイリング:** Tailwind CSS
-- **3Dレンダリング:** Three.js（`@react-three/fiber`、`@react-three/drei`）
-- **地理空間ライブラリ:** MapLibre GL、AntV L7
-- **ビルドツール:** Rsbuild
-- **言語:** TypeScript
+![Tech Stack](../assets/readme/headers/tech-stack.svg)
 
-依存関係の完全なリストについては[package.json](package.json)を参照してください。
+- **フレームワーク/ライブラリ：** `React`
+- **UI ツールキット/スタイリング：** `Tailwind CSS`
+- **3D レンダリング：** `Three.js`（`@react-three/fiber`、`@react-three/drei`）
+- **地理空間ライブラリ：** `MapLibre GL`、`AntV L7`
+- **ビルドツール：** `Rsbuild`
+- **言語：** `TypeScript`
 
-## 🚀 始め方
+依存関係の完全なリストについては [package.json](../package.json) を参照してください。
 
-以下の手順に従ってプロジェクトをローカルで実行してください。
+![Getting Started](../assets/readme/headers/getting-started.svg)
 
-### 前提条件
+## 前提条件
 
-以下がインストールされていることを確認してください：
-
-- Node.js (推奨バージョン >= 18.x)
-- パッケージマネージャー (npm, yarn または pnpm)
-
-```bash
-node -v
-npm -v
-```
+- Node.js（>= 18.x 推奨）
+- パッケージマネージャー（npm、yarn、または pnpm）
 
 ### インストール
 
-1. テンプレートを使用して新しいプロジェクトを作成します：
-
-```bash
-pnpm create trapar-waves
-```
-
-2. プロジェクトディレクトリに移動し、依存関係をインストールします：
+1. テンプレートを使用して新しいプロジェクトを作成：
 
-```bash
-cd your-project-name
-pnpm install
-# or
-npm install
-# or
-yarn install
-```
+   ```bash
+   pnpm create trapar-waves
+   ```
 
-### 開発
+2. プロジェクトディレクトリに移動し、依存関係をインストール：
 
-ホットリロード付きの開発サーバーを起動します：
+   ```bash
+   pnpm install
+   ```
 
-```bash
-pnpm dev
-# or
-npm run dev
-# or
-yarn dev
-```
+3. 開発サーバーを起動：
 
-アプリケーションはデフォルトで `http://localhost:3000` で利用可能です。
+   ```bash
+   pnpm dev
+   ```
 
-### 本番用ビルド
+![Project Structure](../assets/readme/headers/project-structure.svg)
 
-本番用のビルドを作成します：
-
-```bash
-pnpm build
-# or
-npm run build
-# or
-yarn build
 ```
-
-ローカルで本番ビルドをプレビューします：
-
-```bash
-pnpm preview
-# or
-npm run preview
-# or
-yarn preview
+├── public/             # 静的アセット
+├── src/                # ソースコード
+│   ├── App.tsx         # メインアプリケーションコンポーネント
+│   └── index.tsx       # エントリーポイント
+├── rsbuild.config.ts   # Rsbuild 設定
+├── tsconfig.json       # TypeScript 設定
+├── eslint.config.js    # ESLint 設定
+└── package.json        # プロジェクトの依存関係とスクリプト
 ```
 
-## 📦 使用方法
+![Usage](../assets/readme/headers/usage.svg)
 
-このライブラリは、地理空間3D可視化アプリケーションを作成するためのテンプレートとして設計されています。React、Three.js、MapLibre GL、AntV L7を使用した基本的なセットアップを提供します。
+このライブラリは、地理空間 3D 可視化アプリケーションを作成するためのテンプレートとして設計されています。React、Three.js、MapLibre GL、AntV L7 を使用した基本的なセットアップを提供します。
 
 ### 基本的な例
 
@@ -142,7 +113,8 @@ const latLon = {
   latitude: 31.215175,
   longitude: 121.417463,
 };
-const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+const MAP_STYLE_URL
+  = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
 
 function App() {
   const ref = useRef<HTMLDivElement>(null!);
@@ -187,7 +159,7 @@ function App() {
           zoom: 11,
           pitch: 64.88,
         }}
-        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        mapStyle={MAP_STYLE_URL}
         onLoad={initL7}
       >
         <Stats className="stats" parent={ref} />
@@ -211,40 +183,36 @@ export default App;
 ```
 
 この例では以下を示しています：
+
 - `react-map-gl` を使用して MapLibre GL マップを作成する
 - 地理空間データの可視化のために AntV L7 を統合する
 - 3D レンダリングのために React Three Fiber と Drei を使用する
 - `react-three-map` を使用して 3D オブジェクトをマップに対して配置する
 
-### 環境変数
+### 地図のベースマップ
 
-MapTiler などのマップサービスを使用するには、環境変数を設定する必要があります。プロジェクトのルートに `.env` ファイルを作成します：
-
-```
-PUBLIC_MAPTILER_KEY=your_maptiler_api_key_here
-```
+テンプレートは API キー不要の Carto GL スタイル（`src/App.tsx` の `MAP_STYLE_URL`）を既定とします。MapTiler など別プロバイダへ切り替える場合は `mapStyle` を変更し、`.env` / CI で鍵を管理してください。
 
-キーを安全に保つために、`.env` を `.gitignore` に追加してください。
+![Contributing](../assets/readme/headers/contributing.svg)
 
-## 🤝 コントリビューション
+コントリビュートを歓迎します！以下の手順に従ってコントリビュートしてください：
 
-貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
+1. リポジトリをフォーク
+2. 機能ブランチを作成（`git checkout -b feature/amazing-feature`）
+3. 変更をコミット（`git commit -m 'Add some amazing feature'`）
+4. ブランチにプッシュ（`git push origin feature/amazing-feature`）
+5. Pull Request を作成
 
-1. リポジトリをフォークする
-2. 機能ブランチを作成する（`git checkout -b feature/amazing-feature`）
-3. 変更をコミットする（`git commit -m 'Add some amazing feature'`）
-4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
-5. Pull Requestを開く
+![License](../assets/readme/headers/license.svg)
 
-コードが既存のスタイルに従い、すべてのテストに合格することを確認してください。
+MIT License © 2025 Trapar Waves
 
-## 👤 Author
+## 👤 作者
 
-- **Rikka:** (admin@rikka.cc)
-- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
+- **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
+- **GitHub プロフィール：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
 
-## 🔗 Links
+## 🔗 リンク
 
-- **リポジトリ:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
-- **ホームページ:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
-- **イシュー:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
+- **リポジトリ：** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
+- **Issues：** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)