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