@hzab/form-render-mobile 0.0.1

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 (39) hide show
  1. package/README.md +67 -0
  2. package/lib/index.js +46475 -0
  3. package/lib/static/imgs/approachPointIcon_f2eb69df51.png +0 -0
  4. package/lib/static/imgs/layers-2x_8f2c4d1147.png +0 -0
  5. package/lib/static/imgs/layers_416d91365b.png +0 -0
  6. package/lib/static/imgs/marker-icon_2b3e1faf89.png +0 -0
  7. package/package.json +59 -0
  8. package/src/common/schemaHandler.js +55 -0
  9. package/src/components/Cascader/index.jsx +75 -0
  10. package/src/components/Cascader/index.less +3 -0
  11. package/src/components/DatePicker/index.less +3 -0
  12. package/src/components/DatePicker/index.tsx +98 -0
  13. package/src/components/MapPicker/common/approachPointIcon.png +0 -0
  14. package/src/components/MapPicker/common/getCurrentPosition.js +27 -0
  15. package/src/components/MapPicker/common/gpsConvert.js +236 -0
  16. package/src/components/MapPicker/common/map-config.js +7 -0
  17. package/src/components/MapPicker/index.jsx +82 -0
  18. package/src/components/MapPicker/line-picker/car-route.json +426 -0
  19. package/src/components/MapPicker/line-picker/index.jsx +188 -0
  20. package/src/components/MapPicker/line-picker/index.less +41 -0
  21. package/src/components/MapPicker/line-picker/mockLonLat.js +1 -0
  22. package/src/components/MapPicker/location-picker/index.jsx +104 -0
  23. package/src/components/MapPicker/location-picker/index.less +36 -0
  24. package/src/components/NumberPicker/index.jsx +16 -0
  25. package/src/components/NumberPicker/index.less +3 -0
  26. package/src/components/Password/index.jsx +14 -0
  27. package/src/components/Select/index.less +3 -0
  28. package/src/components/Select/index.tsx +60 -0
  29. package/src/components/Text/index.tsx +23 -0
  30. package/src/components/Uploader/common/cordova-camera.js +188 -0
  31. package/src/components/Uploader/common/utils.js +87 -0
  32. package/src/components/Uploader/index.jsx +31 -0
  33. package/src/components/Uploader/uploader.jsx +246 -0
  34. package/src/components/Uploader/uploader.less +36 -0
  35. package/src/components/Uploader/video/index.jsx +37 -0
  36. package/src/components/Uploader/video/index.less +37 -0
  37. package/src/components/index.ts +10 -0
  38. package/src/index.tsx +101 -0
  39. package/src/type.d.ts +15 -0
@@ -0,0 +1,426 @@
1
+ {
2
+ "result": {
3
+ "routes": [
4
+ {
5
+ "duration": 600,
6
+ "distance": 3662,
7
+ "tactics": "11",
8
+ "destinationLocation": {
9
+ "lng": "120.16772194694937",
10
+ "lat": "30.284522604297408"
11
+ },
12
+ "steps": [
13
+ {
14
+ "area": "",
15
+ "turn": "0",
16
+ "direction": "0",
17
+ "distance": "664",
18
+ "duration": "60",
19
+ "path": "120.171074,30.264088;120.17111,30.263546;120.171196,30.262335;120.17124,30.261667;120.17124,30.261637;120.17127,30.260933;120.17133,30.26079;120.17133,30.26046;120.171364,30.259775;120.171364,30.259644;120.17143,30.259483;120.17143,30.25931;120.17143,30.259098;120.17141,30.258472;120.17142,30.258099",
20
+ "instruction": "中河北路",
21
+ "drive_instruction": "沿中河北路向南行驶664米左转调头靠右行驶进入辅路",
22
+ "stepOriginLocation": { "lng": "120.171074", "lat": "30.264088" },
23
+ "stepDestinationLocation": {
24
+ "lng": "120.17142",
25
+ "lat": "30.258099"
26
+ },
27
+ "pois": "",
28
+ "ispasspoi": "0",
29
+ "links": [
30
+ {
31
+ "link_id": "38104056",
32
+ "mesh": "H51F021002",
33
+ "road_id": "22490",
34
+ "tmc_nums": "1",
35
+ "tmcs": [{ "distance": 61, "status": 0 }]
36
+ },
37
+ {
38
+ "link_id": "38103200",
39
+ "mesh": "H51F021002",
40
+ "road_id": "22491",
41
+ "tmc_nums": "1",
42
+ "tmcs": [{ "distance": 134, "status": 0 }]
43
+ },
44
+ {
45
+ "link_id": "38197452",
46
+ "mesh": "H51F021002",
47
+ "road_id": "705861",
48
+ "tmc_nums": "1",
49
+ "tmcs": [{ "distance": 77, "status": 0 }]
50
+ },
51
+ {
52
+ "link_id": "38195772",
53
+ "mesh": "H51F021002",
54
+ "road_id": "705862",
55
+ "tmc_nums": "1",
56
+ "tmcs": [{ "distance": 95, "status": 0 }]
57
+ },
58
+ {
59
+ "link_id": "38193960",
60
+ "mesh": "H51F021002",
61
+ "road_id": "338292",
62
+ "tmc_nums": "1",
63
+ "tmcs": [{ "distance": 36, "status": 0 }]
64
+ },
65
+ {
66
+ "link_id": "38194084",
67
+ "mesh": "H51F021002",
68
+ "road_id": "23047",
69
+ "tmc_nums": "1",
70
+ "tmcs": [{ "distance": 76, "status": 0 }]
71
+ },
72
+ {
73
+ "link_id": "38193240",
74
+ "mesh": "H51F021002",
75
+ "road_id": "23048",
76
+ "tmc_nums": "1",
77
+ "tmcs": [{ "distance": 33, "status": 0 }]
78
+ },
79
+ {
80
+ "link_id": "38193296",
81
+ "mesh": "H51F021002",
82
+ "road_id": "20373",
83
+ "tmc_nums": "1",
84
+ "tmcs": [{ "distance": 42, "status": 0 }]
85
+ },
86
+ {
87
+ "link_id": "38169056",
88
+ "mesh": "H51F021002",
89
+ "road_id": "20372",
90
+ "tmc_nums": "1",
91
+ "tmcs": [{ "distance": 110, "status": 0 }]
92
+ }
93
+ ]
94
+ },
95
+ {
96
+ "area": "",
97
+ "turn": "1",
98
+ "direction": "0",
99
+ "distance": "116",
100
+ "duration": "60",
101
+ "path": "120.1717,30.258078;120.1717,30.258463;120.1717,30.25872;120.1717,30.259132",
102
+ "instruction": "中河北路",
103
+ "drive_instruction": "沿中河北路向北行驶116米直行进入左侧道路",
104
+ "stepOriginLocation": { "lng": "120.1717", "lat": "30.258078" },
105
+ "stepDestinationLocation": {
106
+ "lng": "120.1717",
107
+ "lat": "30.259132"
108
+ },
109
+ "pois": "",
110
+ "ispasspoi": "0",
111
+ "links": [
112
+ {
113
+ "link_id": "38168060",
114
+ "mesh": "H51F021002",
115
+ "road_id": "709173",
116
+ "tmc_nums": "1",
117
+ "tmcs": [{ "distance": 71, "status": 0 }]
118
+ },
119
+ {
120
+ "link_id": "38168372",
121
+ "mesh": "H51F021002",
122
+ "road_id": "709174",
123
+ "tmc_nums": "1",
124
+ "tmcs": [{ "distance": 45, "status": 0 }]
125
+ }
126
+ ]
127
+ },
128
+ {
129
+ "area": "",
130
+ "turn": "9",
131
+ "direction": "0",
132
+ "distance": "1419",
133
+ "duration": "120",
134
+ "path": "120.1717,30.259132;120.171684,30.259266;120.171684,30.25932;120.1717,30.260153;120.17169,30.261028;120.17167,30.261623;120.17164,30.2618;120.17148,30.26358;120.17133,30.26418;120.17129,30.264687;120.171265,30.264948;120.171234,30.265646;120.17118,30.266775;120.17118,30.266962;120.17116,30.267426;120.17114,30.267647;120.17112,30.26796;120.1711,30.26822;120.17104,30.268667;120.17099,30.269037;120.170975,30.269232;120.17097,30.26948;120.17097,30.269773;120.17097,30.269909;120.17097,30.270048;120.17099,30.270521;120.17099,30.27099;120.17099,30.27145;120.17095,30.271896",
135
+ "instruction": "中河高架入口",
136
+ "drive_instruction": "沿中河高架入口行驶1419米靠左",
137
+ "stepOriginLocation": { "lng": "120.1717", "lat": "30.259132" },
138
+ "stepDestinationLocation": {
139
+ "lng": "120.17095",
140
+ "lat": "30.271896"
141
+ },
142
+ "pois": "",
143
+ "ispasspoi": "0",
144
+ "links": [
145
+ {
146
+ "link_id": "38196636",
147
+ "mesh": "H51F021002",
148
+ "road_id": "716233",
149
+ "tmc_nums": "1",
150
+ "tmcs": [{ "distance": 562, "status": 0 }]
151
+ },
152
+ {
153
+ "link_id": "38087816",
154
+ "mesh": "H51F021002",
155
+ "road_id": "700948",
156
+ "tmc_nums": "1",
157
+ "tmcs": [{ "distance": 652, "status": 0 }]
158
+ },
159
+ {
160
+ "link_id": "38377944",
161
+ "mesh": "H51F021002",
162
+ "road_id": "1799",
163
+ "tmc_nums": "1",
164
+ "tmcs": [{ "distance": 205, "status": 0 }]
165
+ }
166
+ ]
167
+ },
168
+ {
169
+ "area": "",
170
+ "turn": "2",
171
+ "direction": "0",
172
+ "distance": "581",
173
+ "duration": "60",
174
+ "path": "120.17095,30.271896;120.17087,30.272839;120.17085,30.272974;120.17082,30.2734;120.170784,30.27389;120.17068,30.274826;120.170616,30.275394;120.17059,30.275616;120.17058,30.27572;120.170555,30.27585;120.1705,30.276003;120.17042,30.276428;120.17024,30.277105",
175
+ "instruction": "中河高架",
176
+ "drive_instruction": "沿中河高架向北行驶581米向右前方行驶进入匝道",
177
+ "stepOriginLocation": { "lng": "120.17095", "lat": "30.271896" },
178
+ "stepDestinationLocation": {
179
+ "lng": "120.17024",
180
+ "lat": "30.277105"
181
+ },
182
+ "pois": "",
183
+ "ispasspoi": "0",
184
+ "links": [
185
+ {
186
+ "link_id": "38409108",
187
+ "mesh": "H51F021002",
188
+ "road_id": "628438",
189
+ "tmc_nums": "1",
190
+ "tmcs": [{ "distance": 221, "status": 0 }]
191
+ },
192
+ {
193
+ "link_id": "38409472",
194
+ "mesh": "H51F021002",
195
+ "road_id": "4191",
196
+ "tmc_nums": "1",
197
+ "tmcs": [{ "distance": 104, "status": 0 }]
198
+ },
199
+ {
200
+ "link_id": "38407028",
201
+ "mesh": "H51F021002",
202
+ "road_id": "677683",
203
+ "tmc_nums": "1",
204
+ "tmcs": [{ "distance": 179, "status": 0 }]
205
+ },
206
+ {
207
+ "link_id": "38413016",
208
+ "mesh": "H51F021002",
209
+ "road_id": "677690",
210
+ "tmc_nums": "1",
211
+ "tmcs": [{ "distance": 77, "status": 0 }]
212
+ }
213
+ ]
214
+ },
215
+ {
216
+ "area": "",
217
+ "turn": "2",
218
+ "direction": "0",
219
+ "distance": "347",
220
+ "duration": "60",
221
+ "path": "120.17024,30.277105;120.17026,30.277157;120.17026,30.2772;120.17027,30.277256;120.17017,30.27769;120.1699,30.279001;120.16978,30.279692;120.16968,30.280195",
222
+ "instruction": "上塘高架出口",
223
+ "drive_instruction": "沿上塘高架出口行驶347米向右前方行驶进入辅路",
224
+ "stepOriginLocation": { "lng": "120.17024", "lat": "30.277105" },
225
+ "stepDestinationLocation": {
226
+ "lng": "120.16968",
227
+ "lat": "30.280195"
228
+ },
229
+ "pois": "",
230
+ "ispasspoi": "0",
231
+ "links": [
232
+ {
233
+ "link_id": "38416020",
234
+ "mesh": "H51F021002",
235
+ "road_id": "613850",
236
+ "tmc_nums": "1",
237
+ "tmcs": [{ "distance": 291, "status": 0 }]
238
+ },
239
+ {
240
+ "link_id": "38467040",
241
+ "mesh": "H51F021002",
242
+ "road_id": "613854",
243
+ "tmc_nums": "1",
244
+ "tmcs": [{ "distance": 56, "status": 0 }]
245
+ }
246
+ ]
247
+ },
248
+ {
249
+ "area": "",
250
+ "turn": "3",
251
+ "direction": "0",
252
+ "distance": "487",
253
+ "duration": "60",
254
+ "path": "120.16967,30.280195;120.16967,30.280312;120.16963,30.280434;120.16957,30.280638;120.16952,30.280842;120.169304,30.281528;120.169235,30.281607;120.16917,30.28174;120.16896,30.282145;120.16882,30.28238;120.1687,30.2826;120.16862,30.282743;120.168594,30.282791;120.168365,30.283121;120.16836,30.283138;120.1682,30.28339;120.16805,30.283598;120.16804,30.283625;120.16797,30.28371;120.1678,30.283941;120.16754,30.284315",
255
+ "instruction": "上塘路",
256
+ "drive_instruction": "沿上塘路向西北行驶487米右转",
257
+ "stepOriginLocation": { "lng": "120.16967", "lat": "30.280195" },
258
+ "stepDestinationLocation": {
259
+ "lng": "120.16754",
260
+ "lat": "30.284315"
261
+ },
262
+ "pois": "",
263
+ "ispasspoi": "0",
264
+ "links": [
265
+ {
266
+ "link_id": "38467228",
267
+ "mesh": "H51F021002",
268
+ "road_id": "622924",
269
+ "tmc_nums": "1",
270
+ "tmcs": [{ "distance": 50, "status": 0 }]
271
+ },
272
+ {
273
+ "link_id": "38468540",
274
+ "mesh": "H51F021002",
275
+ "road_id": "622936",
276
+ "tmc_nums": "1",
277
+ "tmcs": [{ "distance": 113, "status": 0 }]
278
+ },
279
+ {
280
+ "link_id": "38469136",
281
+ "mesh": "H51F021002",
282
+ "road_id": "620989",
283
+ "tmc_nums": "1",
284
+ "tmcs": [{ "distance": 65, "status": 0 }]
285
+ },
286
+ {
287
+ "link_id": "38472800",
288
+ "mesh": "H51F021002",
289
+ "road_id": "688029",
290
+ "tmc_nums": "1",
291
+ "tmcs": [{ "distance": 73, "status": 0 }]
292
+ },
293
+ {
294
+ "link_id": "38473196",
295
+ "mesh": "H51F021002",
296
+ "road_id": "688034",
297
+ "tmc_nums": "1",
298
+ "tmcs": [{ "distance": 48, "status": 0 }]
299
+ },
300
+ {
301
+ "link_id": "37356388",
302
+ "mesh": "H51F021002",
303
+ "road_id": "704272",
304
+ "tmc_nums": "1",
305
+ "tmcs": [{ "distance": 154, "status": 0 }]
306
+ }
307
+ ]
308
+ },
309
+ {
310
+ "area": "",
311
+ "turn": "7",
312
+ "direction": "0",
313
+ "distance": "14",
314
+ "duration": "60",
315
+ "path": "120.167534,30.284315;120.16767,30.284344;120.167694,30.28435",
316
+ "instruction": "无名道路",
317
+ "drive_instruction": "沿无名道路向东行驶14米左转",
318
+ "stepOriginLocation": { "lng": "120.167534", "lat": "30.284315" },
319
+ "stepDestinationLocation": {
320
+ "lng": "120.167694",
321
+ "lat": "30.28435"
322
+ },
323
+ "pois": "",
324
+ "ispasspoi": "0",
325
+ "links": [
326
+ {
327
+ "link_id": "37352940",
328
+ "mesh": "H51F021002",
329
+ "road_id": "662116",
330
+ "tmc_nums": "1",
331
+ "tmcs": [{ "distance": 14, "status": 0 }]
332
+ }
333
+ ]
334
+ },
335
+ {
336
+ "area": "",
337
+ "turn": "3",
338
+ "direction": "0",
339
+ "distance": "20",
340
+ "duration": "60",
341
+ "path": "120.167694,30.28435;120.16759,30.28451",
342
+ "instruction": "无名道路",
343
+ "drive_instruction": "沿无名道路向西北行驶20米右转",
344
+ "stepOriginLocation": { "lng": "120.167694", "lat": "30.28435" },
345
+ "stepDestinationLocation": {
346
+ "lng": "120.16759",
347
+ "lat": "30.28451"
348
+ },
349
+ "pois": "",
350
+ "ispasspoi": "0",
351
+ "links": [
352
+ {
353
+ "link_id": "37353324",
354
+ "mesh": "H51F021002",
355
+ "road_id": "662115",
356
+ "tmc_nums": "1",
357
+ "tmcs": [{ "distance": 20, "status": 0 }]
358
+ }
359
+ ]
360
+ },
361
+ {
362
+ "area": "",
363
+ "turn": "0",
364
+ "direction": "0",
365
+ "distance": "14",
366
+ "duration": "60",
367
+ "path": "120.16759,30.28451;120.16767,30.284567;120.16771,30.284575",
368
+ "instruction": "无名道路",
369
+ "drive_instruction": "沿无名道路向东北行驶14米到达目的地",
370
+ "stepOriginLocation": { "lng": "120.16759", "lat": "30.28451" },
371
+ "stepDestinationLocation": {
372
+ "lng": "120.16771",
373
+ "lat": "30.284575"
374
+ },
375
+ "pois": "",
376
+ "ispasspoi": "0",
377
+ "links": [
378
+ {
379
+ "link_id": "37353236",
380
+ "mesh": "H51F021002",
381
+ "road_id": "690122",
382
+ "tmc_nums": "1",
383
+ "tmcs": [{ "distance": 11, "status": 0 }]
384
+ },
385
+ {
386
+ "link_id": "37353436",
387
+ "mesh": "H51F021002",
388
+ "road_id": "690119",
389
+ "tmc_nums": "1",
390
+ "tmcs": [{ "distance": 3, "status": 0 }]
391
+ }
392
+ ]
393
+ }
394
+ ],
395
+ "toll": 0,
396
+ "originLocation": {
397
+ "lng": "120.1707153567896",
398
+ "lat": "30.26407080541238"
399
+ }
400
+ }
401
+ ],
402
+ "traffic_condition": "",
403
+ "origin": {
404
+ "uid": "",
405
+ "originPt": { "lng": "120.1707153567896", "lat": "30.26407080541238" },
406
+ "cname": "",
407
+ "area_id": "",
408
+ "wd": ""
409
+ },
410
+ "destination": {
411
+ "uid": "",
412
+ "destinationPt": {
413
+ "lng": "120.16772194694937",
414
+ "lat": "30.284522604297408"
415
+ },
416
+ "cname": "",
417
+ "area_id": "",
418
+ "wd": ""
419
+ },
420
+ "taxi": ""
421
+ },
422
+ "message": "ok",
423
+ "type": "2",
424
+ "status": "0",
425
+ "info": "copyright:@mapabc"
426
+ }
@@ -0,0 +1,188 @@
1
+ import { useEffect, useRef, useState } from "react";
2
+ import { Marker, TileLayer, Map, Polyline } from "react-leaflet";
3
+ import "leaflet/dist/leaflet.css";
4
+ import { Button, SpinLoading } from "antd-mobile";
5
+
6
+ import { mapConfig } from "../common/map-config";
7
+ import pointIconUrl from "../common/approachPointIcon.png";
8
+
9
+ import "./index.less";
10
+
11
+ // TODO: 删除测试数据
12
+ import carRoute from "./car-route.json";
13
+ import mockLonLat from "./mockLonLat";
14
+
15
+ /**
16
+ * 获取路径规划结果
17
+ * @param {Object} carRoute
18
+ * @returns
19
+ */
20
+ function getRouteSteps(carRoute) {
21
+ const routeLatLngs = [];
22
+ if (carRoute && carRoute.result && carRoute.result.routes) {
23
+ const { routes } = carRoute.result;
24
+ const { steps = [] } = (!Array.isArray(routes) ? routes : routes[0]) || {};
25
+ if (Array.isArray(steps)) {
26
+ steps.forEach((item) => {
27
+ const path = item?.path || item?.polyline;
28
+ path.split(";").forEach((xystr) => {
29
+ const [x, y] = xystr.split(",");
30
+ if (isFinite(x) && isFinite(y) && x !== "" && y !== "") {
31
+ routeLatLngs.push([Number(x), Number(y)]);
32
+ }
33
+ });
34
+ });
35
+ }
36
+ }
37
+ //
38
+ return routeLatLngs;
39
+ }
40
+
41
+ // 地图选中点图标
42
+ const LeafIcon = new L.Icon({
43
+ iconUrl: pointIconUrl,
44
+ iconSize: [30, 40],
45
+ });
46
+
47
+ let map = null;
48
+
49
+ function ReactLeafletMap(props) {
50
+ const {
51
+ onConfirm,
52
+ onCancel,
53
+ data,
54
+ // TODO: 切换成正确的地址(通过 props | config 传递?)
55
+ mapUrl = "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
56
+ // mapUrl = "http://20.0.6.168:8083/api/map/org/{z}/{y}/{x}",
57
+ // mapUrl = "/org/{z}/{y}/{x}",
58
+ } = props;
59
+
60
+ const [startPoint, setStartPoint] = useState(null);
61
+ const [endPoint, setEndPoint] = useState(null);
62
+ const [linePoints, setLine] = useState(null);
63
+ const [currentPoint, setCurrentPoint] = useState("start");
64
+ const [loading, setLoading] = useState(false);
65
+
66
+ const mapRef = useRef();
67
+
68
+ function onClickMap(e) {
69
+ if (currentPoint === "start") {
70
+ // setStartPoint(e?.latlng);
71
+ setStartPoint({
72
+ lat: 30.26461177467552,
73
+ lng: 120.15684081727801,
74
+ });
75
+ setCurrentPoint("end");
76
+ }
77
+ if (currentPoint === "end") {
78
+ // setEndPoint(e?.latlng);
79
+ setEndPoint({
80
+ lat: 30.24890937059348,
81
+ lng: 120.16093150550527,
82
+ });
83
+ setCurrentPoint("start");
84
+ }
85
+ }
86
+
87
+ useEffect(() => {
88
+ console.log(startPoint, endPoint);
89
+ if (startPoint && endPoint) {
90
+ getRouteByStartEnd(startPoint, endPoint).then((res) => {
91
+ setLine(res);
92
+ });
93
+ }
94
+ }, [startPoint, endPoint]);
95
+
96
+ useEffect(() => {
97
+ map = mapRef?.current?.contextValue?.map;
98
+
99
+ // TODO: 数据回填
100
+ if (data && data.lng && data.lat) {
101
+ const { lat, lng } = data;
102
+ // map.setView(L.latLng(lat, lng), mapConfig.zoom);
103
+ setStartPoint({
104
+ lat: 30.26461177467552,
105
+ lng: 120.15684081727801,
106
+ });
107
+ setEndPoint({
108
+ lat: 30.24890937059348,
109
+ lng: 120.16093150550527,
110
+ });
111
+ // setLine();
112
+ }
113
+ }, []);
114
+
115
+ // TODO: 改为正确的请求数据逻辑
116
+ function getRouteByStartEnd(start, end) {
117
+ setLoading(true);
118
+ return new Promise((resolve) => {
119
+ setTimeout(async () => {
120
+ // let res = await getCarRoute({ origin: start, destination: end, waypoints: '' })
121
+ // if (res?.data?.data) {
122
+ // let route = JSON.parse(res?.data?.data)
123
+
124
+ //临时用的模拟数据,需调接口使用时解开上面注释代码
125
+ let route = JSON.parse(mockLonLat);
126
+
127
+ resolve(getRouteSteps(route).map((item) => item.reverse()));
128
+ setLoading(false);
129
+ // }
130
+ }, 1000);
131
+ });
132
+ }
133
+
134
+ function onSave() {
135
+ onConfirm &&
136
+ onConfirm({
137
+ start: startPoint,
138
+ end: endPoint,
139
+ line: linePoints,
140
+ });
141
+ }
142
+
143
+ return (
144
+ <div className="line-picker">
145
+ <Map className="line-picker-map" {...mapConfig} ref={mapRef} onclick={onClickMap}>
146
+ <TileLayer url={mapUrl} />
147
+ {startPoint && <Marker key={`marker-start`} position={startPoint} icon={LeafIcon} />}
148
+ {endPoint && <Marker key={`marker-end`} position={endPoint} icon={LeafIcon} />}
149
+ {startPoint && endPoint && linePoints && (
150
+ <Polyline key={`path_${linePoints.length}`} positions={linePoints} color={"#f00"} weight={8} />
151
+ )}
152
+ </Map>
153
+ <div className="line-start-end-show">
154
+ <div
155
+ className={currentPoint === "start" ? "active-point" : ""}
156
+ onClick={() => {
157
+ setCurrentPoint("start");
158
+ }}
159
+ >
160
+ 起点:{startPoint?.lng},{startPoint?.lat}
161
+ </div>
162
+ <div
163
+ className={currentPoint === "end" ? "active-point" : ""}
164
+ onClick={() => {
165
+ setCurrentPoint("end");
166
+ }}
167
+ >
168
+ 终点:{endPoint?.lng}, {endPoint?.lat}
169
+ </div>
170
+ </div>
171
+ <div className="line-picker-footer">
172
+ <Button className="footer-btn" onClick={onCancel}>
173
+ 取消
174
+ </Button>
175
+ <Button className="footer-btn" color="primary" fill="solid" onClick={onSave}>
176
+ 确定
177
+ </Button>
178
+ </div>
179
+ {loading ? (
180
+ <div className="loading-wrap">
181
+ <SpinLoading />
182
+ </div>
183
+ ) : null}
184
+ </div>
185
+ );
186
+ }
187
+
188
+ export default ReactLeafletMap;
@@ -0,0 +1,41 @@
1
+ .line-picker {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ height: 100%;
6
+ .line-picker-header {
7
+ display: flex;
8
+ justify-content: space-between;
9
+ padding: 0 20px;
10
+ .get-current-location-btn {
11
+ padding: 0 8px;
12
+ cursor: pointer;
13
+ }
14
+ }
15
+ .line-picker-map {
16
+ flex: 1;
17
+ }
18
+ .line-start-end-show {
19
+ .active-point {
20
+ background-color: #eee;
21
+ }
22
+ }
23
+ .line-picker-footer {
24
+ display: flex;
25
+ .footer-btn {
26
+ flex: 1;
27
+ }
28
+ }
29
+ .loading-wrap {
30
+ position: absolute;
31
+ top: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ left: 0;
35
+ display: flex;
36
+ justify-content: center;
37
+ align-items: center;
38
+ background: rgba(0, 0, 0, 0.55);
39
+ z-index: 100;
40
+ }
41
+ }
@@ -0,0 +1 @@
1
+ export default '{"result":{"routes":[{"duration":180,"distance":1819,"tactics":"11","destinationLocation":{"lng":120.1609453864646,"lat":30.248918043114813},"steps":[{"area":"","duration":"60","path":"120.15685366743821,30.264622493046357;120.15686366804914,30.264595493589045;120.15701867743353,30.264096501811792;120.15720368847323,30.263432511390256;120.15731369498728,30.263091517120777;120.1573336961705,30.263041518178994;120.15742370144318,30.262734522778725;120.15747370435125,30.262547525292437;120.15754370841431,30.26231252884328;120.15754370840949,30.262299528820485;120.1577237187544,30.261679537841204;120.15776372102377,30.26151353978028;120.15782372443383,30.261315542767168;120.15784372554437,30.2611885436532;120.15794373118008,30.26084654857376;120.15808373903205,30.2604605555628;120.15810374012977,30.260359556475333;120.15831375162938,30.25950856633438;120.15836975463388,30.25920156879707;120.15845375908138,30.25865057231296","stepDestinationLocation":{"lng":120.15845375908138,"lat":30.25865057231296},"distance":"663","drive_instruction":"沿环城西路向南行驶663米直行进入隧道","instruction":"环城西路","turn":"1","ispasspoi":"0","pois":"","stepOriginLocation":{"lng":120.15685366743821,"lat":30.264622493046357},"direction":"0"},{"area":"","duration":"120","path":"120.15845375907914,30.258644572302547;120.15850376167795,30.258225574225776;120.15853376284738,30.2569435735936;120.15856776453589,30.256476574580788;120.15857376484246,30.256418574796736;120.15859376590141,30.25632757569202;120.1586337680145,30.25614657747995;120.15869377119262,30.255932580249908;120.1587837759631,30.255698584529686;120.15893378387197,30.25540459176105;120.15935380556958,30.254768611885588;120.16016384526596,30.253554648864803;120.16052386201645,30.25306466460035;120.16084387641068,30.252564678071895;120.16103988500947,30.25226168614032;120.16117389077029,30.251995691473784;120.16129889607639,30.251753696399252;120.16140390044126,30.251444700311797;120.16146390285824,30.251120702278598;120.16148990385628,30.25086270292712;120.16150390441287,30.25077770336696;120.1615239051832,30.25059470388962;120.16151390471975,30.25047870327641;120.16150390425324,30.250355702651042;120.16148990359112,30.250161701738126;120.16142390071168,30.249916698559574;120.16132989661523,30.24966569417076;120.16121389153416,30.249426688829413;120.16107788552544,30.249205682603638;120.16097388085849,30.248988677715484;120.1609478796785,30.248918676460644","stepDestinationLocation":{"lng":120.1609478796785,"lat":30.248918676460644},"distance":"1156","drive_instruction":"沿西湖隧道向南行驶1156米到达目的地","instruction":"西湖隧道","turn":"0","ispasspoi":"0","pois":"","stepOriginLocation":{"lng":120.15845375907914,"lat":30.258644572302547},"direction":"0"}],"toll":0,"originLocation":{"lng":120.1568544863648,"lat":30.264620264145403}}],"traffic_condition":"","origin":{"uid":"","originPt":{"lng":120.1568544863648,"lat":30.264620264145403},"cname":"","area_id":"","wd":""},"destination":{"uid":"","destinationPt":{"lng":"120.1609315068971","lat":"30.248909366764376"},"cname":"","area_id":"","wd":""},"taxi":""},"startEndMidway":{"total":3,"origin":"120.1521384716034,30.266936026382215","destination":"120.1562422513962,30.251242206173707","index":0,"waypoints":""}}';