@trapar-waves/react-three-maplibre 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/.vscode/settings.json +50 -0
  2. package/README.md +54 -71
  3. package/eslint.config.js +10 -2
  4. package/package.json +11 -7
  5. package/pnpm-workspace.yaml +1 -0
  6. package/readme/README-CN.md +60 -77
  7. package/readme/README-JP.md +57 -74
  8. package/readme/README-RU.md +59 -76
package/.vscode/settings.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ // Disable the default formatter, use eslint instead
3
+ "prettier.enable": false,
4
+ "editor.formatOnSave": false,
5
+
6
+ // Auto fix
7
+ "editor.codeActionsOnSave": {
8
+ "source.fixAll.eslint": "explicit",
9
+ "source.organizeImports": "never"
10
+ },
11
+
12
+ // Silent the stylistic rules in you IDE, but still auto fix them
13
+ "eslint.rules.customizations": [
14
+ { "rule": "style/*", "severity": "off", "fixable": true },
15
+ { "rule": "format/*", "severity": "off", "fixable": true },
16
+ { "rule": "*-indent", "severity": "off", "fixable": true },
17
+ { "rule": "*-spacing", "severity": "off", "fixable": true },
18
+ { "rule": "*-spaces", "severity": "off", "fixable": true },
19
+ { "rule": "*-order", "severity": "off", "fixable": true },
20
+ { "rule": "*-dangle", "severity": "off", "fixable": true },
21
+ { "rule": "*-newline", "severity": "off", "fixable": true },
22
+ { "rule": "*quotes", "severity": "off", "fixable": true },
23
+ { "rule": "*semi", "severity": "off", "fixable": true }
24
+ ],
25
+
26
+ // Enable eslint for all supported languages
27
+ "eslint.validate": [
28
+ "javascript",
29
+ "javascriptreact",
30
+ "typescript",
31
+ "typescriptreact",
32
+ "vue",
33
+ "html",
34
+ "markdown",
35
+ "json",
36
+ "jsonc",
37
+ "yaml",
38
+ "toml",
39
+ "xml",
40
+ "gql",
41
+ "graphql",
42
+ "astro",
43
+ "svelte",
44
+ "css",
45
+ "less",
46
+ "scss",
47
+ "pcss",
48
+ "postcss"
49
+ ]
50
+ }
package/README.md CHANGED
@@ -2,106 +2,89 @@
2
2
 
3
3
  ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
4
4
  ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
5
- ![License](https://img.shields.io/badge/license-MIT-green)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-three-maplibre)
6
6
  ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-three-maplibre/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
+
10
+ ---
11
+
12
+ [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
7
13
 
8
14
  > A React-based library integrating Three.js, MapLibre, and AntV for advanced geospatial 3D visualizations.
9
15
 
10
16
  ## ✨ Features
11
17
 
12
- * **Geospatial Visualization:** Combines `@antv/l7` and `maplibre-gl` for powerful geospatial data rendering with custom map layers.
13
- * **3D Rendering with React:** Leverages `@react-three/fiber` and `@react-three/drei` to integrate Three.js into a React-based workflow for declarative 3D scene management.
14
- * **Customizable UI Integration:** Offers seamless integration with React (`react`, `react-dom`) for building interactive geospatial applications.
15
- * **Utility-First Styling:** Employs `tailwindcss` for flexible and rapid styling of components and layouts.
16
- * **Type Safety:** Uses TypeScript to ensure type safety and improve developer experience during development.
17
- * **Fast Development Workflow:** Utilizes `rsbuild` for optimized builds and efficient development server performance.
18
- * **Rich Component Library:** Integrates with `three-stdlib` and `@react-three/drei` for reusable Three.js utilities and components.
19
- * **Map Interactivity:** Implements `react-map-gl` for interactive map controls and client-side navigation in geospatial contexts.
20
- * **AntV Enhancements:** Incorporates `@antv/l7-maps` for additional map layering capabilities and visualization tools.
18
+ - **Geospatial Visualization:** Combines `@antv/l7` and `maplibre-gl` for powerful geospatial data rendering with custom map layers.
19
+ - **3D Rendering with React:** Leverages `@react-three/fiber` and `@react-three/drei` to integrate Three.js into a React-based workflow for declarative 3D scene management.
20
+ - **Customizable UI Integration:** Offers seamless integration with React (`react`, `react-dom`) for building interactive geospatial applications.
21
+ - **Utility-First Styling:** Employs `tailwindcss` for flexible and rapid styling of components and layouts.
22
+ - **Type Safety:** Uses TypeScript to ensure type safety and improve developer experience during development.
23
+ - **Fast Development Workflow:** Utilizes `rsbuild` for optimized builds and efficient development server performance.
24
+ - **Rich Component Library:** Integrates with `three-stdlib` and `@react-three/drei` for reusable Three.js utilities and components.
25
+ - **Map Interactivity:** Implements `react-map-gl` for interactive map controls and client-side navigation in geospatial contexts.
26
+ - **AntV Enhancements:** Incorporates `@antv/l7-maps` for additional map layering capabilities and visualization tools.
21
27
 
22
- ## 🚀 Getting Started
28
+ ## 💻 Tech Stack
23
29
 
24
- Follow these instructions to get the project running locally.
30
+ - **Framework/Library:** React
31
+ - **UI Toolkit/Styling:** Tailwind CSS
32
+ - **3D Rendering:** Three.js (`@react-three/fiber`, `@react-three/drei`)
33
+ - **Geospatial Libraries:** MapLibre GL, AntV L7
34
+ - **Build Tool:** Rsbuild
35
+ - **Language:** TypeScript
25
36
 
26
- ### Prerequisites
37
+ See the [package.json](package.json) for a full list of dependencies.
27
38
 
28
- * Ensure you have the following installed:
29
- * Node.js (>= 18.x recommended)
30
- * Package manager (npm, yarn, or pnpm)
31
- ```bash
32
- node -v
33
- npm -v # or yarn -v or pnpm -v
34
- ```
39
+ ## 🚀 Getting Started
35
40
 
36
- ### Installation
41
+ Follow these instructions to get the project running locally.
37
42
 
38
- 1. Clone the repository:
39
- ```bash
40
- git clone https://github.com/Trapar-waves/react-three-maplibre.git
41
- cd react-three-maplibre
42
- ```
43
- 2. Install dependencies:
44
- ```bash
45
- # Use your preferred package manager
46
- npm install
47
- # or
48
- yarn install
49
- # or
50
- pnpm install
51
- ```
43
+ ### Prerequisites
52
44
 
53
- ## 🛠️ Usage
45
+ Ensure you have the following installed:
54
46
 
55
- Explain how to run and use the project after installation.
47
+ - Node.js (>= 18.x recommended)
48
+ - Package manager (npm, yarn, or pnpm)
56
49
 
57
- ### Available Scripts
50
+ ```bash
51
+ node -v
52
+ npm -v
53
+ ```
58
54
 
59
- Common scripts available via `npm run <script>`, `yarn <script>`, or `pnpm <script>`:
55
+ ### Installation
60
56
 
61
- * `dev`: Starts the development server with hot module replacement (HMR) using Rsbuild.
62
- * `build`: Creates a production-ready build of the project.
63
- * `preview`: Previews the production build locally.
57
+ Run script
64
58
 
65
- Example:
66
59
  ```bash
67
- # Start development server
68
- npm run dev
69
-
70
- # Create production build
71
- npm run build
72
-
73
- # Preview production build
74
- npm run preview
60
+ pnpm create trapar-waves
75
61
  ```
76
62
 
77
- ## 💻 Tech Stack
78
-
79
- Key technologies used in this project include:
63
+ Install dependencies
80
64
 
81
- * **Framework/Library:** React
82
- * **UI Toolkit/Styling:** Tailwind CSS
83
- * **3D Rendering:** Three.js (`@react-three/fiber`, `@react-three/drei`)
84
- * **Geospatial Libraries:** MapLibre GL, AntV L7
85
- * **Build Tool:** Rsbuild
86
- * **Language:** TypeScript
87
-
88
- See the [package.json](package.json) for a full list of dependencies.
65
+ ```bash
66
+ npm install
67
+ yarn install
68
+ pnpm install
69
+ ```
89
70
 
90
71
  ## 🤝 Contributing
91
72
 
92
- Contributions are welcome!
93
-
94
- ## 📄 License
73
+ Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
95
74
 
96
- Distributed under the **MIT** License. See `LICENSE` file for more information.
75
+ 1. Fork the repository
76
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
77
+ 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
78
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
79
+ 5. Open a Pull Request
97
80
 
98
81
  ## 👤 Author
99
82
 
100
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
101
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
83
+ - **Rikka:** (admin@rikka.cc)
84
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
102
85
 
103
86
  ## 🔗 Links
104
87
 
105
- * **Repository:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
106
- * **Homepage:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
107
- * **Issues:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
88
+ - **Repository:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
89
+ - **Homepage:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
90
+ - **Issues:** [https://github.com/react-three-maplibre/Trapar-waves/issues](https://github.com/react-three-maplibre/Trapar-waves/issues)
package/eslint.config.js CHANGED
@@ -1,8 +1,16 @@
1
1
  import antfu from "@antfu/eslint-config";
2
2
 
3
3
  export default antfu({
4
+ stylistic: {
5
+ quotes: "double",
6
+ semi: true,
7
+ },
8
+ markdown: true,
4
9
  jsonc: true,
5
- javascript: true,
10
+ typescript: true,
6
11
  yaml: true,
7
- stylistic: { indent: 2, quotes: "double", semi: true },
12
+ react: true,
13
+ formatters: {
14
+ markdown: "prettier",
15
+ },
8
16
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@trapar-waves/react-three-maplibre",
3
3
  "type": "module",
4
- "version": "1.0.10",
4
+ "version": "1.0.11",
5
5
  "description": "A React library integrating Three.js and MapLibre for 3D map visualization",
6
6
  "author": {
7
7
  "email": "admin@rikka.cc",
@@ -36,7 +36,7 @@
36
36
  "dependencies": {
37
37
  "@antv/l7": "^2.22.5",
38
38
  "@antv/l7-maps": "^2.22.5",
39
- "@react-three/drei": "^10.1.2",
39
+ "@react-three/drei": "^10.3.0",
40
40
  "@react-three/fiber": "^9.1.2",
41
41
  "maplibre-gl": "5.6.0",
42
42
  "react": "^19.1.0",
@@ -48,17 +48,21 @@
48
48
  },
49
49
  "devDependencies": {
50
50
  "@antfu/eslint-config": "^4.14.1",
51
- "@iconify/json": "^2.2.347",
51
+ "@eslint-react/eslint-plugin": "^1.52.2",
52
+ "@iconify/json": "^2.2.349",
52
53
  "@iconify/tailwind4": "^1.0.6",
53
54
  "@rsbuild/core": "^1.3.22",
54
55
  "@rsbuild/plugin-react": "^1.3.2",
55
- "@tailwindcss/postcss": "^4.1.8",
56
- "@types/react": "^19.1.6",
56
+ "@tailwindcss/postcss": "^4.1.10",
57
+ "@types/react": "^19.1.8",
57
58
  "@types/react-dom": "^19.1.6",
58
59
  "@types/three": "^0.177.0",
59
- "eslint": "^9.28.0",
60
+ "eslint": "^9.29.0",
61
+ "eslint-plugin-format": "^1.0.1",
62
+ "eslint-plugin-react-hooks": "^5.2.0",
63
+ "eslint-plugin-react-refresh": "^0.4.20",
60
64
  "mapbox-gl": "^3.12.0",
61
- "tailwindcss": "^4.1.8",
65
+ "tailwindcss": "^4.1.10",
62
66
  "typescript": "^5.8.3"
63
67
  }
64
68
  }
package/pnpm-workspace.yaml CHANGED
@@ -1,2 +1,3 @@
1
1
  onlyBuiltDependencies:
2
+ - "@tailwindcss/oxide"
2
3
  - core-js
package/readme/README-CN.md CHANGED
@@ -1,107 +1,90 @@
1
1
  # @trapar-waves/react-three-maplibre
2
2
 
3
- ![npm月下载量](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
4
- ![npm版本](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
5
- ![许可证](https://img.shields.io/badge/license-MIT-green)
6
- ![GitHub最近一次提交](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
3
+ ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
4
+ ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-three-maplibre)
6
+ ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-three-maplibre/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > 一个基于React的库，整合了Three.js、MapLibre和AntV，用于高级的地理空间3D可视化。
10
+ ---
9
11
 
10
- ## ✨ 核心特性
12
+ [English](../README.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
11
13
 
12
- * **强大的地理空间数据可视化：** 借助`@antv/l7`和`maplibre-gl`，通过自定义地图图层实现高效且灵活的地理空间数据渲染。
13
- * **在React中实现3D渲染：** 借助`@react-three/fiber`和`@react-three/drei`，将Three.js无缝集成到React工作流中，支持声明式的3D场景管理，简化开发流程。
14
- * **灵活的UI集成：** 提供与React生态（`react`、`react-dom`）的无缝对接，方便构建交互式地理空间应用。
15
- * **实用至上的样式设计：** 使用`tailwindcss`快速实现组件和布局的灵活样式设计，提升开发效率。
16
- * **类型安全保障：** 基于TypeScript开发，提供类型安全支持，提升开发体验。
17
- * **高效开发流程：** 使用`rsbuild`优化构建过程，显著提升开发服务器性能，助力快速迭代。
18
- * **丰富的Three.js组件库：** 集成`three-stdlib`和`@react-three/drei`，提供大量可复用的Three.js工具和组件，降低开发复杂度。
19
- * **交互式地图功能：** 借助`react-map-gl`，提供强大的地图交互能力，支持地理空间环境中的导航与操作。
20
- * **AntV扩展功能：** 集成`@antv/l7-maps`，进一步增强地图分层能力，提供更多可视化选项。
14
+ > 一个基于React的库，集成了Three.js、MapLibre和AntV，用于高级地理空间3D可视化。
21
15
 
22
- ## 🚀 快速入门
16
+ ## ✨ 特性
23
17
 
24
- 按照以下步骤在本地运行项目。
18
+ - **地理空间可视化:** 结合`@antv/l7`和`maplibre-gl`，通过自定义地图图层实现强大的地理空间数据渲染。
19
+ - **React 3D渲染:** 利用`@react-three/fiber`和`@react-three/drei`将Three.js集成到基于React的工作流中，实现声明式3D场景管理。
20
+ - **可定制UI集成:** 提供与React（`react`、`react-dom`）的无缝集成，用于构建交互式地理空间应用。
21
+ - **实用优先的样式:** 采用`tailwindcss`为组件和布局提供灵活快速的样式设计。
22
+ - **类型安全:** 使用TypeScript确保类型安全，提升开发过程中的开发者体验。
23
+ - **快速开发工作流:** 利用`rsbuild`实现优化构建和高效的开发服务器性能。
24
+ - **丰富的组件库:** 与`three-stdlib`和`@react-three/drei`集成，提供可重用的Three.js工具和组件。
25
+ - **地图交互性:** 实现`react-map-gl`，用于地理空间环境中的交互式地图控制和客户端导航。
26
+ - **AntV增强功能:** 整合`@antv/l7-maps`，提供额外的地图分层功能和可视化工具。
25
27
 
26
- ### 环境要求
27
-
28
- * 确保已安装以下工具：
29
- * Node.js（推荐版本 >= 18.x）
30
- * 包管理器（npm、yarn 或 pnpm）
31
- ```bash
32
- node -v
33
- npm -v # 或 yarn -v 或 pnpm -v
34
- ```
28
+ ## 💻 技术栈
35
29
 
36
- ### 安装步骤
30
+ - **框架/库:** React
31
+ - **UI工具包/样式:** Tailwind CSS
32
+ - **3D渲染:** Three.js（`@react-three/fiber`、`@react-three/drei`）
33
+ - **地理空间库:** MapLibre GL、AntV L7
34
+ - **构建工具:** Rsbuild
35
+ - **语言:** TypeScript
37
36
 
38
- 1. 克隆代码仓库：
39
- ```bash
40
- git clone https://github.com/Trapar-waves/react-three-maplibre.git
41
- cd react-three-maplibre
42
- ```
43
- 2. 安装依赖：
44
- ```bash
45
- # 使用您偏好的包管理器
46
- npm install
47
- # 或
48
- yarn install
49
- # 或
50
- pnpm install
51
- ```
37
+ 完整依赖列表参见[package.json](package.json)。
52
38
 
53
- ## 🛠️ 使用说明
39
+ ## 🚀 开始使用
54
40
 
55
- 安装完成后，您可以按照以下方式运行和使用项目。
41
+ 按照以下说明在本地运行项目。
56
42
 
57
- ### 常用命令
43
+ ### 前提条件
58
44
 
59
- 通过`npm run <命令>`、`yarn <命令>`或`pnpm <命令>`运行以下脚本：
45
+ 确保已安装以下软件：
60
46
 
61
- * `dev`：使用Rsbuild启动开发服务器，并支持热模块替换（HMR）。
62
- * `build`：生成项目的生产版本。
63
- * `preview`：在本地预览生产版本。
47
+ - Node.js (推荐 >= 18.x 版本)
48
+ - 包管理器 (npm, yarn 或 pnpm)
64
49
 
65
- 示例：
66
50
  ```bash
67
- # 启动开发服务器
68
- npm run dev
69
-
70
- # 生成生产版本
71
- npm run build
72
-
73
- # 预览生产版本
74
- npm run preview
51
+ node -v
52
+ npm -v
75
53
  ```
76
54
 
77
- ## 💻 技术栈
55
+ ### 安装步骤
78
56
 
79
- 项目中使用的核心技术包括：
57
+ 运行脚本
80
58
 
81
- * **框架/库：** React
82
- * **样式工具：** Tailwind CSS
83
- * **3D渲染：** Three.js（`@react-three/fiber`、`@react-three/drei`）
84
- * **地理空间支持：** MapLibre GL、AntV L7
85
- * **构建工具：** Rsbuild
86
- * **编程语言：** TypeScript
59
+ ```bash
60
+ pnpm create trapar-waves
61
+ ```
87
62
 
88
- 更多信息请查看[package.json](package.json)文件，以获取完整的依赖项列表。
63
+ 安装依赖
89
64
 
90
- ## 🤝 贡献指南
65
+ ```bash
66
+ npm install
67
+ yarn install
68
+ pnpm install
69
+ ```
91
70
 
92
- 欢迎任何形式的贡献！如果您有任何改进建议或发现问题，请随时提交Pull Request或Issue。
71
+ ## 🤝 贡献指南
93
72
 
94
- ## 📄 许可证
73
+ 欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
95
74
 
96
- 本项目基于**MIT**许可证发布。更多信息请参阅`LICENSE`文件。
75
+ 1. Fork 本仓库
76
+ 2. 创建功能分支（`git checkout -b feature/amazing-feature`）
77
+ 3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
78
+ 4. 推送到分支（`git push origin feature/amazing-feature`）
79
+ 5. 打开Pull Request
97
80
 
98
- ## 👤 作者
81
+ ## 👤 Author
99
82
 
100
- * **Rikka**（[admin@rikka.cc](mailto:admin@rikka.cc)）
101
- * GitHub：[@Muromi-Rikka](https://github.com/Muromi-Rikka)
83
+ - **Rikka:** (admin@rikka.cc)
84
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
102
85
 
103
- ## 🔗 相关链接
86
+ ## 🔗 Links
104
87
 
105
- * **项目仓库：** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
106
- * **项目主页：** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
107
- * **问题反馈：** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
88
+ - **仓库:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
89
+ - **主页:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
90
+ - **问题:** [https://github.com/react-three-maplibre/Trapar-waves/issues](https://github.com/react-three-maplibre/Trapar-waves/issues)
package/readme/README-JP.md CHANGED
@@ -2,106 +2,89 @@
2
2
 
3
3
  ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
4
4
  ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
5
- ![License](https://img.shields.io/badge/license-MIT-green)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-three-maplibre)
6
6
  ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-three-maplibre/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > Reactベースのライブラリで、Three.js、MapLibre、AntVを統合し、高度な地理空間3Dビジュアライゼーションを実現します。
10
+ ---
9
11
 
10
- ## ✨ 主な特徴
12
+ [English](../README.md) | [中文](/readme/README-CN.md) | [Русский язык](/readme/README-RU.md)
11
13
 
12
- * **地理空間ビジュアライゼーション:** `@antv/l7`と`maplibre-gl`を組み合わせ、カスタムマップレイヤーを用いて地理空間データの強力なレンダリングが可能です。
13
- * **Reactによる3Dレンダリング:** `@react-three/fiber`と`@react-three/drei`を活用し、Three.jsをReactベースのワークフローに統合。これにより、宣言的な3Dシーンの管理が容易になります。
14
- * **柔軟なUI統合:** Reactおよび`react-dom`とスムーズに統合でき、インタラクティブな地理空間アプリケーションを簡単に構築できます。
15
- * **効率的なスタイリング:** `tailwindcss`を使用して、コンポーネントやレイアウトを柔軟かつ迅速にスタイリングできます。
16
- * **型安全な開発:** TypeScriptを採用し、開発時の型安全性を確保し、開発者体験を向上させます。
17
- * **効率的な開発フロー:** `rsbuild`を利用して、高速なビルドプロセスと効率的な開発サーバーの動作を実現します。
18
- * **豊富な3Dコンポーネント:** `three-stdlib`と`@react-three/drei`を統合し、再利用可能なThree.jsのユーティリティやコンポーネントを提供します。
19
- * **インタラクティブなマップ操作:** `react-map-gl`を採用し、地理空間データを扱う文脈でインタラクティブなマップ操作やクライアント側ナビゲーションを可能にします。
20
- * **AntVの高度な機能:** `@antv/l7-maps`を活用し、追加のマップレイヤーやビジュアライゼーションツールを提供します。
14
+ > Three.js、MapLibre、AntVを統合したReactベースのライブラリで、高度な地理空間3D可視化を実現します。
21
15
 
22
- ## 🚀 始め方
23
-
24
- プロジェクトをローカルで実行する手順を以下に示します。
16
+ ## ✨ 特徴
25
17
 
26
- ### 前提条件
18
+ - **地理空間可視化:** `@antv/l7`と`maplibre-gl`を組み合わせ、カスタムマップレイヤーを使用した強力な地理空間データレンダリングを実現します。
19
+ - **Reactによる3Dレンダリング:** `@react-three/fiber`と`@react-three/drei`を活用し、Three.jsをReactベースのワークフローに統合し、宣言型3Dシーン管理を実現します。
20
+ - **カスタマイズ可能なUI統合:** React（`react`、`react-dom`）とのシームレスな統合を提供し、インタラクティブな地理空間アプリケーションを構築します。
21
+ - **ユーティリティファーストのスタイリング:** `tailwindcss`を採用し、コンポーネントとレイアウトの柔軟で迅速なスタイリングを実現します。
22
+ - **型安全性:** TypeScriptを使用して型安全性を確保し、開発中の開発者エクスペリエンスを向上させます。
23
+ - **高速開発ワークフロー:** `rsbuild`を活用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
24
+ - **充実したコンポーネントライブラリ:** `three-stdlib`および`@react-three/drei`と統合し、再利用可能なThree.jsユーティリティとコンポーネントを提供します。
25
+ - **マップインタラクティビティ:** `react-map-gl`を実装し、地理空間コンテキストにおけるインタラクティブなマップコントロールとクライアント側ナビゲーションを提供します。
26
+ - **AntV拡張機能:** `@antv/l7-maps`を組み込み、追加のマップレイヤリング機能と可視化ツールを提供します。
27
27
 
28
- * 以下のソフトウェアがインストールされていることを確認してください:
29
- * Node.js (>= 18.x 推奨)
30
- * パッケージマネージャ (npm、yarn、または pnpm)
31
- ```bash
32
- node -v
33
- npm -v # または yarn -v または pnpm -v
34
- ```
28
+ ## 💻 技術スタック
35
29
 
36
- ### インストール手順
30
+ - **フレームワーク/ライブラリ:** React
31
+ - **UIツールキット/スタイリング:** Tailwind CSS
32
+ - **3Dレンダリング:** Three.js（`@react-three/fiber`、`@react-three/drei`）
33
+ - **地理空間ライブラリ:** MapLibre GL、AntV L7
34
+ - **ビルドツール:** Rsbuild
35
+ - **言語:** TypeScript
37
36
 
38
- 1. リポジトリをクローンします:
39
- ```bash
40
- git clone https://github.com/Trapar-waves/react-three-maplibre.git
41
- cd react-three-maplibre
42
- ```
43
- 2. 依存関係をインストールします:
44
- ```bash
45
- # お好みのパッケージマネージャを使用してください
46
- npm install
47
- # または
48
- yarn install
49
- # または
50
- pnpm install
51
- ```
37
+ 依存関係の完全なリストについては[package.json](package.json)を参照してください。
52
38
 
53
- ## 🛠️ 使用方法
39
+ ## 🚀 始め方
54
40
 
55
- インストール後のプロジェクトの実行および利用方法を説明します。
41
+ 以下の手順に従ってプロジェクトをローカルで実行してください。
56
42
 
57
- ### 使用可能なスクリプト
43
+ ### 前提条件
58
44
 
59
- 以下のコマンドは、`npm run <script>`、`yarn <script>`、または`pnpm <script>`で実行できます。
45
+ 以下がインストールされていることを確認してください：
60
46
 
61
- * `dev`: Rsbuildを使用して、ホットモジュール置換（HMR）付きの開発サーバーを起動します。
62
- * `build`: プロジェクトのプロダクション用ビルドを生成します。
63
- * `preview`: 生成されたプロダクションビルドをローカルでプレビューします。
47
+ - Node.js (推奨バージョン >= 18.x)
48
+ - パッケージマネージャー (npm, yarn または pnpm)
64
49
 
65
- 例:
66
50
  ```bash
67
- # 開発サーバーを起動
68
- npm run dev
69
-
70
- # プロダクションビルドを生成
71
- npm run build
72
-
73
- # プロダクションビルドをプレビュー
74
- npm run preview
51
+ node -v
52
+ npm -v
75
53
  ```
76
54
 
77
- ## 💻 使用技術
55
+ ### インストール
78
56
 
79
- このプロジェクトで使用されている主要な技術スタックは以下の通りです:
57
+ スクリプトの実行
80
58
 
81
- * **フレームワーク/ライブラリ:** React
82
- * **UIスタイリング:** Tailwind CSS
83
- * **3Dレンダリング:** Three.js (`@react-three/fiber`, `@react-three/drei`)
84
- * **地理空間ライブラリ:** MapLibre GL, AntV L7
85
- * **ビルドツール:** Rsbuild
86
- * **言語:** TypeScript
59
+ ```bash
60
+ pnpm create trapar-waves
61
+ ```
87
62
 
88
- 依存関係の詳細は[package.json](package.json)をご覧ください。
63
+ 依存関係のインストール
89
64
 
90
- ## 🤝 貢献について
65
+ ```bash
66
+ npm install
67
+ yarn install
68
+ pnpm install
69
+ ```
91
70
 
92
- このプロジェクトへの貢献を歓迎します。詳細は[リポジトリ](https://github.com/Trapar-waves/react-three-maplibre)をご覧ください。
71
+ ## 🤝 コントリビューション
93
72
 
94
- ## 📄 ライセンス
73
+ 貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
95
74
 
96
- **MIT**ライセンスの下で配布されます。詳細は`LICENSE`ファイルをご覧ください。
75
+ 1. リポジトリをフォークする
76
+ 2. 機能ブランチを作成する（`git checkout -b feature/amazing-feature`）
77
+ 3. 変更をコミットする（`git commit -m 'Add some amazing feature'`）
78
+ 4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
79
+ 5. Pull Requestを開く
97
80
 
98
- ## 👤 作者
81
+ ## 👤 Author
99
82
 
100
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
101
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
83
+ - **Rikka:** (admin@rikka.cc)
84
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
102
85
 
103
- ## 🔗 関連リンク
86
+ ## 🔗 Links
104
87
 
105
- * **リポジトリ:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
106
- * **ホームページ:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
107
- * **問題報告:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
88
+ - **リポジトリ:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
89
+ - **ホームページ:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
90
+ - **イシュー:** [https://github.com/react-three-maplibre/Trapar-waves/issues](https://github.com/react-three-maplibre/Trapar-waves/issues)
package/readme/README-RU.md CHANGED
@@ -1,107 +1,90 @@
1
1
  # @trapar-waves/react-three-maplibre
2
2
 
3
- ![версия npm](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
3
+ ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-three-maplibre)
4
4
  ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-three-maplibre)
5
- ![Лицензия](https://img.shields.io/badge/license-MIT-green)
6
- ![Последний коммит на GitHub](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-three-maplibre)
6
+ ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-three-maplibre)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-three-maplibre/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > Библиотека на базе React, объединяющая Three.js, MapLibre и AntV для создания передовых 3D-визуализаций географических данных.
10
+ ---
9
11
 
10
- ## ✨ Основные возможности
12
+ [English](../README.md) | [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md)
11
13
 
12
- * **Географическая визуализация:** Эффективно сочетает `@antv/l7` и `maplibre-gl`, обеспечивая мощный рендеринг геоданных через настраиваемые слои карт.
13
- * **3D-рендеринг с React:** Использует `@react-three/fiber` и `@react-three/drei`, позволяя интегрировать Three.js в рабочий процесс React для декларативного управления 3D-сценами.
14
- * **Плавная интеграция с пользовательским интерфейсом:** Обеспечивает удобную совместимость с React (`react`, `react-dom`) для создания интерактивных географических приложений.
15
- * **Гибкие стили:** Использует `tailwindcss` для быстрого и гибкого стилизирования компонентов и макетов.
16
- * **Безопасность типов:** Основана на TypeScript, что гарантирует точность типов и повышает удобство разработки.
17
- * **Оптимизированный рабочий процесс:** Воспользуется `rsbuild` для быстрой сборки проекта и высокой производительности сервера разработки.
18
- * **Разнообразные компоненты:** Интегрирует `three-stdlib` и `@react-three/drei`, предоставляя богатую библиотеку инструментов и готовых компонентов для Three.js.
19
- * **Интерактивные карты:** Поддерживает `react-map-gl` для удобного управления картами и клиентской навигации в географических приложениях.
20
- * **Дополнительные инструменты AntV:** Включает `@antv/l7-maps` для расширенных возможностей слоев карт и визуализации данных.
14
+ > Библиотека на базе React, интегрирующая Three.js, MapLibre и AntV для расширенной геопространственной 3D-визуализации.
21
15
 
22
- ## 🚀 Начало работы
23
-
24
- Чтобы запустить проект локально, следуйте этим инструкциям.
16
+ ## ✨ Особенности
25
17
 
26
- ### Предварительные требования
18
+ - **Геопространственная визуализация:** Комбинирует `@antv/l7` и `maplibre-gl` для мощного рендеринга геопространственных данных с пользовательскими слоями карт.
19
+ - **3D-рендеринг с React:** Использует `@react-three/fiber` и `@react-three/drei` для интеграции Three.js в рабочий процесс на базе React для декларативного управления 3D-сценами.
20
+ - **Интеграция настраиваемого UI:** Обеспечивает бесперебойную интеграцию с React (`react`, `react-dom`) для создания интерактивных геопространственных приложений.
21
+ - **Стилизация с упором на утилиты:** Применяет `tailwindcss` для гибкой и быстрой стилизации компонентов и макетов.
22
+ - **Типовая безопасность:** Использует TypeScript для обеспечения типовой безопасности и улучшения опыта разработчика во время разработки.
23
+ - **Быстрый рабочий процесс разработки:** Использует `rsbuild` для оптимизированных сборок и эффективной производительности сервера разработки.
24
+ - **Богатая библиотека компонентов:** Интегрируется с `three-stdlib` и `@react-three/drei` для переиспользуемых утилит и компонентов Three.js.
25
+ - **Интерактивность карт:** Реализует `react-map-gl` для интерактивных элементов управления картами и навигации на клиентской стороне в геопространственных контекстах.
26
+ - **Дополнения AntV:** Включает `@antv/l7-maps` для дополнительных возможностей слоев карт и инструментов визуализации.
27
27
 
28
- * Убедитесь, что у вас установлено следующее:
29
- * Node.js (рекомендуется версия >= 18.x)
30
- * Менеджер пакетов (npm, yarn или pnpm)
31
- ```bash
32
- node -v
33
- npm -v # или yarn -v или pnpm -v
34
- ```
28
+ ## 💻 Технологический стек
35
29
 
36
- ### Установка
30
+ - **Фреймворк/Библиотека:** React
31
+ - **UI-тулкит/Стилизация:** Tailwind CSS
32
+ - **3D-рендеринг:** Three.js (`@react-three/fiber`, `@react-three/drei`)
33
+ - **Геопространственные библиотеки:** MapLibre GL, AntV L7
34
+ - **Инструмент сборки:** Rsbuild
35
+ - **Язык:** TypeScript
37
36
 
38
- 1. Клонируйте репозиторий:
39
- ```bash
40
- git clone https://github.com/Trapar-waves/react-three-maplibre.git
41
- cd react-three-maplibre
42
- ```
43
- 2. Установите зависимости:
44
- ```bash
45
- # Выберите предпочитаемый менеджер пакетов
46
- npm install
47
- # или
48
- yarn install
49
- # или
50
- pnpm install
51
- ```
37
+ Полный список зависимостей см. в [package.json](package.json).
52
38
 
53
- ## 🛠️ Использование
39
+ ## 🚀 Начало работы
54
40
 
55
- После установки вы можете запустить проект следующим образом.
41
+ Следуйте этим инструкциям, чтобы запустить проект локально.
56
42
 
57
- ### Доступные команды
43
+ ### Предварительные требования
58
44
 
59
- Вот список команд, доступных через `npm run <команда>`, `yarn <команда>` или `pnpm <команда>`:
45
+ Убедитесь, что у вас установлены следующие компоненты:
60
46
 
61
- * `dev`: Запускает сервер разработки с поддержкой горячей замены модулей (HMR) с использованием Rsbuild.
62
- * `build`: Создает оптимизированную сборку для продакшена.
63
- * `preview`: Позволяет локально просмотреть продакшен-сборку.
47
+ - Node.js (рекомендуется версия >= 18.x)
48
+ - Пакетный менеджер (npm, yarn или pnpm)
64
49
 
65
- Пример:
66
50
  ```bash
67
- # Запуск сервера разработки
68
- npm run dev
69
-
70
- # Создание продакшен-сборки
71
- npm run build
72
-
73
- # Предварительный просмотр продакшен-сборки
74
- npm run preview
51
+ node -v
52
+ npm -v
75
53
  ```
76
54
 
77
- ## 💻 Технологический стек
55
+ ### Установка
78
56
 
79
- Основные технологии, используемые в проекте:
57
+ Запустить скрипт
80
58
 
81
- * **Фреймворк/Библиотека:** React
82
- * **Инструменты UI/Стилизация:** Tailwind CSS
83
- * **3D-рендеринг:** Three.js (`@react-three/fiber`, `@react-three/drei`)
84
- * **Географические библиотеки:** MapLibre GL, AntV L7
85
- * **Инструмент сборки:** Rsbuild
86
- * **Язык программирования:** TypeScript
59
+ ```bash
60
+ pnpm create trapar-waves
61
+ ```
87
62
 
88
- Для полного списка зависимостей обратитесь к файлу [package.json](package.json).
63
+ Установить зависимости
89
64
 
90
- ## 🤝 Вклад
65
+ ```bash
66
+ npm install
67
+ yarn install
68
+ pnpm install
69
+ ```
91
70
 
92
- Мы приветствуем любые вклады! Если у вас есть идеи или вы нашли ошибку, создайте issue или отправьте pull request.
71
+ ## 🤝 Участие в разработке
93
72
 
94
- ## 📄 Лицензия
73
+ Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:
95
74
 
96
- Проект распространяется под лицензией **MIT**. Подробности смотрите в файле `LICENSE`.
75
+ 1. Сделайте форк репозитория
76
+ 2. Создайте ветку с функцией (`git checkout -b feature/amazing-feature`)
77
+ 3. Зафиксируйте свои изменения (`git commit -m 'Add some amazing feature'`)
78
+ 4. Отправьте изменения в ветку (`git push origin feature/amazing-feature`)
79
+ 5. Откройте Pull Request
97
80
 
98
- ## 👤 Автор
81
+ ## 👤 Author
99
82
 
100
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
101
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
83
+ - **Rikka:** (admin@rikka.cc)
84
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
102
85
 
103
- ## 🔗 Ссылки
86
+ ## 🔗 Links
104
87
 
105
- * **Репозиторий:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
106
- * **Домашняя страница:** [https://github.com/Trapar-waves/react-three-maplibre](https://github.com/Trapar-waves/react-three-maplibre)
107
- * **Проблемы:** [https://github.com/Trapar-waves/react-three-maplibre/issues](https://github.com/Trapar-waves/react-three-maplibre/issues)
88
+ - **Репозиторий:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
89
+ - **Домашняя страница:** [https://github.com/react-three-maplibre/Trapar-waves](https://github.com/react-three-maplibre/Trapar-waves)
90
+ - **Проблемы:** [https://github.com/react-three-maplibre/Trapar-waves/issues](https://github.com/react-three-maplibre/Trapar-waves/issues)