@deepinnet-components/pc 0.0.44 → 0.0.45
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.
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
4
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
// @ts-nocheck
|
|
12
|
+
import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo } from 'react';
|
|
13
|
+
import { message } from 'antd';
|
|
14
|
+
import * as turf from '@turf/turf';
|
|
15
|
+
import { useGetState } from 'ahooks';
|
|
16
|
+
import wellknown from 'wellknown';
|
|
17
|
+
import MapMarker from "../MapMarker";
|
|
18
|
+
import MapPolyline from "../MapPolyline";
|
|
19
|
+
import MapPolygon from "../MapPolygon";
|
|
20
|
+
import { setFitView as _setFitView, deepClone } from "../utils";
|
|
21
|
+
import "../index.less";
|
|
22
|
+
|
|
23
|
+
// 计算点到线段距离的辅助函数
|
|
24
|
+
function pointToSegmentDistance(p, p1, p2) {
|
|
25
|
+
// 将经纬度转换为平面坐标（这里简单用经纬度差，适合小范围）
|
|
26
|
+
var x = p[0];
|
|
27
|
+
var y = p[1];
|
|
28
|
+
var x1 = p1[0];
|
|
29
|
+
var y1 = p1[1];
|
|
30
|
+
var x2 = p2[0];
|
|
31
|
+
var y2 = p2[1];
|
|
32
|
+
var A = x - x1;
|
|
33
|
+
var B = y - y1;
|
|
34
|
+
var C = x2 - x1;
|
|
35
|
+
var D = y2 - y1;
|
|
36
|
+
var dot = A * C + B * D;
|
|
37
|
+
var len_sq = C * C + D * D;
|
|
38
|
+
var param = -1;
|
|
39
|
+
if (len_sq !== 0) param = dot / len_sq;
|
|
40
|
+
var xx, yy;
|
|
41
|
+
if (param < 0) {
|
|
42
|
+
xx = x1;
|
|
43
|
+
yy = y1;
|
|
44
|
+
} else if (param > 1) {
|
|
45
|
+
xx = x2;
|
|
46
|
+
yy = y2;
|
|
47
|
+
} else {
|
|
48
|
+
xx = x1 + param * C;
|
|
49
|
+
yy = y1 + param * D;
|
|
50
|
+
}
|
|
51
|
+
var dx = x - xx;
|
|
52
|
+
var dy = y - yy;
|
|
53
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
54
|
+
}
|
|
55
|
+
var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
56
|
+
var map = props.map,
|
|
57
|
+
form = props.form;
|
|
58
|
+
var _useGetState = useGetState([]),
|
|
59
|
+
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
60
|
+
polygon = _useGetState2[0],
|
|
61
|
+
_setPolygon = _useGetState2[1],
|
|
62
|
+
getPolygon = _useGetState2[2]; // 除去最后一个点的数据
|
|
63
|
+
var _useGetState3 = useGetState(false),
|
|
64
|
+
_useGetState4 = _slicedToArray(_useGetState3, 3),
|
|
65
|
+
polygonOk = _useGetState4[0],
|
|
66
|
+
_setPolygonOk = _useGetState4[1],
|
|
67
|
+
_getPolygonOk = _useGetState4[2]; // 是否已经完成
|
|
68
|
+
|
|
69
|
+
useImperativeHandle(ref, function () {
|
|
70
|
+
return {
|
|
71
|
+
onMapClick: function onMapClick(e) {
|
|
72
|
+
_onMapClick(e);
|
|
73
|
+
},
|
|
74
|
+
setPolygon: function setPolygon(params) {
|
|
75
|
+
_setPolygon(params);
|
|
76
|
+
},
|
|
77
|
+
setPolygonOk: function setPolygonOk(params) {
|
|
78
|
+
_setPolygonOk(params);
|
|
79
|
+
},
|
|
80
|
+
getPolygonOk: function getPolygonOk() {
|
|
81
|
+
return _getPolygonOk();
|
|
82
|
+
},
|
|
83
|
+
setFitView: function setFitView() {
|
|
84
|
+
var timer = setInterval(function () {
|
|
85
|
+
if (map) {
|
|
86
|
+
_setFitView(map, {
|
|
87
|
+
top: 200,
|
|
88
|
+
right: 200,
|
|
89
|
+
bottom: 200,
|
|
90
|
+
left: 200
|
|
91
|
+
});
|
|
92
|
+
clearInterval(timer);
|
|
93
|
+
}
|
|
94
|
+
}, 100);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
if (polygon.length >= 3) {
|
|
100
|
+
form.setFieldState('wktPointsStr', function (state) {
|
|
101
|
+
state.selfErrors = null;
|
|
102
|
+
});
|
|
103
|
+
var path = [].concat(_toConsumableArray(polygon), [polygon[0]]);
|
|
104
|
+
var turfPolygon = turf.polygon([path]);
|
|
105
|
+
var area = (turf.area(turfPolygon) / 1000000).toFixed(2);
|
|
106
|
+
var wkt = wellknown.stringify({
|
|
107
|
+
type: 'Polygon',
|
|
108
|
+
coordinates: [path]
|
|
109
|
+
});
|
|
110
|
+
var match = wkt.match(/^POLYGON \(\((.+)\)\)$/);
|
|
111
|
+
var wktPointsStr = match ? match[1] : '';
|
|
112
|
+
form.setValues({
|
|
113
|
+
area: area,
|
|
114
|
+
wktPointsStr: wktPointsStr
|
|
115
|
+
});
|
|
116
|
+
} else {
|
|
117
|
+
form.setValues({
|
|
118
|
+
area: undefined,
|
|
119
|
+
wktPointsStr: undefined
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
}, [polygon]);
|
|
123
|
+
function _onMapClick(e) {
|
|
124
|
+
var pos = [Number(e.lngLat.lng.toFixed(6)), Number(e.lngLat.lat.toFixed(6))];
|
|
125
|
+
setRightMenuShow(false);
|
|
126
|
+
if (_getPolygonOk()) return;
|
|
127
|
+
var copy = deepClone(getPolygon());
|
|
128
|
+
copy.push(pos);
|
|
129
|
+
_setPolygon(copy);
|
|
130
|
+
}
|
|
131
|
+
var mapLine = useMemo(function () {
|
|
132
|
+
return polygonOk ? [].concat(_toConsumableArray(polygon), [polygon[0]]) : polygon;
|
|
133
|
+
}, [polygon, polygonOk]);
|
|
134
|
+
|
|
135
|
+
// 点击线添加节点
|
|
136
|
+
var handleClickLine1 = function handleClickLine1(e) {
|
|
137
|
+
setRightMenuShow(false);
|
|
138
|
+
if (!_getPolygonOk()) return;
|
|
139
|
+
var pos = [Number(e.lngLat.lng.toFixed(6)), Number(e.lngLat.lat.toFixed(6))];
|
|
140
|
+
|
|
141
|
+
// 找到距离点击点最近的折线段，插入点
|
|
142
|
+
var minDistance = Infinity;
|
|
143
|
+
var insertIndex = 0;
|
|
144
|
+
var polygon = getPolygon();
|
|
145
|
+
for (var i = 0; i < polygon.length - 1; i++) {
|
|
146
|
+
var segmentStart = polygon[i];
|
|
147
|
+
var segmentEnd = polygon[i + 1];
|
|
148
|
+
|
|
149
|
+
// 计算点击点到线段距离
|
|
150
|
+
var dist = pointToSegmentDistance(pos, segmentStart, segmentEnd);
|
|
151
|
+
if (dist < minDistance) {
|
|
152
|
+
minDistance = dist;
|
|
153
|
+
insertIndex = i + 1;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
var copy = deepClone(getPolygon());
|
|
157
|
+
copy.splice(insertIndex, 0, pos);
|
|
158
|
+
_setPolygon(copy);
|
|
159
|
+
};
|
|
160
|
+
var onPointDragging = function onPointDragging(e, index) {
|
|
161
|
+
setRightMenuShow(false);
|
|
162
|
+
var pos = [Number(e.target._lngLat.lng.toFixed(6)), Number(e.target._lngLat.lat.toFixed(6))];
|
|
163
|
+
var copy = deepClone(getPolygon());
|
|
164
|
+
copy[index] = pos;
|
|
165
|
+
_setPolygon(copy);
|
|
166
|
+
};
|
|
167
|
+
var deleteMarker = function deleteMarker(rightMarkerIndex) {
|
|
168
|
+
setRightMenuShow(false);
|
|
169
|
+
if (polygon.length === 1) {
|
|
170
|
+
return message.warning('至少保留一个点');
|
|
171
|
+
}
|
|
172
|
+
var copy = deepClone(getPolygon());
|
|
173
|
+
copy.splice(rightMarkerIndex, 1);
|
|
174
|
+
_setPolygon(copy);
|
|
175
|
+
if (copy.length <= 2) {
|
|
176
|
+
_setPolygonOk(false);
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
// 完成绘制
|
|
181
|
+
var handlePolygonOk = function handlePolygonOk() {
|
|
182
|
+
var _e$stopPropagation;
|
|
183
|
+
var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
184
|
+
(_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 || _e$stopPropagation.call(e);
|
|
185
|
+
_setPolygonOk(true);
|
|
186
|
+
setRightMenuShow(false);
|
|
187
|
+
};
|
|
188
|
+
var handleMarkerClick = function handleMarkerClick(item, index) {
|
|
189
|
+
setRightMenuShow(false);
|
|
190
|
+
if (index === 0) {
|
|
191
|
+
if (getPolygon().length >= 3) {
|
|
192
|
+
handlePolygonOk();
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
// 右键操作 begin
|
|
198
|
+
var _useState = useState(false),
|
|
199
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
200
|
+
rightMenuShow = _useState2[0],
|
|
201
|
+
setRightMenuShow = _useState2[1];
|
|
202
|
+
var _useState3 = useState(-1),
|
|
203
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
204
|
+
rightMarkerIndex = _useState4[0],
|
|
205
|
+
setRightMarkerIndex = _useState4[1];
|
|
206
|
+
var _useState5 = useState([]),
|
|
207
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
208
|
+
rightMenuPos = _useState6[0],
|
|
209
|
+
setRightMenuPos = _useState6[1];
|
|
210
|
+
function handleMarkerRightClick(e, index) {
|
|
211
|
+
setRightMarkerIndex(index);
|
|
212
|
+
setRightMenuPos(getPolygon()[index]);
|
|
213
|
+
setRightMenuShow(true);
|
|
214
|
+
}
|
|
215
|
+
function handleRightMenuDeleteMarker(e) {
|
|
216
|
+
e.stopPropagation();
|
|
217
|
+
deleteMarker(rightMarkerIndex);
|
|
218
|
+
}
|
|
219
|
+
// 右键操作 end
|
|
220
|
+
|
|
221
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, map && polygon.map(function (item, index) {
|
|
222
|
+
return /*#__PURE__*/React.createElement(MapMarker, {
|
|
223
|
+
key: index,
|
|
224
|
+
map: map,
|
|
225
|
+
position: item,
|
|
226
|
+
draggable: true,
|
|
227
|
+
onDragging: function onDragging(e) {
|
|
228
|
+
return onPointDragging(e, index);
|
|
229
|
+
},
|
|
230
|
+
onRightClick: function onRightClick(e) {
|
|
231
|
+
handleMarkerRightClick(e, index);
|
|
232
|
+
},
|
|
233
|
+
onClick: function onClick() {
|
|
234
|
+
handleMarkerClick(item, index);
|
|
235
|
+
}
|
|
236
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
237
|
+
className: "com-linePointMaker"
|
|
238
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
239
|
+
className: "com-linePointMaker-inner",
|
|
240
|
+
style: {
|
|
241
|
+
borderColor: '#1890ff'
|
|
242
|
+
}
|
|
243
|
+
})));
|
|
244
|
+
}), map && !!polygon.length && /*#__PURE__*/React.createElement(MapPolygon, {
|
|
245
|
+
map: map,
|
|
246
|
+
path: [].concat(_toConsumableArray(polygon), [polygon[0]]),
|
|
247
|
+
color: "rgba(23,135,252,0.30)"
|
|
248
|
+
}), map && /*#__PURE__*/React.createElement(MapPolyline, {
|
|
249
|
+
map: map,
|
|
250
|
+
path: mapLine,
|
|
251
|
+
color: "#1890ff",
|
|
252
|
+
width: 3
|
|
253
|
+
}), map && /*#__PURE__*/React.createElement(MapPolyline, {
|
|
254
|
+
map: map,
|
|
255
|
+
path: mapLine,
|
|
256
|
+
color: "rgba(0,0,0,0)",
|
|
257
|
+
width: 10,
|
|
258
|
+
onClick: function onClick(e) {
|
|
259
|
+
handleClickLine1(e);
|
|
260
|
+
}
|
|
261
|
+
}), rightMenuShow && /*#__PURE__*/React.createElement(MapMarker, {
|
|
262
|
+
map: map,
|
|
263
|
+
position: rightMenuPos,
|
|
264
|
+
offset: [60, 0]
|
|
265
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
266
|
+
className: "com-markerRightMenu"
|
|
267
|
+
}, !polygonOk && polygon.length >= 3 && rightMarkerIndex === polygon.length - 1 && /*#__PURE__*/React.createElement("div", {
|
|
268
|
+
className: "btn-item",
|
|
269
|
+
onClickCapture: function onClickCapture(e) {
|
|
270
|
+
handlePolygonOk(e);
|
|
271
|
+
}
|
|
272
|
+
}, "\u5B8C\u6210"), /*#__PURE__*/React.createElement("div", {
|
|
273
|
+
className: "btn-item",
|
|
274
|
+
onClickCapture: handleRightMenuDeleteMarker
|
|
275
|
+
}, "\u5220\u9664"))));
|
|
276
|
+
});
|
|
277
|
+
export default Index;
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
4
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
// @ts-nocheck
|
|
12
|
+
import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
|
|
13
|
+
import { message } from 'antd';
|
|
14
|
+
import * as turf from '@turf/turf';
|
|
15
|
+
import { useGetState } from 'ahooks';
|
|
16
|
+
import wellknown from 'wellknown';
|
|
17
|
+
import MapMarker from "../MapMarker";
|
|
18
|
+
import MapPolyline from "../MapPolyline";
|
|
19
|
+
import { setFitView as _setFitView, deepClone } from "../utils";
|
|
20
|
+
import "../index.less";
|
|
21
|
+
|
|
22
|
+
// 计算点到线段距离的辅助函数
|
|
23
|
+
function pointToSegmentDistance(p, p1, p2) {
|
|
24
|
+
// 将经纬度转换为平面坐标（这里简单用经纬度差，适合小范围）
|
|
25
|
+
var x = p[0];
|
|
26
|
+
var y = p[1];
|
|
27
|
+
var x1 = p1[0];
|
|
28
|
+
var y1 = p1[1];
|
|
29
|
+
var x2 = p2[0];
|
|
30
|
+
var y2 = p2[1];
|
|
31
|
+
var A = x - x1;
|
|
32
|
+
var B = y - y1;
|
|
33
|
+
var C = x2 - x1;
|
|
34
|
+
var D = y2 - y1;
|
|
35
|
+
var dot = A * C + B * D;
|
|
36
|
+
var len_sq = C * C + D * D;
|
|
37
|
+
var param = -1;
|
|
38
|
+
if (len_sq !== 0) param = dot / len_sq;
|
|
39
|
+
var xx, yy;
|
|
40
|
+
if (param < 0) {
|
|
41
|
+
xx = x1;
|
|
42
|
+
yy = y1;
|
|
43
|
+
} else if (param > 1) {
|
|
44
|
+
xx = x2;
|
|
45
|
+
yy = y2;
|
|
46
|
+
} else {
|
|
47
|
+
xx = x1 + param * C;
|
|
48
|
+
yy = y1 + param * D;
|
|
49
|
+
}
|
|
50
|
+
var dx = x - xx;
|
|
51
|
+
var dy = y - yy;
|
|
52
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
53
|
+
}
|
|
54
|
+
var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
55
|
+
var map = props.map,
|
|
56
|
+
form = props.form;
|
|
57
|
+
var _useGetState = useGetState([]),
|
|
58
|
+
_useGetState2 = _slicedToArray(_useGetState, 3),
|
|
59
|
+
polygon = _useGetState2[0],
|
|
60
|
+
_setPolygon = _useGetState2[1],
|
|
61
|
+
getPolygon = _useGetState2[2]; // 代码copy的 先用这个 其实是polyline
|
|
62
|
+
|
|
63
|
+
useImperativeHandle(ref, function () {
|
|
64
|
+
return {
|
|
65
|
+
onMapClick: function onMapClick(e) {
|
|
66
|
+
_onMapClick(e);
|
|
67
|
+
},
|
|
68
|
+
setPolygon: function setPolygon(params) {
|
|
69
|
+
_setPolygon(params);
|
|
70
|
+
},
|
|
71
|
+
setFitView: function setFitView() {
|
|
72
|
+
var timer = setInterval(function () {
|
|
73
|
+
if (map) {
|
|
74
|
+
_setFitView(map, {
|
|
75
|
+
top: 200,
|
|
76
|
+
right: 200,
|
|
77
|
+
bottom: 200,
|
|
78
|
+
left: 200
|
|
79
|
+
});
|
|
80
|
+
clearInterval(timer);
|
|
81
|
+
}
|
|
82
|
+
}, 100);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
useEffect(function () {
|
|
87
|
+
if (polygon.length >= 2) {
|
|
88
|
+
form.setFieldState('wktPointsStr', function (state) {
|
|
89
|
+
state.selfErrors = null;
|
|
90
|
+
});
|
|
91
|
+
var path = _toConsumableArray(polygon);
|
|
92
|
+
var length = turf.length(turf.lineString(path), {
|
|
93
|
+
units: 'kilometers'
|
|
94
|
+
}).toFixed(2);
|
|
95
|
+
var wkt = wellknown.stringify({
|
|
96
|
+
type: 'LineString',
|
|
97
|
+
coordinates: path
|
|
98
|
+
});
|
|
99
|
+
var match = wkt.match(/^LINESTRING \((.+)\)$/);
|
|
100
|
+
var wktPointsStr = match ? match[1] : '';
|
|
101
|
+
form.setValues({
|
|
102
|
+
length: length,
|
|
103
|
+
wktPointsStr: wktPointsStr
|
|
104
|
+
});
|
|
105
|
+
} else {
|
|
106
|
+
form.setValues({
|
|
107
|
+
length: undefined,
|
|
108
|
+
wktPointsStr: undefined
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}, [polygon]);
|
|
112
|
+
function _onMapClick(e) {
|
|
113
|
+
var pos = [Number(e.lngLat.lng.toFixed(6)), Number(e.lngLat.lat.toFixed(6))];
|
|
114
|
+
setRightMenuShow(false);
|
|
115
|
+
var copy = deepClone(getPolygon());
|
|
116
|
+
copy.push(pos);
|
|
117
|
+
console.log(copy);
|
|
118
|
+
_setPolygon(copy);
|
|
119
|
+
}
|
|
120
|
+
var onPointDragging = function onPointDragging(e, index) {
|
|
121
|
+
setRightMenuShow(false);
|
|
122
|
+
var pos = [Number(e.target._lngLat.lng.toFixed(6)), Number(e.target._lngLat.lat.toFixed(6))];
|
|
123
|
+
var copy = deepClone(getPolygon());
|
|
124
|
+
copy[index] = pos;
|
|
125
|
+
_setPolygon(copy);
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
// 点击线添加节点
|
|
129
|
+
|
|
130
|
+
function handleClickLine(e) {
|
|
131
|
+
setRightMenuShow(false);
|
|
132
|
+
var pos = [Number(e.lngLat.lng.toFixed(6)), Number(e.lngLat.lat.toFixed(6))];
|
|
133
|
+
// 找到距离点击点最近的折线段，插入点
|
|
134
|
+
var minDistance = Infinity;
|
|
135
|
+
var insertIndex = 0;
|
|
136
|
+
var polygon = getPolygon();
|
|
137
|
+
for (var i = 0; i < polygon.length - 1; i++) {
|
|
138
|
+
var segmentStart = polygon[i];
|
|
139
|
+
var segmentEnd = polygon[i + 1];
|
|
140
|
+
|
|
141
|
+
// 计算点击点到线段距离
|
|
142
|
+
var dist = pointToSegmentDistance(pos, segmentStart, segmentEnd);
|
|
143
|
+
if (dist < minDistance) {
|
|
144
|
+
minDistance = dist;
|
|
145
|
+
insertIndex = i + 1;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
var copy = deepClone(getPolygon());
|
|
149
|
+
copy.splice(insertIndex, 0, pos);
|
|
150
|
+
_setPolygon(copy);
|
|
151
|
+
}
|
|
152
|
+
var deleteMarker = function deleteMarker(rightMarkerIndex) {
|
|
153
|
+
setRightMenuShow(false);
|
|
154
|
+
if (polygon.length === 1) {
|
|
155
|
+
return message.warning('至少保留一个点');
|
|
156
|
+
}
|
|
157
|
+
var copy = deepClone(getPolygon());
|
|
158
|
+
copy.splice(rightMarkerIndex, 1);
|
|
159
|
+
_setPolygon(copy);
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
// 右键操作 begin
|
|
163
|
+
var _useState = useState(false),
|
|
164
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
165
|
+
rightMenuShow = _useState2[0],
|
|
166
|
+
setRightMenuShow = _useState2[1];
|
|
167
|
+
var _useState3 = useState(-1),
|
|
168
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
169
|
+
rightMarkerIndex = _useState4[0],
|
|
170
|
+
setRightMarkerIndex = _useState4[1];
|
|
171
|
+
var _useState5 = useState([]),
|
|
172
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
173
|
+
rightMenuPos = _useState6[0],
|
|
174
|
+
setRightMenuPos = _useState6[1];
|
|
175
|
+
function handleMarkerRightClick(e, index) {
|
|
176
|
+
setRightMarkerIndex(index);
|
|
177
|
+
setRightMenuPos(getPolygon()[index]);
|
|
178
|
+
setRightMenuShow(true);
|
|
179
|
+
}
|
|
180
|
+
function handleRightMenuDeleteMarker(e) {
|
|
181
|
+
e.stopPropagation();
|
|
182
|
+
deleteMarker(rightMarkerIndex);
|
|
183
|
+
}
|
|
184
|
+
// 右键操作 end
|
|
185
|
+
|
|
186
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, map && polygon.map(function (item, index) {
|
|
187
|
+
return /*#__PURE__*/React.createElement(MapMarker, {
|
|
188
|
+
key: index,
|
|
189
|
+
map: map,
|
|
190
|
+
position: item,
|
|
191
|
+
draggable: true,
|
|
192
|
+
onDragging: function onDragging(e) {
|
|
193
|
+
return onPointDragging(e, index);
|
|
194
|
+
},
|
|
195
|
+
onRightClick: function onRightClick(e) {
|
|
196
|
+
handleMarkerRightClick(e, index);
|
|
197
|
+
}
|
|
198
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
199
|
+
className: "com-linePointMaker"
|
|
200
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
201
|
+
className: "com-linePointMaker-inner",
|
|
202
|
+
style: {
|
|
203
|
+
borderColor: '#62ccff'
|
|
204
|
+
}
|
|
205
|
+
})));
|
|
206
|
+
}), map && /*#__PURE__*/React.createElement(MapPolyline, {
|
|
207
|
+
map: map,
|
|
208
|
+
path: polygon,
|
|
209
|
+
color: "#62ccff",
|
|
210
|
+
width: 6,
|
|
211
|
+
onClick: function onClick(e) {
|
|
212
|
+
handleClickLine(e);
|
|
213
|
+
}
|
|
214
|
+
}), rightMenuShow && /*#__PURE__*/React.createElement(MapMarker, {
|
|
215
|
+
map: map,
|
|
216
|
+
position: rightMenuPos,
|
|
217
|
+
offset: [60, 0]
|
|
218
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
219
|
+
className: "com-markerRightMenu"
|
|
220
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
221
|
+
className: "btn-item",
|
|
222
|
+
onClickCapture: handleRightMenuDeleteMarker
|
|
223
|
+
}, "\u5220\u9664"))));
|
|
224
|
+
});
|
|
225
|
+
export default Index;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.com-linePointMaker {
|
|
2
|
+
width: 20px;
|
|
3
|
+
height: 20px;
|
|
4
|
+
background: transparent;
|
|
5
|
+
display: flex;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-items: center;
|
|
8
|
+
border-radius: 50%;
|
|
9
|
+
cursor: move;
|
|
10
|
+
&:hover {
|
|
11
|
+
background-color: #def4ff;
|
|
12
|
+
}
|
|
13
|
+
.com-linePointMaker-inner {
|
|
14
|
+
width: 12px;
|
|
15
|
+
height: 12px;
|
|
16
|
+
background-color: #fff;
|
|
17
|
+
border: 1px solid #62ccff;
|
|
18
|
+
border-radius: 50%;
|
|
19
|
+
&:hover {
|
|
20
|
+
border: 1px solid #62ccff;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.com-markerRightMenu {
|
|
26
|
+
width: 104px;
|
|
27
|
+
background: #ffffff;
|
|
28
|
+
border: 1px solid #dcdfe6;
|
|
29
|
+
border-radius: 4px;
|
|
30
|
+
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
|
|
31
|
+
.btn-item {
|
|
32
|
+
height: 32px;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
padding: 0 12px;
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
color: #333;
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
&:hover {
|
|
42
|
+
background-color: rgb(246, 247, 248);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deepinnet-components/pc",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.45",
|
|
4
4
|
"description": "A react library developed with dumi",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"@formily/antd-v5": "^1.2.3",
|
|
49
49
|
"@formily/core": "^2.3.2",
|
|
50
50
|
"@formily/react": "^2.3.2",
|
|
51
|
+
"@turf/turf": "^7.3.1",
|
|
51
52
|
"@types/crypto-js": "^4.2.2",
|
|
52
53
|
"@types/md5": "^2.3.5",
|
|
53
54
|
"@types/shortid": "^2.2.0",
|