react-swipe-map 1.0.3 → 1.0.5

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 (5) hide show
  1. package/README.md +106 -65
  2. package/dist/index.es.js +17908 -25829
  3. package/dist/index.umd.js +85 -243
  4. package/dist/style.css +1 -1
  5. package/package.json +5 -5
package/README.md CHANGED
@@ -26,33 +26,64 @@ pnpm add react-swipe-map
26
26
  ### 基本使用
27
27
 
28
28
  ```tsx
29
- import React, { useRef, useState } from 'react';
30
- import L from 'leaflet';
31
- import 'leaflet/dist/leaflet.css';
32
- import Map from 'react-swipe-map';
33
- import { Button } from 'antd';
34
-
29
+ import { useEffect, useMemo, useRef, useState } from "react";
30
+ import L from "leaflet";
31
+ import "leaflet/dist/leaflet.css";
32
+ import "./App.scss";
33
+ // @ts-ignore
34
+ // import { Map } from "react-roll-map-testone";
35
+ import Map from "./react-leaflet-side-by-side/index";
36
+ // import {}
37
+ import RollMapIcon from "./assets/roll-map.png";
38
+ import NormalMapIcon from "./assets/normal-map.png";
39
+ import BaseMapSelectIcon from "./assets/base-map-select.png";
40
+ // @ts-ignore
41
+ // import Map from "react-swipe-map";
42
+ import { Button } from "antd";
43
+ let baseMapList = [
44
+ {
45
+ mapUrl:
46
+ "http://36.110.12.229:9015/usmaps?service=WMTS&version=1.0.0&request=GetTile&tk=53a6c3d4-4821-418d-8403-27213bac20c6&Layer&Style=1&Format=image/png&TileMatrixSet=l&TileMatrix={z}&TileRow={y}&TileCol={x}",
47
+ center: [30.5984, 114.3118],
48
+ zoomOffset: 0,
49
+ zoom: 6,
50
+ maxZoom: 18,
51
+ type: "4326",
52
+ id: "imagesky4326",
53
+ name: "天地图WMTS影像(4326)",
54
+ checked: false,
55
+ },
56
+ {
57
+ id: "1154781632637710336",
58
+ name: "4490天地图影像注记",
59
+ icon: "ca3fe93b207545558ba5c601a8d36c31",
60
+ mapUrl: "http://10.17.17.243/tdtyxzj_c/{z}/{y}/{x}.png",
61
+ type: "4326",
62
+ centre: [23.641, 112.983],
63
+ bounds: null,
64
+ zoom: 7,
65
+ zoomOffset: 1,
66
+ checked: true,
67
+ },
68
+ ];
35
69
  function App() {
36
70
  const [isRollMap, setIsRollMap] = useState(false);
37
- const mapRef = useRef(null);
38
-
39
- // 在左侧图层上添加 marker
71
+ const rollMapRef = useRef(null);
72
+ // 在左侧图层上添加一个marker
40
73
  const addMarkerToLeft = () => {
41
- if (!mapRef.current) return;
74
+ if (!rollMapRef.current) return;
42
75
  const marker = L.marker([30.5984, 114.3118], {
43
- pane: 'leftPane',
76
+ pane: "leftPane",
44
77
  });
45
- (mapRef.current as any).addLeftLayers([marker]);
78
+ (rollMapRef.current as any).addLeftLayers([marker]);
46
79
  };
47
-
48
- // 在右侧图层上添加 GeoJSON
49
80
  const addGeoJsonToRight = () => {
50
- if (!mapRef.current) return;
81
+ if (!rollMapRef.current) return;
51
82
  const geojson = L.geoJSON(
52
83
  {
53
- type: 'Feature',
84
+ type: "Feature",
54
85
  geometry: {
55
- type: 'Polygon',
86
+ type: "Polygon",
56
87
  coordinates: [
57
88
  [
58
89
  [115.796, 40.4934],
@@ -63,40 +94,49 @@ function App() {
63
94
  ],
64
95
  ],
65
96
  },
66
- },
97
+ } as any,
67
98
  {
68
- pane: 'rightPane',
99
+ pane: "rightPane",
69
100
  style: {
70
- color: 'red',
101
+ color: "red",
71
102
  weight: 3,
72
103
  opacity: 0.5,
73
- fillColor: 'red',
104
+ fillColor: "red",
74
105
  fillOpacity: 0.2,
75
106
  },
76
107
  },
77
- ).addTo((mapRef.current as any).getRightLayersGroup());
78
-
79
- // 定位到 geojson
80
- ((mapRef.current as any).getMapRef() as L.Map).fitBounds(geojson.getBounds());
108
+ );
109
+ (rollMapRef.current as any).addRightLayers([geojson]);
110
+ // 定位到geojson
111
+ ((rollMapRef.current as any).getMapRef() as L.Map).fitBounds(
112
+ geojson.getBounds(),
113
+ );
81
114
  };
82
-
83
115
  return (
84
- <div style={{ height: '100vh', width: '100%' }}>
85
- <Map
86
- ref={mapRef}
87
- leftLayers={[]}
88
- rightLayers={[]}
89
- onIsRollMapChange={setIsRollMap}
90
- />
91
- <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 1000 }}>
92
- <Button onClick={addMarkerToLeft} disabled={!isRollMap}>
93
- 添加 marker 到左侧图层
94
- </Button>
95
- <Button onClick={addGeoJsonToRight} disabled={!isRollMap} style={{ marginLeft: 8 }}>
96
- 添加 GeoJSON 到右侧图层
97
- </Button>
116
+ <>
117
+ <div className="app-container">
118
+ <div className="app-content">
119
+ <Map
120
+ ref={rollMapRef}
121
+ leftLayers={[]}
122
+ rightLayers={[]}
123
+ rollIcon={RollMapIcon}
124
+ normalIcon={NormalMapIcon}
125
+ baseMapSelectIcon={BaseMapSelectIcon}
126
+ baseMapList={baseMapList}
127
+ onIsRollMapChange={setIsRollMap}
128
+ ></Map>
129
+ </div>
130
+ <div className="app-right">
131
+ <Button onClick={addMarkerToLeft} disabled={!isRollMap}>
132
+ 添加marker到左侧图层
133
+ </Button>
134
+ <Button onClick={addGeoJsonToRight} disabled={!isRollMap}>
135
+ 添加geojson到右侧图层
136
+ </Button>
137
+ </div>
98
138
  </div>
99
- </div>
139
+ </>
100
140
  );
101
141
  }
102
142
 
@@ -107,16 +147,16 @@ export default App;
107
147
 
108
148
  ### Props
109
149
 
110
- | 参数 | 说明 | 类型 | 默认值 | 必填 |
111
- |------|------|------|--------|------|
112
- | `leftLayers` | 左侧图层列表 | `L.Layer[]` | `[]` | 否 |
113
- | `rightLayers` | 右侧图层列表 | `L.Layer[]` | `[]` | 否 |
114
- | `mapSettings` | 地图配置 | `{ center: number[], zoom: number }` | `{ center: [35.8617, 104.1954], zoom: 4 }` | 否 |
115
- | `rollIcon` | 卷帘模式图标 | `any` | 内置图标 | 否 |
116
- | `normalIcon` | 普通模式图标 | `any` | 内置图标 | 否 |
117
- | `baseMapSelectIcon` | 底图选择图标 | `any` | 内置图标 | 否 |
118
- | `baseMapList` | 底图列表 | `BaseMapConfig[]` | `[]` | 否 |
119
- | `onIsRollMapChange` | 卷帘模式变化回调 | `(isRollMap: boolean) => void` | - | 否 |
150
+ | 参数 | 说明 | 类型 | 默认值 | 必填 |
151
+ | ------------------- | ---------------- | ------------------------------------ | ------------------------------------------ | ---- |
152
+ | `leftLayers` | 左侧图层列表 | `L.Layer[]` | `[]` | 否 |
153
+ | `rightLayers` | 右侧图层列表 | `L.Layer[]` | `[]` | 否 |
154
+ | `mapSettings` | 地图配置 | `{ center: number[], zoom: number }` | `{ center: [35.8617, 104.1954], zoom: 4 }` | 否 |
155
+ | `rollIcon` | 卷帘模式图标 | `any` | 内置图标 | 否 |
156
+ | `normalIcon` | 普通模式图标 | `any` | 内置图标 | 否 |
157
+ | `baseMapSelectIcon` | 底图选择图标 | `any` | 内置图标 | 否 |
158
+ | `baseMapList` | 底图列表 | `BaseMapConfig[]` | `[]` | 否 |
159
+ | `onIsRollMapChange` | 卷帘模式变化回调 | `(isRollMap: boolean) => void` | - | 否 |
120
160
 
121
161
  ### BaseMapConfig
122
162
 
@@ -125,7 +165,7 @@ interface BaseMapConfig {
125
165
  id: string;
126
166
  name: string;
127
167
  mapUrl: string;
128
- type: '4326' | '3857';
168
+ type: "4326" | "3857";
129
169
  centre?: [number, number];
130
170
  zoom?: number;
131
171
  zoomOffset?: number;
@@ -139,18 +179,18 @@ interface BaseMapConfig {
139
179
 
140
180
  通过 `ref` 可以访问以下方法：
141
181
 
142
- | 方法名 | 说明 | 类型 |
143
- |--------|------|------|
144
- | `addLeftLayers` | 添加左侧图层 | `(layers: L.Layer[]) => void` |
145
- | `addRightLayers` | 添加右侧图层 | `(layers: L.Layer[]) => void` |
146
- | `clearLeftLayers` | 清除左侧图层 | `() => void` |
147
- | `clearRightLayers` | 清除右侧图层 | `() => void` |
148
- | `getMapInstance` | 获取地图实例 | `() => L.Map \| null` |
149
- | `toggleRollMap` | 切换卷帘模式 | `(enabled: boolean) => void` |
150
- | `getIsRollMap` | 获取当前是否为卷帘模式 | `() => boolean` |
151
- | `getLeftLayersGroup` | 获取左侧图层组 | `() => L.LayerGroup \| null` |
152
- | `getRightLayersGroup` | 获取右侧图层组 | `() => L.LayerGroup \| null` |
153
- | `getMapRef` | 获取地图引用 | `() => L.Map \| null` |
182
+ | 方法名 | 说明 | 类型 |
183
+ | --------------------- | ---------------------- | ----------------------------- |
184
+ | `addLeftLayers` | 添加左侧图层 | `(layers: L.Layer[]) => void` |
185
+ | `addRightLayers` | 添加右侧图层 | `(layers: L.Layer[]) => void` |
186
+ | `clearLeftLayers` | 清除左侧图层 | `() => void` |
187
+ | `clearRightLayers` | 清除右侧图层 | `() => void` |
188
+ | `getMapInstance` | 获取地图实例 | `() => L.Map \| null` |
189
+ | `toggleRollMap` | 切换卷帘模式 | `(enabled: boolean) => void` |
190
+ | `getIsRollMap` | 获取当前是否为卷帘模式 | `() => boolean` |
191
+ | `getLeftLayersGroup` | 获取左侧图层组 | `() => L.LayerGroup \| null` |
192
+ | `getRightLayersGroup` | 获取右侧图层组 | `() => L.LayerGroup \| null` |
193
+ | `getMapRef` | 获取地图引用 | `() => L.Map \| null` |
154
194
 
155
195
  ## 🎯 使用场景
156
196
 
@@ -162,8 +202,9 @@ interface BaseMapConfig {
162
202
  ## 💡 注意事项
163
203
 
164
204
  1. **Leaflet 样式**：使用前需要引入 Leaflet 的 CSS 文件：
205
+
165
206
  ```tsx
166
- import 'leaflet/dist/leaflet.css';
207
+ import "leaflet/dist/leaflet.css";
167
208
  ```
168
209
 
169
210
  2. **Pane 设置**：添加图层时，可以通过 `pane` 参数指定图层所属的 pane：