@trapar-waves/react-three-maplibre 1.1.8 → 1.1.10

package/README.md

@@ -54,20 +54,178 @@ npm -v
 
 ### Installation
 
-Run script
+1. Create a new project using the template:
 
 ```bash
 pnpm create trapar-waves
 ```
 
-Install dependencies
+2. Navigate to your project directory and install dependencies:
 
 ```bash
+cd your-project-name
+pnpm install
+# or
 npm install
+# or
 yarn install
-pnpm install
 ```
 
+### Development
+
+Start the development server with hot reloading:
+
+```bash
+pnpm dev
+# or
+npm run dev
+# or
+yarn dev
+```
+
+The application will be available at `http://localhost:3000` by default.
+
+### Building for Production
+
+To create a production build:
+
+```bash
+pnpm build
+# or
+npm run build
+# or
+yarn build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+# or
+npm run preview
+# or
+yarn preview
+```
+
+## 📦 Usage
+
+This library is designed to be used as a template for creating geospatial 3D visualization applications. It provides a foundational setup with React, Three.js, MapLibre GL, and AntV L7.
+
+### Basic Example
+
+Here's a simple example of how to use the components provided by this template:
+
+```tsx
+// App.tsx
+import type { ReactNode } from "react";
+import type { MapRef } from "react-map-gl/maplibre";
+import { PointLayer, Scene } from "@antv/l7";
+import { MapLibre } from "@antv/l7-maps";
+import { Box, Stats } from "@react-three/drei";
+import { extend } from "@react-three/fiber";
+import { useRef } from "react";
+import Map from "react-map-gl/maplibre";
+import { Canvas } from "react-three-map/maplibre";
+import { LineMaterial, LineSegments2, LineSegmentsGeometry } from "three-stdlib";
+
+extend({ LineSegmentsGeometry, LineMaterial, LineSegments2 });
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
+    lineMaterial: ThreeElements["material"] & Partial<LineMaterial>;
+    lineSegments2: ThreeElements["object3D"] & { children?: ReactNode };
+  }
+}
+
+const latLon = {
+  latitude: 31.215175,
+  longitude: 121.417463,
+};
+const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+
+function App() {
+  const ref = useRef<HTMLDivElement>(null!);
+  const mapRef = useRef<MapRef>(null!);
+  function initL7() {
+    if (mapRef.current) {
+      const scene = new Scene({
+        id: "map",
+        map: new MapLibre({
+          mapInstance: mapRef.current.getMap(),
+        }),
+      });
+      scene.on("loaded", () => {
+        fetch("/BElVQFEFvpAKzddxFZxJ.txt")
+          .then(res => res.text())
+          .then((data) => {
+            const pointLayer = new PointLayer({
+              blend: "additive",
+            })
+              .source(data, {
+                parser: {
+                  type: "csv",
+                  y: "lat",
+                  x: "lng",
+                },
+              })
+              .size(0.5)
+              .color("#080298");
+
+            scene.addLayer(pointLayer);
+          });
+      });
+    }
+  }
+  return (
+    <div className="h-screen w-screen relative overflow-hidden" ref={ref}>
+      <Map
+        id="map"
+        ref={mapRef}
+        initialViewState={{
+          ...latLon,
+          zoom: 11,
+          pitch: 64.88,
+        }}
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        onLoad={initL7}
+      >
+        <Stats className="stats" parent={ref} />
+
+        <Canvas {...latLon}>
+          <hemisphereLight
+            args={["#ffffff", "#60666C"]}
+            position={[1, 4.5, 3]}
+          />
+          <object3D scale={500}>
+            <Box position={[-1.2, 1, 0]} />
+            <Box position={[1.2, 1, 0]} />
+          </object3D>
+        </Canvas>
+      </Map>
+    </div>
+  );
+}
+
+export default App;
+```
+
+This example demonstrates:
+- Creating a MapLibre GL map with `react-map-gl`
+- Integrating AntV L7 for geospatial data visualization
+- Using React Three Fiber and Drei for 3D rendering
+- Positioning 3D objects relative to the map using `react-three-map`
+
+### Environment Variables
+
+To use map services like MapTiler, you'll need to set up environment variables. Create a `.env` file in your project root:
+
+```
+PUBLIC_MAPTILER_KEY=your_maptiler_api_key_here
+```
+
+Make sure to add `.env` to your `.gitignore` to keep your keys secure.
+
 ## 🤝 Contributing
 
 Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
@@ -78,6 +236,8 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+Please ensure your code follows the existing style and passes all tests.
+
 ## 👤 Author
 
 - **Rikka:** (admin@rikka.cc)

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@trapar-waves/react-three-maplibre",
   "type": "module",
-  "version": "1.1.8",
-  "packageManager": "pnpm@10.14.0",
+  "version": "1.1.10",
+  "packageManager": "pnpm@10.15.0",
   "description": "A React library integrating Three.js and MapLibre for 3D map visualization",
   "author": {
     "email": "admin@rikka.cc",
@@ -40,9 +40,9 @@
   "dependencies": {
     "@antv/l7": "^2.23.0",
     "@antv/l7-maps": "^2.23.0",
-    "@react-three/drei": "^10.7.3",
+    "@react-three/drei": "^10.7.4",
     "@react-three/fiber": "^9.3.0",
-    "maplibre-gl": "^5.6.2",
+    "maplibre-gl": "^5.7.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-map-gl": "^8.0.4",
@@ -52,16 +52,16 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.2.1",
-    "@eslint-react/eslint-plugin": "^1.52.5",
-    "@iconify/json": "^2.2.375",
+    "@eslint-react/eslint-plugin": "^1.52.9",
+    "@iconify/json": "^2.2.380",
     "@iconify/tailwind4": "^1.0.6",
-    "@rsbuild/core": "^1.4.15",
-    "@rsbuild/plugin-react": "^1.3.5",
+    "@rsbuild/core": "^1.5.2",
+    "@rsbuild/plugin-react": "^1.4.0",
     "@tailwindcss/postcss": "^4.1.12",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@types/three": "^0.179.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-plugin-format": "^1.0.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",

package/readme/README-CN.md

@@ -54,20 +54,178 @@ npm -v
 
 ### 安装步骤
 
-运行脚本
+1. 使用模板创建新项目：
 
 ```bash
 pnpm create trapar-waves
 ```
 
-安装依赖
+2. 进入项目目录并安装依赖：
 
 ```bash
+cd your-project-name
+pnpm install
+# or
 npm install
+# or
 yarn install
-pnpm install
 ```
 
+### 开发
+
+启动带热重载的开发服务器：
+
+```bash
+pnpm dev
+# or
+npm run dev
+# or
+yarn dev
+```
+
+默认情况下，应用程序将在 `http://localhost:3000` 可用。
+
+### 构建生产版本
+
+创建生产构建：
+
+```bash
+pnpm build
+# or
+npm run build
+# or
+yarn build
+```
+
+在本地预览生产构建：
+
+```bash
+pnpm preview
+# or
+npm run preview
+# or
+yarn preview
+```
+
+## 📦 使用方法
+
+该库被设计为用于创建地理空间3D可视化应用程序的模板。它提供了一个基础设置，包括 React、Three.js、MapLibre GL 和 AntV L7。
+
+### 基本示例
+
+以下是一个如何使用此模板提供的组件的简单示例：
+
+```tsx
+// App.tsx
+import type { ReactNode } from "react";
+import type { MapRef } from "react-map-gl/maplibre";
+import { PointLayer, Scene } from "@antv/l7";
+import { MapLibre } from "@antv/l7-maps";
+import { Box, Stats } from "@react-three/drei";
+import { extend } from "@react-three/fiber";
+import { useRef } from "react";
+import Map from "react-map-gl/maplibre";
+import { Canvas } from "react-three-map/maplibre";
+import { LineMaterial, LineSegments2, LineSegmentsGeometry } from "three-stdlib";
+
+extend({ LineSegmentsGeometry, LineMaterial, LineSegments2 });
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
+    lineMaterial: ThreeElements["material"] & Partial<LineMaterial>;
+    lineSegments2: ThreeElements["object3D"] & { children?: ReactNode };
+  }
+}
+
+const latLon = {
+  latitude: 31.215175,
+  longitude: 121.417463,
+};
+const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+
+function App() {
+  const ref = useRef<HTMLDivElement>(null!);
+  const mapRef = useRef<MapRef>(null!);
+  function initL7() {
+    if (mapRef.current) {
+      const scene = new Scene({
+        id: "map",
+        map: new MapLibre({
+          mapInstance: mapRef.current.getMap(),
+        }),
+      });
+      scene.on("loaded", () => {
+        fetch("/BElVQFEFvpAKzddxFZxJ.txt")
+          .then(res => res.text())
+          .then((data) => {
+            const pointLayer = new PointLayer({
+              blend: "additive",
+            })
+              .source(data, {
+                parser: {
+                  type: "csv",
+                  y: "lat",
+                  x: "lng",
+                },
+              })
+              .size(0.5)
+              .color("#080298");
+
+            scene.addLayer(pointLayer);
+          });
+      });
+    }
+  }
+  return (
+    <div className="h-screen w-screen relative overflow-hidden" ref={ref}>
+      <Map
+        id="map"
+        ref={mapRef}
+        initialViewState={{
+          ...latLon,
+          zoom: 11,
+          pitch: 64.88,
+        }}
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        onLoad={initL7}
+      >
+        <Stats className="stats" parent={ref} />
+
+        <Canvas {...latLon}>
+          <hemisphereLight
+            args={["#ffffff", "#60666C"]}
+            position={[1, 4.5, 3]}
+          />
+          <object3D scale={500}>
+            <Box position={[-1.2, 1, 0]} />
+            <Box position={[1.2, 1, 0]} />
+          </object3D>
+        </Canvas>
+      </Map>
+    </div>
+  );
+}
+
+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
+```
+
+确保将 `.env` 添加到 `.gitignore` 中以保证密钥安全。
+
 ## 🤝 贡献指南
 
 欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
@@ -78,6 +236,8 @@ pnpm install
 4. 推送到分支（`git push origin feature/amazing-feature`）
 5. 打开Pull Request
 
+请确保您的代码遵循现有风格并通过所有测试。
+
 ## 👤 Author
 
 - **Rikka:** (admin@rikka.cc)

package/readme/README-JP.md

@@ -54,20 +54,178 @@ npm -v
 
 ### インストール
 
-スクリプトの実行
+1. テンプレートを使用して新しいプロジェクトを作成します：
 
 ```bash
 pnpm create trapar-waves
 ```
 
-依存関係のインストール
+2. プロジェクトディレクトリに移動し、依存関係をインストールします：
 
 ```bash
+cd your-project-name
+pnpm install
+# or
 npm install
+# or
 yarn install
-pnpm install
 ```
 
+### 開発
+
+ホットリロード付きの開発サーバーを起動します：
+
+```bash
+pnpm dev
+# or
+npm run dev
+# or
+yarn dev
+```
+
+アプリケーションはデフォルトで `http://localhost:3000` で利用可能です。
+
+### 本番用ビルド
+
+本番用のビルドを作成します：
+
+```bash
+pnpm build
+# or
+npm run build
+# or
+yarn build
+```
+
+ローカルで本番ビルドをプレビューします：
+
+```bash
+pnpm preview
+# or
+npm run preview
+# or
+yarn preview
+```
+
+## 📦 使用方法
+
+このライブラリは、地理空間3D可視化アプリケーションを作成するためのテンプレートとして設計されています。React、Three.js、MapLibre GL、AntV L7を使用した基本的なセットアップを提供します。
+
+### 基本的な例
+
+このテンプレートが提供するコンポーネントの使用方法の簡単な例を以下に示します：
+
+```tsx
+// App.tsx
+import type { ReactNode } from "react";
+import type { MapRef } from "react-map-gl/maplibre";
+import { PointLayer, Scene } from "@antv/l7";
+import { MapLibre } from "@antv/l7-maps";
+import { Box, Stats } from "@react-three/drei";
+import { extend } from "@react-three/fiber";
+import { useRef } from "react";
+import Map from "react-map-gl/maplibre";
+import { Canvas } from "react-three-map/maplibre";
+import { LineMaterial, LineSegments2, LineSegmentsGeometry } from "three-stdlib";
+
+extend({ LineSegmentsGeometry, LineMaterial, LineSegments2 });
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
+    lineMaterial: ThreeElements["material"] & Partial<LineMaterial>;
+    lineSegments2: ThreeElements["object3D"] & { children?: ReactNode };
+  }
+}
+
+const latLon = {
+  latitude: 31.215175,
+  longitude: 121.417463,
+};
+const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+
+function App() {
+  const ref = useRef<HTMLDivElement>(null!);
+  const mapRef = useRef<MapRef>(null!);
+  function initL7() {
+    if (mapRef.current) {
+      const scene = new Scene({
+        id: "map",
+        map: new MapLibre({
+          mapInstance: mapRef.current.getMap(),
+        }),
+      });
+      scene.on("loaded", () => {
+        fetch("/BElVQFEFvpAKzddxFZxJ.txt")
+          .then(res => res.text())
+          .then((data) => {
+            const pointLayer = new PointLayer({
+              blend: "additive",
+            })
+              .source(data, {
+                parser: {
+                  type: "csv",
+                  y: "lat",
+                  x: "lng",
+                },
+              })
+              .size(0.5)
+              .color("#080298");
+
+            scene.addLayer(pointLayer);
+          });
+      });
+    }
+  }
+  return (
+    <div className="h-screen w-screen relative overflow-hidden" ref={ref}>
+      <Map
+        id="map"
+        ref={mapRef}
+        initialViewState={{
+          ...latLon,
+          zoom: 11,
+          pitch: 64.88,
+        }}
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        onLoad={initL7}
+      >
+        <Stats className="stats" parent={ref} />
+
+        <Canvas {...latLon}>
+          <hemisphereLight
+            args={["#ffffff", "#60666C"]}
+            position={[1, 4.5, 3]}
+          />
+          <object3D scale={500}>
+            <Box position={[-1.2, 1, 0]} />
+            <Box position={[1.2, 1, 0]} />
+          </object3D>
+        </Canvas>
+      </Map>
+    </div>
+  );
+}
+
+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
+```
+
+キーを安全に保つために、`.env` を `.gitignore` に追加してください。
+
 ## 🤝 コントリビューション
 
 貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
@@ -78,6 +236,8 @@ pnpm install
 4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
 5. Pull Requestを開く
 
+コードが既存のスタイルに従い、すべてのテストに合格することを確認してください。
+
 ## 👤 Author
 
 - **Rikka:** (admin@rikka.cc)

package/readme/README-RU.md

@@ -54,20 +54,178 @@ npm -v
 
 ### Установка
 
-Запустить скрипт
+1. Создайте новый проект с помощью шаблона:
 
 ```bash
 pnpm create trapar-waves
 ```
 
-Установить зависимости
+2. Перейдите в каталог вашего проекта и установите зависимости:
 
 ```bash
+cd your-project-name
+pnpm install
+# or
 npm install
+# or
 yarn install
-pnpm install
 ```
 
+### Разработка
+
+Запустите сервер разработки с горячей перезагрузкой:
+
+```bash
+pnpm dev
+# or
+npm run dev
+# or
+yarn dev
+```
+
+Приложение будет доступно по адресу `http://localhost:3000` по умолчанию.
+
+### Сборка для продакшена
+
+Чтобы создать сборку для продакшена:
+
+```bash
+pnpm build
+# or
+npm run build
+# or
+yarn build
+```
+
+Предварительный просмотр сборки продакшена локально:
+
+```bash
+pnpm preview
+# or
+npm run preview
+# or
+yarn preview
+```
+
+## 📦 Использование
+
+Эта библиотека предназначена для использования в качестве шаблона для создания приложений геопространственной 3D-визуализации. Она предоставляет фундаментальную настройку с React, Three.js, MapLibre GL и AntV L7.
+
+### Базовый пример
+
+Вот простой пример того, как использовать компоненты, предоставляемые этим шаблоном:
+
+```tsx
+// App.tsx
+import type { ReactNode } from "react";
+import type { MapRef } from "react-map-gl/maplibre";
+import { PointLayer, Scene } from "@antv/l7";
+import { MapLibre } from "@antv/l7-maps";
+import { Box, Stats } from "@react-three/drei";
+import { extend } from "@react-three/fiber";
+import { useRef } from "react";
+import Map from "react-map-gl/maplibre";
+import { Canvas } from "react-three-map/maplibre";
+import { LineMaterial, LineSegments2, LineSegmentsGeometry } from "three-stdlib";
+
+extend({ LineSegmentsGeometry, LineMaterial, LineSegments2 });
+
+declare module "@react-three/fiber" {
+  interface ThreeElements {
+    lineSegmentsGeometry: ThreeElements["bufferGeometry"];
+    lineMaterial: ThreeElements["material"] & Partial<LineMaterial>;
+    lineSegments2: ThreeElements["object3D"] & { children?: ReactNode };
+  }
+}
+
+const latLon = {
+  latitude: 31.215175,
+  longitude: 121.417463,
+};
+const MAPTILER_KEY = import.meta.env.PUBLIC_MAPTILER_KEY;
+
+function App() {
+  const ref = useRef<HTMLDivElement>(null!);
+  const mapRef = useRef<MapRef>(null!);
+  function initL7() {
+    if (mapRef.current) {
+      const scene = new Scene({
+        id: "map",
+        map: new MapLibre({
+          mapInstance: mapRef.current.getMap(),
+        }),
+      });
+      scene.on("loaded", () => {
+        fetch("/BElVQFEFvpAKzddxFZxJ.txt")
+          .then(res => res.text())
+          .then((data) => {
+            const pointLayer = new PointLayer({
+              blend: "additive",
+            })
+              .source(data, {
+                parser: {
+                  type: "csv",
+                  y: "lat",
+                  x: "lng",
+                },
+              })
+              .size(0.5)
+              .color("#080298");
+
+            scene.addLayer(pointLayer);
+          });
+      });
+    }
+  }
+  return (
+    <div className="h-screen w-screen relative overflow-hidden" ref={ref}>
+      <Map
+        id="map"
+        ref={mapRef}
+        initialViewState={{
+          ...latLon,
+          zoom: 11,
+          pitch: 64.88,
+        }}
+        mapStyle={`https://api.maptiler.com/maps/streets/style.json?key=${MAPTILER_KEY}`}
+        onLoad={initL7}
+      >
+        <Stats className="stats" parent={ref} />
+
+        <Canvas {...latLon}>
+          <hemisphereLight
+            args={["#ffffff", "#60666C"]}
+            position={[1, 4.5, 3]}
+          />
+          <object3D scale={500}>
+            <Box position={[-1.2, 1, 0]} />
+            <Box position={[1.2, 1, 0]} />
+          </object3D>
+        </Canvas>
+      </Map>
+    </div>
+  );
+}
+
+export default App;
+```
+
+Этот пример демонстрирует:
+- Создание карты MapLibre GL с помощью `react-map-gl`
+- Интеграция AntV L7 для визуализации геопространственных данных
+- Использование React Three Fiber и Drei для 3D-рендеринга
+- Позиционирование 3D-объектов относительно карты с помощью `react-three-map`
+
+### Переменные окружения
+
+Для использования сервисов карт, таких как MapTiler, вам нужно настроить переменные окружения. Создайте файл `.env` в корне вашего проекта:
+
+```
+PUBLIC_MAPTILER_KEY=your_maptiler_api_key_here
+```
+
+Обязательно добавьте `.env` в ваш `.gitignore`, чтобы ваши ключи оставались в безопасности.
+
 ## 🤝 Участие в разработке
 
 Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:
@@ -78,6 +236,8 @@ pnpm install
 4. Отправьте изменения в ветку (`git push origin feature/amazing-feature`)
 5. Откройте Pull Request
 
+Пожалуйста, убедитесь, что ваш код соответствует существующему стилю и проходит все тесты.
+
 ## 👤 Author
 
 - **Rikka:** (admin@rikka.cc)