@wenle_2523097/agri-map 1.0.7 → 1.0.9
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.
- package/README.md +57 -12
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -15,26 +15,64 @@
|
|
|
15
15
|
## 安装
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install agri-map
|
|
18
|
+
npm install @wenle_2523097/agri-map
|
|
19
19
|
# 或
|
|
20
|
-
yarn add agri-map
|
|
20
|
+
yarn add @wenle_2523097/agri-map
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## 依赖版本
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
确保项目已安装以下**指定版本**的依赖：
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
|
|
28
|
+
# 方案 1：React 18 + react-leaflet v4（推荐，最稳定）
|
|
29
|
+
npm install leaflet@1.9.4 react@18.3.1 react-dom@18.3.1 react-leaflet@4.2.1
|
|
30
|
+
|
|
31
|
+
# 方案 2：React 19 + react-leaflet v5（需要禁用 StrictMode）
|
|
32
|
+
npm install leaflet@1.9.4 react@19.2.4 react-dom@19.2.4 react-leaflet@5.0.0
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> ⚠️ **重要提示：**
|
|
36
|
+
> - `react-leaflet` 支持 **v4.x** 和 **v5.x** 版本
|
|
37
|
+
> - 使用 **v5.x** 时需要 React 19，且必须禁用 StrictMode（见下方说明）
|
|
38
|
+
> - 推荐优先使用 **v4.x** 版本，兼容性更好
|
|
39
|
+
|
|
40
|
+
### React 19 / react-leaflet v5 注意事项
|
|
41
|
+
|
|
42
|
+
如果你使用的是 React 19 或 react-leaflet v5，需要在入口文件中**禁用 StrictMode**，否则 Leaflet 地图容器会报错 "Map container is already initialized"：
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
// src/main.jsx 或 src/main.tsx
|
|
46
|
+
import { createRoot } from 'react-dom/client'
|
|
47
|
+
import App from './App'
|
|
48
|
+
|
|
49
|
+
// ❌ 不要使用 StrictMode（会导致 Leaflet 重复初始化）
|
|
50
|
+
createRoot(document.getElementById('root')).render(
|
|
51
|
+
<App />
|
|
52
|
+
)
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## 样式引入
|
|
56
|
+
|
|
57
|
+
组件库的样式需要**手动引入**：
|
|
58
|
+
|
|
59
|
+
```jsx
|
|
60
|
+
// 在入口文件或组件中引入
|
|
61
|
+
import '@wenle_2523097/agri-map/dist/index.css';
|
|
62
|
+
|
|
63
|
+
// 同时需要引入 Leaflet 的基础样式
|
|
64
|
+
import 'leaflet/dist/leaflet.css';
|
|
29
65
|
```
|
|
30
66
|
|
|
31
67
|
## 快速开始
|
|
32
68
|
|
|
33
69
|
```tsx
|
|
70
|
+
// 引入样式
|
|
71
|
+
import '@wenle_2523097/agri-map/dist/index.css';
|
|
72
|
+
import 'leaflet/dist/leaflet.css';
|
|
73
|
+
|
|
34
74
|
import { MapContainer } from 'react-leaflet';
|
|
35
75
|
import { TianDiTuLayer, PlotLayer, Marker } from 'agri-map';
|
|
36
|
-
import 'leaflet/dist/leaflet.css';
|
|
37
|
-
import 'agri-map/dist/index.css';
|
|
38
76
|
|
|
39
77
|
function App() {
|
|
40
78
|
const plotData = [
|
|
@@ -54,11 +92,18 @@ function App() {
|
|
|
54
92
|
];
|
|
55
93
|
|
|
56
94
|
return (
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
95
|
+
<div style={{ width: '100%', height: '100vh' }}>
|
|
96
|
+
<ConfigProvider
|
|
97
|
+
theme="light"
|
|
98
|
+
tianDiTuLayer={{ apiKey: 'your-tianditu-key' }}
|
|
99
|
+
>
|
|
100
|
+
<MapContainer center={[30.0, 120.0]} zoom={12}>
|
|
101
|
+
<MapContent />
|
|
102
|
+
<PlotLayer dataSource={plotData} />
|
|
103
|
+
<Marker dataSource={markers} />
|
|
104
|
+
</MapContainer>
|
|
105
|
+
</ConfigProvider>
|
|
106
|
+
</div>
|
|
62
107
|
);
|
|
63
108
|
}
|
|
64
109
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wenle_2523097/agri-map",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "农业地图组件库 - 基于React-Leaflet的农业专用地图组件",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"license": "MIT",
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"leaflet": "^1.9.4",
|
|
36
|
-
"react": ">=
|
|
37
|
-
"react-dom": ">=
|
|
36
|
+
"react": ">=18.0.0",
|
|
37
|
+
"react-dom": ">=18.0.0",
|
|
38
38
|
"react-leaflet": "^4.2.1 || ^5.0.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|