@deepinnet-components/pc 0.0.49 → 0.0.50
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/dist/Map2D/MapPolyline/index.js +8 -7
- package/dist/Map2D/PolygonEdit/index.js +2 -6
- package/dist/Map2D/PolylineEdit/index.js +3 -5
- package/dist/Map2D/demo/mapPolyline.js +2 -2
- package/dist/Map2D/demo/utilsDemo/getPolygonArea.d.ts +3 -0
- package/dist/Map2D/demo/utilsDemo/getPolygonArea.js +31 -0
- package/dist/Map2D/demo/utilsDemo/getPolylineLength.d.ts +3 -0
- package/dist/Map2D/demo/utilsDemo/getPolylineLength.js +31 -0
- package/dist/Map2D/demo/utilsDemo/setFitView.d.ts +3 -0
- package/dist/Map2D/demo/utilsDemo/setFitView.js +95 -0
- package/dist/Map2D/demo/utilsDemo/setFitViewByPolylineOrPolygon.d.ts +3 -0
- package/dist/Map2D/demo/utilsDemo/setFitViewByPolylineOrPolygon.js +79 -0
- package/dist/Map2D/utils.d.ts +2 -0
- package/dist/Map2D/utils.js +40 -4
- package/package.json +1 -1
|
@@ -54,7 +54,7 @@ var MapPolyline = function MapPolyline(props) {
|
|
|
54
54
|
multi = _props$multi === void 0 ? false : _props$multi,
|
|
55
55
|
_props$isGetColor = props.isGetColor,
|
|
56
56
|
isGetColor = _props$isGetColor === void 0 ? false : _props$isGetColor;
|
|
57
|
-
var _useState = useState('
|
|
57
|
+
var _useState = useState('customPolyline::' + (props.id || shortid.generate())),
|
|
58
58
|
_useState2 = _slicedToArray(_useState, 1),
|
|
59
59
|
id = _useState2[0];
|
|
60
60
|
var outlineId = id + '_outline';
|
|
@@ -307,11 +307,11 @@ var MapPolyline = function MapPolyline(props) {
|
|
|
307
307
|
var features = map.queryRenderedFeatures(e.point);
|
|
308
308
|
if (!features.length) return;
|
|
309
309
|
var item = features.find(function (item) {
|
|
310
|
-
return item.source.includes('
|
|
310
|
+
return item.source.includes('customPolyline::');
|
|
311
311
|
});
|
|
312
312
|
if (item && item.source === id) {
|
|
313
313
|
var _props$onMouseenter;
|
|
314
|
-
(_props$onMouseenter = props.onMouseenter) === null || _props$onMouseenter === void 0 || _props$onMouseenter.call(props,
|
|
314
|
+
(_props$onMouseenter = props.onMouseenter) === null || _props$onMouseenter === void 0 || _props$onMouseenter.call(props, item, e);
|
|
315
315
|
}
|
|
316
316
|
}
|
|
317
317
|
function onMouseleave(e) {
|
|
@@ -322,13 +322,14 @@ var MapPolyline = function MapPolyline(props) {
|
|
|
322
322
|
var _e$originalEvent, _e$originalEvent$stop;
|
|
323
323
|
(_e$originalEvent = e.originalEvent) === null || _e$originalEvent === void 0 || (_e$originalEvent$stop = _e$originalEvent.stopPropagation) === null || _e$originalEvent$stop === void 0 || _e$originalEvent$stop.call(_e$originalEvent);
|
|
324
324
|
var features = map.queryRenderedFeatures(e.point);
|
|
325
|
+
console.log(features);
|
|
325
326
|
if (!features.length) return;
|
|
326
327
|
var item = features.find(function (item) {
|
|
327
|
-
return item.source.includes('
|
|
328
|
+
return item.source.includes('customPolyline::');
|
|
328
329
|
});
|
|
329
330
|
if (item && item.source === id) {
|
|
330
331
|
var _props$onClick;
|
|
331
|
-
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props,
|
|
332
|
+
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, item, e);
|
|
332
333
|
}
|
|
333
334
|
}
|
|
334
335
|
function onRightClick(e) {
|
|
@@ -337,11 +338,11 @@ var MapPolyline = function MapPolyline(props) {
|
|
|
337
338
|
var features = map.queryRenderedFeatures(e.point);
|
|
338
339
|
if (!features.length) return;
|
|
339
340
|
var item = features.find(function (item) {
|
|
340
|
-
return item.source.includes('
|
|
341
|
+
return item.source.includes('customPolyline::');
|
|
341
342
|
});
|
|
342
343
|
if (item && item.source === id) {
|
|
343
344
|
var _props$onRightClick;
|
|
344
|
-
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props,
|
|
345
|
+
(_props$onRightClick = props.onRightClick) === null || _props$onRightClick === void 0 || _props$onRightClick.call(props, item, e);
|
|
345
346
|
}
|
|
346
347
|
}
|
|
347
348
|
|
|
@@ -11,13 +11,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
11
11
|
// @ts-nocheck
|
|
12
12
|
import React, { useState, useEffect, useImperativeHandle, forwardRef, useMemo } from 'react';
|
|
13
13
|
import { message } from 'antd';
|
|
14
|
-
import * as turf from '@turf/turf';
|
|
15
14
|
import { useGetState } from 'ahooks';
|
|
16
15
|
import wellknown from 'wellknown';
|
|
17
16
|
import MapMarker from "../MapMarker";
|
|
18
17
|
import MapPolyline from "../MapPolyline";
|
|
19
18
|
import MapPolygon from "../MapPolygon";
|
|
20
|
-
import { setFitView as _setFitView, deepClone } from "../utils";
|
|
19
|
+
import { setFitView as _setFitView, deepClone, getPolygonArea } from "../utils";
|
|
21
20
|
import "../index.less";
|
|
22
21
|
|
|
23
22
|
// 计算点到线段距离的辅助函数
|
|
@@ -99,8 +98,7 @@ var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
99
98
|
if (onDataChange) {
|
|
100
99
|
if (polygon.length >= 3) {
|
|
101
100
|
var path = [].concat(_toConsumableArray(polygon), [polygon[0]]);
|
|
102
|
-
var
|
|
103
|
-
var area = (turf.area(turfPolygon) / 1000000).toFixed(2);
|
|
101
|
+
var area = getPolygonArea(path);
|
|
104
102
|
var wkt = wellknown.stringify({
|
|
105
103
|
type: 'Polygon',
|
|
106
104
|
coordinates: [path]
|
|
@@ -142,8 +140,6 @@ var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
142
140
|
// 找到距离点击点最近的折线段,插入点
|
|
143
141
|
var minDistance = Infinity;
|
|
144
142
|
var insertIndex = 0;
|
|
145
|
-
|
|
146
|
-
// POLYGON ((118.859744 28.979189, 118.870473 28.968001, 118.846526 28.964922, 118.859744 28.979189))
|
|
147
143
|
var polygon = getPolygon();
|
|
148
144
|
polygon.push(polygon[0]);
|
|
149
145
|
for (var i = 0; i < polygon.length - 1; i++) {
|
|
@@ -9,14 +9,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
9
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
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
11
|
// @ts-nocheck
|
|
12
|
-
|
|
12
|
+
|
|
13
13
|
import { useGetState } from 'ahooks';
|
|
14
14
|
import { message } from 'antd';
|
|
15
15
|
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
|
|
16
16
|
import wellknown from 'wellknown';
|
|
17
17
|
import MapMarker from "../MapMarker";
|
|
18
18
|
import MapPolyline from "../MapPolyline";
|
|
19
|
-
import { deepClone, setFitView as _setFitView } from "../utils";
|
|
19
|
+
import { deepClone, setFitView as _setFitView, getPolylineLength } from "../utils";
|
|
20
20
|
import "../index.less";
|
|
21
21
|
|
|
22
22
|
// 计算点到线段距离的辅助函数
|
|
@@ -87,9 +87,7 @@ var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
87
87
|
if (onDataChange) {
|
|
88
88
|
if (polygon.length >= 2) {
|
|
89
89
|
var path = _toConsumableArray(polygon);
|
|
90
|
-
var length =
|
|
91
|
-
units: 'kilometers'
|
|
92
|
-
});
|
|
90
|
+
var length = getPolylineLength(path);
|
|
93
91
|
var wkt = wellknown.stringify({
|
|
94
92
|
type: 'LineString',
|
|
95
93
|
coordinates: path
|
|
@@ -59,8 +59,8 @@ var App = function App() {
|
|
|
59
59
|
map: map,
|
|
60
60
|
path: path,
|
|
61
61
|
color: '#f00',
|
|
62
|
-
onClick: function onClick(e) {
|
|
63
|
-
console.log(e);
|
|
62
|
+
onClick: function onClick(feature, e) {
|
|
63
|
+
console.log(feature, e);
|
|
64
64
|
}
|
|
65
65
|
}), /*#__PURE__*/React.createElement(MapPolyline, {
|
|
66
66
|
map: map,
|
|
@@ -0,0 +1,31 @@
|
|
|
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 React, { useEffect, useState } from 'react';
|
|
9
|
+
var Utils = Map2D.Utils;
|
|
10
|
+
var App = function App() {
|
|
11
|
+
var _useState = useState(),
|
|
12
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
13
|
+
area1 = _useState2[0],
|
|
14
|
+
setArea1 = _useState2[1];
|
|
15
|
+
var _useState3 = useState(),
|
|
16
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
17
|
+
area2 = _useState4[0],
|
|
18
|
+
setArea2 = _useState4[1];
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
var area1 = Utils.getPolygonArea('POLYGON ((118.855024 28.977012, 118.872533 28.976937, 118.859143 28.965523, 118.855024 28.977012))');
|
|
21
|
+
setArea1(area1);
|
|
22
|
+
var area2 = Utils.getPolygonArea([[118.855024, 28.977012], [118.872533, 28.976937], [118.859143, 28.965523], [118.855024, 28.977012]]);
|
|
23
|
+
setArea2(area2);
|
|
24
|
+
}, []);
|
|
25
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
style: {
|
|
27
|
+
color: '#f00'
|
|
28
|
+
}
|
|
29
|
+
}, "\u8BF7\u5C55\u5F00\u4E0B\u9762\u4EE3\u7801\u67E5\u770B"), /*#__PURE__*/React.createElement("div", null, area1, "km2"), /*#__PURE__*/React.createElement("div", null, area2, "km2"));
|
|
30
|
+
};
|
|
31
|
+
export default App;
|
|
@@ -0,0 +1,31 @@
|
|
|
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 React, { useEffect, useState } from 'react';
|
|
8
|
+
import { Map2D } from "../../..";
|
|
9
|
+
var Utils = Map2D.Utils;
|
|
10
|
+
var App = function App() {
|
|
11
|
+
var _useState = useState(),
|
|
12
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
13
|
+
length1 = _useState2[0],
|
|
14
|
+
setLength1 = _useState2[1];
|
|
15
|
+
var _useState3 = useState(),
|
|
16
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
17
|
+
length2 = _useState4[0],
|
|
18
|
+
setLength2 = _useState4[1];
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
var length1 = Utils.getPolylineLength('LINESTRING (118.844724 28.976862, 118.863092 28.976787, 118.863092 28.966875, 118.875795 28.966649)');
|
|
21
|
+
setLength1(length1);
|
|
22
|
+
var length2 = Utils.getPolylineLength([[118.844724, 28.976862], [118.863092, 28.976787], [118.863092, 28.966875], [118.875795, 28.966649]]);
|
|
23
|
+
setLength2(length2);
|
|
24
|
+
}, []);
|
|
25
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
style: {
|
|
27
|
+
color: '#f00'
|
|
28
|
+
}
|
|
29
|
+
}, "\u8BF7\u5C55\u5F00\u4E0B\u9762\u4EE3\u7801\u67E5\u770B"), /*#__PURE__*/React.createElement("div", null, length1, "km"), /*#__PURE__*/React.createElement("div", null, length2, "km"));
|
|
30
|
+
};
|
|
31
|
+
export default App;
|
|
@@ -0,0 +1,95 @@
|
|
|
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 } from 'antd';
|
|
9
|
+
import React, { useState } from 'react';
|
|
10
|
+
var Map = Map2D.Map,
|
|
11
|
+
MapMarker = Map2D.MapMarker,
|
|
12
|
+
MapPolyline = Map2D.MapPolyline,
|
|
13
|
+
MapPolygon = Map2D.MapPolygon,
|
|
14
|
+
Utils = Map2D.Utils;
|
|
15
|
+
var App = function App() {
|
|
16
|
+
var _useState = useState('map' + Math.random()),
|
|
17
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
18
|
+
mapId = _useState2[0];
|
|
19
|
+
var _useState3 = useState(),
|
|
20
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
21
|
+
map = _useState4[0],
|
|
22
|
+
setMap = _useState4[1];
|
|
23
|
+
var _useState5 = useState([118.837342, 28.97949]),
|
|
24
|
+
_useState6 = _slicedToArray(_useState5, 1),
|
|
25
|
+
markerPosition = _useState6[0];
|
|
26
|
+
var _useState7 = useState([[118.839574, 28.95823], [118.852454, 28.936359], [118.877907, 28.958498]]),
|
|
27
|
+
_useState8 = _slicedToArray(_useState7, 1),
|
|
28
|
+
polyline = _useState8[0];
|
|
29
|
+
var _useState9 = useState([[118.877168, 28.978363], [118.887897, 28.978288], [118.887124, 28.970855], [118.877168, 28.978363]]),
|
|
30
|
+
_useState10 = _slicedToArray(_useState9, 1),
|
|
31
|
+
polygon = _useState10[0];
|
|
32
|
+
function handleSetFitView() {
|
|
33
|
+
Utils.setFitView(map, 50);
|
|
34
|
+
}
|
|
35
|
+
function handleSetFitView2() {
|
|
36
|
+
Utils.setFitView(map, 100);
|
|
37
|
+
}
|
|
38
|
+
function handleSetFitView3() {
|
|
39
|
+
Utils.setFitView(map, {
|
|
40
|
+
top: 100,
|
|
41
|
+
right: 100,
|
|
42
|
+
bottom: 100,
|
|
43
|
+
left: 400
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
var _useState11 = useState(false),
|
|
47
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
48
|
+
show = _useState12[0],
|
|
49
|
+
setShow = _useState12[1]; // 这是测试代码
|
|
50
|
+
|
|
51
|
+
if (!show) {
|
|
52
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
53
|
+
onClick: function onClick() {
|
|
54
|
+
setShow(true);
|
|
55
|
+
}
|
|
56
|
+
}, "\u5C55\u793A\u6848\u4F8B");
|
|
57
|
+
}
|
|
58
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
style: {
|
|
60
|
+
width: '100%',
|
|
61
|
+
height: 500
|
|
62
|
+
}
|
|
63
|
+
}, /*#__PURE__*/React.createElement(Map, {
|
|
64
|
+
setMap: setMap,
|
|
65
|
+
id: mapId
|
|
66
|
+
}), !!map && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapMarker, {
|
|
67
|
+
map: map,
|
|
68
|
+
position: markerPosition
|
|
69
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
style: {
|
|
71
|
+
width: 80,
|
|
72
|
+
height: 80,
|
|
73
|
+
background: '#f00'
|
|
74
|
+
}
|
|
75
|
+
})), /*#__PURE__*/React.createElement(MapPolyline, {
|
|
76
|
+
map: map,
|
|
77
|
+
path: polyline,
|
|
78
|
+
color: '#f00'
|
|
79
|
+
}), /*#__PURE__*/React.createElement(MapPolygon, {
|
|
80
|
+
map: map,
|
|
81
|
+
path: polygon,
|
|
82
|
+
color: '#f00',
|
|
83
|
+
opacity: 0.5
|
|
84
|
+
}))), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
|
|
85
|
+
type: "primary",
|
|
86
|
+
onClick: handleSetFitView
|
|
87
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E941"), /*#__PURE__*/React.createElement(Button, {
|
|
88
|
+
type: "primary",
|
|
89
|
+
onClick: handleSetFitView2
|
|
90
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E942"), /*#__PURE__*/React.createElement(Button, {
|
|
91
|
+
type: "primary",
|
|
92
|
+
onClick: handleSetFitView3
|
|
93
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E943")));
|
|
94
|
+
};
|
|
95
|
+
export default App;
|
|
@@ -0,0 +1,79 @@
|
|
|
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 } from 'antd';
|
|
9
|
+
import React, { useState } from 'react';
|
|
10
|
+
var Map = Map2D.Map,
|
|
11
|
+
MapPolyline = Map2D.MapPolyline,
|
|
12
|
+
MapPolygon = Map2D.MapPolygon,
|
|
13
|
+
Utils = Map2D.Utils;
|
|
14
|
+
var App = function App() {
|
|
15
|
+
var _useState = useState('map' + Math.random()),
|
|
16
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
17
|
+
mapId = _useState2[0];
|
|
18
|
+
var _useState3 = useState(),
|
|
19
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
20
|
+
map = _useState4[0],
|
|
21
|
+
setMap = _useState4[1];
|
|
22
|
+
var _useState5 = useState([[118.839574, 28.95823], [118.852454, 28.936359], [118.877907, 28.958498]]),
|
|
23
|
+
_useState6 = _slicedToArray(_useState5, 1),
|
|
24
|
+
polyline = _useState6[0];
|
|
25
|
+
var _useState7 = useState([[118.877168, 28.978363], [118.887897, 28.978288], [118.887124, 28.970855], [118.877168, 28.978363]]),
|
|
26
|
+
_useState8 = _slicedToArray(_useState7, 1),
|
|
27
|
+
polygon = _useState8[0];
|
|
28
|
+
function handleSetFitView() {
|
|
29
|
+
Utils.setFitViewByPolylineOrPolygon(map, 100, ['customPolyline::polyline1']);
|
|
30
|
+
}
|
|
31
|
+
function handleSetFitView2() {
|
|
32
|
+
Utils.setFitViewByPolylineOrPolygon(map, 100, ['customPolygon::polygon1']);
|
|
33
|
+
}
|
|
34
|
+
function handleSetFitView3() {
|
|
35
|
+
Utils.setFitViewByPolylineOrPolygon(map, 100, ['customPolyline::polyline1', 'customPolygon::polygon1']);
|
|
36
|
+
}
|
|
37
|
+
var _useState9 = useState(false),
|
|
38
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
39
|
+
show = _useState10[0],
|
|
40
|
+
setShow = _useState10[1]; // 这是测试代码
|
|
41
|
+
|
|
42
|
+
if (!show) {
|
|
43
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
44
|
+
onClick: function onClick() {
|
|
45
|
+
setShow(true);
|
|
46
|
+
}
|
|
47
|
+
}, "\u5C55\u793A\u6848\u4F8B");
|
|
48
|
+
}
|
|
49
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
style: {
|
|
51
|
+
width: '100%',
|
|
52
|
+
height: 500
|
|
53
|
+
}
|
|
54
|
+
}, /*#__PURE__*/React.createElement(Map, {
|
|
55
|
+
setMap: setMap,
|
|
56
|
+
id: mapId
|
|
57
|
+
}), !!map && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MapPolyline, {
|
|
58
|
+
map: map,
|
|
59
|
+
path: polyline,
|
|
60
|
+
color: '#f00',
|
|
61
|
+
id: "polyline1"
|
|
62
|
+
}), /*#__PURE__*/React.createElement(MapPolygon, {
|
|
63
|
+
map: map,
|
|
64
|
+
path: polygon,
|
|
65
|
+
color: '#f00',
|
|
66
|
+
opacity: 0.5,
|
|
67
|
+
id: "polygon1"
|
|
68
|
+
}))), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
|
|
69
|
+
type: "primary",
|
|
70
|
+
onClick: handleSetFitView
|
|
71
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E94 - \u7EBF"), /*#__PURE__*/React.createElement(Button, {
|
|
72
|
+
type: "primary",
|
|
73
|
+
onClick: handleSetFitView2
|
|
74
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E94 - \u9762"), /*#__PURE__*/React.createElement(Button, {
|
|
75
|
+
type: "primary",
|
|
76
|
+
onClick: handleSetFitView3
|
|
77
|
+
}, "\u70B9\u51FB\u81EA\u9002\u5E94 - \u7EBF\u548C\u9762")));
|
|
78
|
+
};
|
|
79
|
+
export default App;
|
package/dist/Map2D/utils.d.ts
CHANGED
|
@@ -8,3 +8,5 @@ export declare const transformAreaData: (data: any) => any;
|
|
|
8
8
|
export declare const isValidLngLat: (data: any) => boolean;
|
|
9
9
|
export declare const deepClone: (obj: any) => any;
|
|
10
10
|
export declare const getBase64FromLocalImage: (url: any) => Promise<unknown>;
|
|
11
|
+
export declare const getPolylineLength: (params: any) => number | Error;
|
|
12
|
+
export declare const getPolygonArea: (params: any) => number | Error;
|
package/dist/Map2D/utils.js
CHANGED
|
@@ -3,16 +3,16 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
|
|
|
3
3
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
4
4
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
5
|
// @ts-nocheck
|
|
6
|
-
import
|
|
6
|
+
import * as turf from '@turf/turf';
|
|
7
|
+
import { cloneDeepWith, isEmpty } from 'lodash-es';
|
|
7
8
|
import wellknown from 'wellknown';
|
|
8
|
-
import { cloneDeepWith } from 'lodash-es';
|
|
9
9
|
|
|
10
10
|
// 获取所有自定义折线图层的函数
|
|
11
11
|
export function getAllLineLayers(map) {
|
|
12
12
|
var layers = map.getStyle().layers;
|
|
13
13
|
// console.log(layers, 'allLayers')
|
|
14
14
|
var lineLayers = layers.filter(function (layer) {
|
|
15
|
-
if (layer.id.includes('
|
|
15
|
+
if (layer.id.includes('customPolyline::')) return true;
|
|
16
16
|
if (layer.id.includes('customPolygon::')) return true;
|
|
17
17
|
});
|
|
18
18
|
return lineLayers;
|
|
@@ -273,4 +273,40 @@ export var getBase64FromLocalImage = /*#__PURE__*/function () {
|
|
|
273
273
|
return function getBase64FromLocalImage(_x) {
|
|
274
274
|
return _ref.apply(this, arguments);
|
|
275
275
|
};
|
|
276
|
-
}();
|
|
276
|
+
}();
|
|
277
|
+
|
|
278
|
+
// 计算线的长度
|
|
279
|
+
export var getPolylineLength = function getPolylineLength(params) {
|
|
280
|
+
if (Array.isArray(params)) {
|
|
281
|
+
var length = turf.length(turf.lineString(params), {
|
|
282
|
+
units: 'kilometers'
|
|
283
|
+
});
|
|
284
|
+
return length;
|
|
285
|
+
}
|
|
286
|
+
if (typeof params === 'string' && params.startsWith('LINESTRING')) {
|
|
287
|
+
var geojson = wellknown.parse(params);
|
|
288
|
+
var path = geojson.coordinates;
|
|
289
|
+
var _length = turf.length(turf.lineString(path), {
|
|
290
|
+
units: 'kilometers'
|
|
291
|
+
});
|
|
292
|
+
return _length;
|
|
293
|
+
}
|
|
294
|
+
return new Error('参数错误');
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
// 计算面的面积
|
|
298
|
+
export var getPolygonArea = function getPolygonArea(params) {
|
|
299
|
+
if (Array.isArray(params)) {
|
|
300
|
+
var turfPolygon = turf.polygon([params]);
|
|
301
|
+
var area = turf.area(turfPolygon) / 1000000;
|
|
302
|
+
return area;
|
|
303
|
+
}
|
|
304
|
+
if (typeof params === 'string' && params.startsWith('POLYGON')) {
|
|
305
|
+
var geojson = wellknown.parse(params);
|
|
306
|
+
var path = geojson.coordinates[0];
|
|
307
|
+
var _turfPolygon = turf.polygon([path]);
|
|
308
|
+
var _area = turf.area(_turfPolygon) / 1000000;
|
|
309
|
+
return _area;
|
|
310
|
+
}
|
|
311
|
+
return new Error('参数错误');
|
|
312
|
+
};
|