@deepinnet-components/pc 0.0.51 → 0.0.52
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.
|
Binary file
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import { Map2D } from "../../..";
|
|
8
|
+
import { Button, Space, message } from 'antd';
|
|
9
|
+
import React, { useEffect, useState } from 'react';
|
|
10
|
+
// @ts-ignore
|
|
11
|
+
|
|
12
|
+
var Map = Map2D.Map,
|
|
13
|
+
MapMarker = Map2D.MapMarker,
|
|
14
|
+
MapPolygon = Map2D.MapPolygon,
|
|
15
|
+
Utils = Map2D.Utils;
|
|
16
|
+
var App = function App() {
|
|
17
|
+
var _useState = useState('map' + Math.random()),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
19
|
+
mapId = _useState2[0];
|
|
20
|
+
var _useState3 = useState(),
|
|
21
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
22
|
+
map = _useState4[0],
|
|
23
|
+
setMap = _useState4[1];
|
|
24
|
+
var _useState5 = useState(),
|
|
25
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
26
|
+
polygon1 = _useState6[0],
|
|
27
|
+
setPolygon1 = _useState6[1];
|
|
28
|
+
var _useState7 = useState({}),
|
|
29
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
30
|
+
polygon1Center = _useState8[0],
|
|
31
|
+
setPolygon1Center = _useState8[1];
|
|
32
|
+
useEffect(function () {
|
|
33
|
+
var polygon1 = [[118.822923, 28.985346], [118.832193, 28.985271], [118.832107, 28.976862], [118.823266, 28.977087], [118.822923, 28.985346]];
|
|
34
|
+
setPolygon1(polygon1);
|
|
35
|
+
setPolygon1Center({
|
|
36
|
+
centroid: Utils.getPolygonCenter(polygon1, 'centroid'),
|
|
37
|
+
center: Utils.getPolygonCenter(polygon1, 'center'),
|
|
38
|
+
centerOfMass: Utils.getPolygonCenter(polygon1, 'centerOfMass')
|
|
39
|
+
});
|
|
40
|
+
}, []);
|
|
41
|
+
var _useState9 = useState(),
|
|
42
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
43
|
+
polygon2 = _useState10[0],
|
|
44
|
+
setPolygon2 = _useState10[1];
|
|
45
|
+
var _useState11 = useState({}),
|
|
46
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
47
|
+
polygon2Center = _useState12[0],
|
|
48
|
+
setPolygon2Center = _useState12[1];
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
var polygon2 = [[118.862233, 28.982493], [118.873477, 28.982793], [118.883176, 28.982643], [118.889356, 28.979114], [118.889442, 28.976636], [118.888498, 28.965823], [118.886609, 28.961543], [118.877425, 28.960792], [118.861289, 28.960792], [118.870902, 28.96312], [118.879056, 28.963571], [118.882919, 28.973408], [118.882404, 28.978589], [118.872361, 28.980315], [118.862233, 28.982493]];
|
|
51
|
+
setPolygon2(polygon2);
|
|
52
|
+
setPolygon2Center({
|
|
53
|
+
centroid: Utils.getPolygonCenter(polygon2, 'centroid'),
|
|
54
|
+
pointOnFeature: Utils.getPolygonCenter(polygon2, 'pointOnFeature'),
|
|
55
|
+
centerOfMass: Utils.getPolygonCenter(polygon2, 'centerOfMass')
|
|
56
|
+
});
|
|
57
|
+
}, []);
|
|
58
|
+
var _useState13 = useState(false),
|
|
59
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
60
|
+
show = _useState14[0],
|
|
61
|
+
setShow = _useState14[1]; // 这是测试代码
|
|
62
|
+
|
|
63
|
+
if (!show) {
|
|
64
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
65
|
+
onClick: function onClick() {
|
|
66
|
+
setShow(true);
|
|
67
|
+
}
|
|
68
|
+
}, "\u5C55\u793A\u6848\u4F8B");
|
|
69
|
+
}
|
|
70
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
style: {
|
|
72
|
+
width: '100%',
|
|
73
|
+
height: 500
|
|
74
|
+
}
|
|
75
|
+
}, /*#__PURE__*/React.createElement(Map, {
|
|
76
|
+
setMap: setMap,
|
|
77
|
+
id: mapId
|
|
78
|
+
// onClick={(e: any) => {
|
|
79
|
+
// console.log([
|
|
80
|
+
// Number(e.lngLat.lng.toFixed(6)),
|
|
81
|
+
// Number(e.lngLat.lat.toFixed(6)),
|
|
82
|
+
// ]);
|
|
83
|
+
// }}
|
|
84
|
+
}), !!map && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapPolygon, {
|
|
85
|
+
map: map,
|
|
86
|
+
path: polygon1
|
|
87
|
+
}), /*#__PURE__*/React.createElement(MapMarker, {
|
|
88
|
+
map: map,
|
|
89
|
+
position: polygon1Center.centroid
|
|
90
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
91
|
+
style: {
|
|
92
|
+
width: 4,
|
|
93
|
+
height: 4,
|
|
94
|
+
background: '#f00',
|
|
95
|
+
borderRadius: '50%'
|
|
96
|
+
},
|
|
97
|
+
onClick: function onClick() {
|
|
98
|
+
message.info('centroid中心');
|
|
99
|
+
}
|
|
100
|
+
})), /*#__PURE__*/React.createElement(MapMarker, {
|
|
101
|
+
map: map,
|
|
102
|
+
position: polygon1Center.center
|
|
103
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
104
|
+
style: {
|
|
105
|
+
width: 4,
|
|
106
|
+
height: 4,
|
|
107
|
+
background: '#f00',
|
|
108
|
+
borderRadius: '50%'
|
|
109
|
+
},
|
|
110
|
+
onClick: function onClick() {
|
|
111
|
+
message.info('center中心');
|
|
112
|
+
}
|
|
113
|
+
})), /*#__PURE__*/React.createElement(MapMarker, {
|
|
114
|
+
map: map,
|
|
115
|
+
position: polygon1Center.centerOfMass
|
|
116
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
117
|
+
style: {
|
|
118
|
+
width: 4,
|
|
119
|
+
height: 4,
|
|
120
|
+
background: '#f00',
|
|
121
|
+
borderRadius: '50%'
|
|
122
|
+
},
|
|
123
|
+
onClick: function onClick() {
|
|
124
|
+
message.info('centerOfMass中心');
|
|
125
|
+
}
|
|
126
|
+
})), /*#__PURE__*/React.createElement(MapPolygon, {
|
|
127
|
+
map: map,
|
|
128
|
+
path: polygon2
|
|
129
|
+
}), /*#__PURE__*/React.createElement(MapMarker, {
|
|
130
|
+
map: map,
|
|
131
|
+
position: polygon2Center.centroid
|
|
132
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
133
|
+
style: {
|
|
134
|
+
width: 4,
|
|
135
|
+
height: 4,
|
|
136
|
+
background: '#f00',
|
|
137
|
+
borderRadius: '50%'
|
|
138
|
+
},
|
|
139
|
+
onClick: function onClick() {
|
|
140
|
+
message.info('centroid中心');
|
|
141
|
+
}
|
|
142
|
+
})), /*#__PURE__*/React.createElement(MapMarker, {
|
|
143
|
+
map: map,
|
|
144
|
+
position: polygon2Center.pointOnFeature
|
|
145
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
146
|
+
style: {
|
|
147
|
+
width: 4,
|
|
148
|
+
height: 4,
|
|
149
|
+
background: '#f00',
|
|
150
|
+
borderRadius: '50%'
|
|
151
|
+
},
|
|
152
|
+
onClick: function onClick() {
|
|
153
|
+
message.info('pointOnFeature中心');
|
|
154
|
+
}
|
|
155
|
+
})), /*#__PURE__*/React.createElement(MapMarker, {
|
|
156
|
+
map: map,
|
|
157
|
+
position: polygon2Center.centerOfMass
|
|
158
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
159
|
+
style: {
|
|
160
|
+
width: 4,
|
|
161
|
+
height: 4,
|
|
162
|
+
background: '#f00',
|
|
163
|
+
borderRadius: '50%'
|
|
164
|
+
},
|
|
165
|
+
onClick: function onClick() {
|
|
166
|
+
message.info('centerOfMass中心');
|
|
167
|
+
}
|
|
168
|
+
})))), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
|
|
169
|
+
type: "primary",
|
|
170
|
+
onClick: function onClick() {}
|
|
171
|
+
}, "btn")));
|
|
172
|
+
};
|
|
173
|
+
export default App;
|
package/dist/Map2D/utils.d.ts
CHANGED
|
@@ -10,3 +10,4 @@ export declare const deepClone: (obj: any) => any;
|
|
|
10
10
|
export declare const getBase64FromLocalImage: (url: any) => Promise<unknown>;
|
|
11
11
|
export declare const getPolylineLength: (params: any) => number | Error;
|
|
12
12
|
export declare const getPolygonArea: (params: any) => number | Error;
|
|
13
|
+
export declare const getPolygonCenter: (params: any, type?: string) => any;
|
package/dist/Map2D/utils.js
CHANGED
|
@@ -309,4 +309,19 @@ export var getPolygonArea = function getPolygonArea(params) {
|
|
|
309
309
|
return _area;
|
|
310
310
|
}
|
|
311
311
|
return new Error('参数错误');
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
// 计算面的中心点
|
|
315
|
+
export var getPolygonCenter = function getPolygonCenter(params) {
|
|
316
|
+
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'centroid';
|
|
317
|
+
var turfPolygon;
|
|
318
|
+
if (Array.isArray(params)) {
|
|
319
|
+
turfPolygon = turf.polygon([params]);
|
|
320
|
+
}
|
|
321
|
+
if (typeof params === 'string' && params.startsWith('POLYGON')) {
|
|
322
|
+
var geojson = wellknown.parse(params);
|
|
323
|
+
var path = geojson.coordinates[0];
|
|
324
|
+
turfPolygon = turf.polygon([path]);
|
|
325
|
+
}
|
|
326
|
+
return turf[type](turfPolygon).geometry.coordinates;
|
|
312
327
|
};
|