@fleet-frontend/mower-maps 0.2.0-beta.16 → 0.2.0-beta.18
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/config/constants.d.ts +4 -0
- package/dist/config/constants.d.ts.map +1 -1
- package/dist/index.esm.js +203 -263
- package/dist/index.js +203 -263
- package/dist/processor/unified/BaseData.d.ts.map +1 -1
- package/dist/processor/unified/UnifiedMapDataProcessor.d.ts.map +1 -1
- package/dist/render/MowerMapOverlay.d.ts.map +1 -1
- package/dist/render/MowerMapRenderer.d.ts.map +1 -1
- package/dist/render/SvgMapView.d.ts.map +1 -1
- package/dist/render/drag/drag.d.ts.map +1 -1
- package/dist/render/drag/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/DirectionModal/component/MowDirection/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/DirectionModal/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/components/HeightModal/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/doodle.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/index.d.ts.map +1 -1
- package/dist/render/svgEditMap/components/HandleElementInfo/obstacle.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useCheckElement.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useCreateVisionOffElement.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/useHistoryHandle.d.ts.map +1 -1
- package/dist/render/svgEditMap/hooks/usePolygonDrawing.d.ts.map +1 -1
- package/dist/render/svgEditMap/index.d.ts.map +1 -1
- package/dist/render/svgElement/Mobile/CreateObstacleElement/coordinateUtils.d.ts.map +1 -1
- package/dist/render/svgElement/ObstacleElement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/index.d.ts +1 -0
- package/dist/render/svgElement/PolygonELement/index.d.ts.map +1 -1
- package/dist/render/svgElement/PolygonELement/vertex/index.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/DoodleTransformWrapper/DoodleTransformWrapper.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/DoodleTransformWrapper/useDoodleTransform.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/VisionOffTransformWrapper.d.ts.map +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/useVisionOffTransform.d.ts +1 -1
- package/dist/render/svgElement/TransformWrapper/VisionOffTransformWrapper/useVisionOffTransform.d.ts.map +1 -1
- package/dist/render/svgMap/index.d.ts.map +1 -1
- package/dist/render/svgMap/useSvgMapView.d.ts.map +1 -1
- package/dist/utils/mapBounds.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/render/svgElement/TransformWrapper/HandleIcon/index.d.ts +0 -7
- package/dist/render/svgElement/TransformWrapper/HandleIcon/index.d.ts.map +0 -1
package/dist/index.esm.js
CHANGED
|
@@ -48,6 +48,11 @@ var REAL_TIME_DATA_TYPE;
|
|
|
48
48
|
/**
|
|
49
49
|
* 地图渲染相关常量配置
|
|
50
50
|
*/
|
|
51
|
+
// 默认坐标
|
|
52
|
+
const DEFAULT_COORDINATES = {
|
|
53
|
+
sw: [116.35497283935547, 40.0374755859375],
|
|
54
|
+
ne: [116.35584259033203, 40.038658142089844],
|
|
55
|
+
};
|
|
51
56
|
/**
|
|
52
57
|
* 缩放因子 - 将米转换为像素
|
|
53
58
|
*/
|
|
@@ -157,7 +162,6 @@ class BaseData {
|
|
|
157
162
|
*/
|
|
158
163
|
class BoundaryData extends BaseData {
|
|
159
164
|
constructor(originalData, level, channels, style) {
|
|
160
|
-
console.log('originBoundary', originalData);
|
|
161
165
|
const convertedPoints = convertPointsFormat(originalData?.points) || [];
|
|
162
166
|
super(originalData?.id, DataType.BOUNDARY, level, RenderType.POLYGON, convertedPoints, originalData);
|
|
163
167
|
const { isFlowGlobal, cuttingHeight } = convertHeightsetToParams(originalData?.height_set || 0);
|
|
@@ -720,6 +724,7 @@ class UnifiedMapDataProcessor {
|
|
|
720
724
|
for (const element of elements) {
|
|
721
725
|
try {
|
|
722
726
|
// 如果有SVG数据,创建涂鸦数据
|
|
727
|
+
// 如果有过期时间,且过期时间大于当前时间(秒级别),才需要渲染
|
|
723
728
|
if ('svg' in element &&
|
|
724
729
|
element.svg &&
|
|
725
730
|
'center' in element &&
|
|
@@ -727,7 +732,9 @@ class UnifiedMapDataProcessor {
|
|
|
727
732
|
'scale' in element &&
|
|
728
733
|
element.scale !== undefined &&
|
|
729
734
|
'direction' in element &&
|
|
730
|
-
element.direction !== undefined
|
|
735
|
+
element.direction !== undefined &&
|
|
736
|
+
(element.expiration_ts === undefined ||
|
|
737
|
+
element.expiration_ts > Math.floor(Date.now() / 1000))) {
|
|
731
738
|
const convertedPoints = convertPoint(element.center);
|
|
732
739
|
if (!convertedPoints) {
|
|
733
740
|
continue;
|
|
@@ -740,7 +747,9 @@ class UnifiedMapDataProcessor {
|
|
|
740
747
|
else if ('points' in element &&
|
|
741
748
|
element.points &&
|
|
742
749
|
Array.isArray(element.points) &&
|
|
743
|
-
element.points.length >= 3
|
|
750
|
+
element.points.length >= 3 &&
|
|
751
|
+
(element.expiration_ts === undefined ||
|
|
752
|
+
element.expiration_ts > Math.floor(Date.now() / 1000))) {
|
|
744
753
|
const convertedPoints = convertPointsFormat(element.points);
|
|
745
754
|
if (!convertedPoints || convertedPoints.length < 3) {
|
|
746
755
|
continue;
|
|
@@ -1461,51 +1470,46 @@ function estimateGpsFromMapBounds(mapData) {
|
|
|
1461
1470
|
if (!bounds || bounds.minX === Infinity) {
|
|
1462
1471
|
return {
|
|
1463
1472
|
sw: [0, 0],
|
|
1464
|
-
ne: [0, 0]
|
|
1473
|
+
ne: [0, 0],
|
|
1465
1474
|
};
|
|
1466
1475
|
}
|
|
1467
1476
|
// 将边界数据转换为物理单位(米)
|
|
1468
|
-
const minXMeters = bounds.minX / SCALE_FACTOR
|
|
1469
|
-
const minYMeters = bounds.minY / SCALE_FACTOR
|
|
1470
|
-
const maxXMeters = bounds.maxX / SCALE_FACTOR
|
|
1471
|
-
const maxYMeters = bounds.maxY / SCALE_FACTOR
|
|
1477
|
+
const minXMeters = bounds.minX / SCALE_FACTOR; // 西边界
|
|
1478
|
+
const minYMeters = bounds.minY / SCALE_FACTOR; // 南边界
|
|
1479
|
+
const maxXMeters = bounds.maxX / SCALE_FACTOR; // 东边界
|
|
1480
|
+
const maxYMeters = bounds.maxY / SCALE_FACTOR; // 北边界
|
|
1472
1481
|
const mapWidthMeters = maxXMeters - minXMeters;
|
|
1473
1482
|
const mapHeightMeters = maxYMeters - minYMeters;
|
|
1474
|
-
//
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
baseLat = 39.9042; // 北京天安门
|
|
1480
|
-
baseLng = 116.4074;
|
|
1481
|
-
}
|
|
1482
|
-
else if (mapWidthMeters < 10000 && mapHeightMeters < 10000) {
|
|
1483
|
-
// 中型区域 - 使用城市级别的基准点
|
|
1484
|
-
baseLat = 39.9000;
|
|
1485
|
-
baseLng = 116.4000;
|
|
1486
|
-
}
|
|
1487
|
-
else {
|
|
1488
|
-
// 大型区域 - 使用更大范围的基准点
|
|
1489
|
-
baseLat = 40.0000;
|
|
1490
|
-
baseLng = 116.0000;
|
|
1491
|
-
}
|
|
1483
|
+
// 凤凰岭的GPS坐标作为地图中心点
|
|
1484
|
+
const centerLat = 40.103;
|
|
1485
|
+
const centerLng = 116.072222;
|
|
1486
|
+
// const centerLat = 40.03806686401367;
|
|
1487
|
+
// const centerLng = 116.35540771484375;
|
|
1492
1488
|
// 精确的坐标转换常数
|
|
1493
1489
|
// 1度纬度 = 约111,320米(在地球上任何地方都基本相同)
|
|
1494
1490
|
// 1度经度 = 约111,320 * cos(纬度) 米(随纬度变化)
|
|
1495
1491
|
const METERS_PER_DEGREE_LAT = 111320;
|
|
1496
|
-
const METERS_PER_DEGREE_LNG = 111320 * Math.cos(
|
|
1492
|
+
const METERS_PER_DEGREE_LNG = 111320 * Math.cos((centerLat * Math.PI) / 180);
|
|
1497
1493
|
// 计算SW(西南角)GPS坐标
|
|
1498
|
-
|
|
1499
|
-
const
|
|
1494
|
+
// 从中心点减去半个地图的宽度和高度
|
|
1495
|
+
const swLat = centerLat - mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
1496
|
+
const swLng = centerLng - mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
1500
1497
|
// 计算NE(东北角)GPS坐标
|
|
1501
|
-
|
|
1502
|
-
const
|
|
1498
|
+
// 从中心点加上半个地图的宽度和高度
|
|
1499
|
+
const neLat = centerLat + mapHeightMeters / 2 / METERS_PER_DEGREE_LAT;
|
|
1500
|
+
const neLng = centerLng + mapWidthMeters / 2 / METERS_PER_DEGREE_LNG;
|
|
1503
1501
|
// 验证估算的坐标是否在合理范围内
|
|
1504
|
-
if (swLat < -90 ||
|
|
1505
|
-
|
|
1502
|
+
if (swLat < -90 ||
|
|
1503
|
+
swLat > 90 ||
|
|
1504
|
+
swLng < -180 ||
|
|
1505
|
+
swLng > 180 ||
|
|
1506
|
+
neLat < -90 ||
|
|
1507
|
+
neLat > 90 ||
|
|
1508
|
+
neLng < -180 ||
|
|
1509
|
+
neLng > 180) {
|
|
1506
1510
|
console.warn('估算的GPS坐标超出有效范围:', {
|
|
1507
1511
|
sw: [swLng, swLat],
|
|
1508
|
-
ne: [neLng, neLat]
|
|
1512
|
+
ne: [neLng, neLat],
|
|
1509
1513
|
});
|
|
1510
1514
|
return null;
|
|
1511
1515
|
}
|
|
@@ -1513,13 +1517,13 @@ function estimateGpsFromMapBounds(mapData) {
|
|
|
1513
1517
|
if (swLat >= neLat || swLng >= neLng) {
|
|
1514
1518
|
console.warn('GPS边界坐标逻辑错误:', {
|
|
1515
1519
|
sw: [swLng, swLat],
|
|
1516
|
-
ne: [neLng, neLat]
|
|
1520
|
+
ne: [neLng, neLat],
|
|
1517
1521
|
});
|
|
1518
1522
|
return null;
|
|
1519
1523
|
}
|
|
1520
1524
|
return {
|
|
1521
1525
|
sw: [swLng, swLat], // [经度, 纬度]
|
|
1522
|
-
ne: [neLng, neLat] // [经度, 纬度]
|
|
1526
|
+
ne: [neLng, neLat], // [经度, 纬度]
|
|
1523
1527
|
};
|
|
1524
1528
|
}
|
|
1525
1529
|
catch (error) {
|
|
@@ -8561,23 +8565,6 @@ const useDrag = ({ dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, }
|
|
|
8561
8565
|
|
|
8562
8566
|
// 编辑模式相关常量配置
|
|
8563
8567
|
// 默认的旋转图标
|
|
8564
|
-
const DEFAULT_ROTATE_ICON = `
|
|
8565
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8566
|
-
<g clip-path="url(#clip0_8198_30743)">
|
|
8567
|
-
<path d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10Z" fill="url(#paint0_linear_8198_30743)"/>
|
|
8568
|
-
<path d="M11.4894 14.7176C10.4257 14.9506 9.31616 14.8595 8.30481 14.4558C7.29342 14.0521 6.4264 13.3535 5.81555 12.4519C5.24299 11.6068 4.92013 10.6187 4.88196 9.60134L4.87805 9.39724C4.87805 8.94523 5.24441 8.57892 5.69641 8.57888C6.12014 8.57888 6.46888 8.90061 6.51087 9.31325L6.51477 9.39724L6.52551 9.68142C6.57513 10.3429 6.79716 10.9821 7.17102 11.534C7.54479 12.0855 8.05583 12.528 8.65149 12.8191L8.91223 12.9343C9.61943 13.2166 10.395 13.2809 11.1388 13.1179L11.4142 13.0467C11.6075 12.9889 11.795 12.9149 11.9757 12.8279L10.8282 12.3865C10.4074 12.2245 10.1977 11.7518 10.3595 11.3308C10.5215 10.9099 10.9941 10.7003 11.4152 10.8621L13.9562 11.8386C14.3773 12.0005 14.5878 12.4732 14.4259 12.8943C14.3891 12.9901 14.3364 13.0752 14.2716 13.1472L14.2726 13.1482C13.5227 13.9377 12.5531 14.4845 11.4894 14.7176Z" fill="white"/>
|
|
8569
|
-
<path d="M8.51062 4.54807C9.57433 4.31505 10.6838 4.40612 11.6952 4.80979C12.7066 5.21356 13.5736 5.91214 14.1844 6.8137C14.757 7.65884 15.0799 8.64688 15.118 9.66429L15.1219 9.86839C15.1219 10.3204 14.7556 10.6867 14.3036 10.6867C13.8799 10.6867 13.5311 10.365 13.4891 9.95237L13.4852 9.86839L13.4745 9.58421C13.4249 8.92272 13.2028 8.28348 12.829 7.73167C12.4552 7.18008 11.9442 6.73767 11.3485 6.44651L11.0878 6.33128C10.3806 6.04903 9.60501 5.98477 8.8612 6.14768L8.58581 6.21897C8.39252 6.27673 8.20502 6.35068 8.02429 6.43772L9.17175 6.87913C9.59256 7.04116 9.8023 7.51383 9.6405 7.93479C9.47855 8.35574 9.00587 8.56537 8.58484 8.40354L6.04382 7.42698C5.6227 7.26512 5.41224 6.79244 5.57409 6.37132C5.61094 6.27552 5.66365 6.19044 5.72839 6.11839L5.72742 6.11741C6.47734 5.32789 7.44693 4.78114 8.51062 4.54807Z" fill="white"/>
|
|
8570
|
-
</g>
|
|
8571
|
-
<defs>
|
|
8572
|
-
<linearGradient id="paint0_linear_8198_30743" x1="17.7273" y1="16.3636" x2="-1.21533" y2="2.08814e-07" gradientUnits="userSpaceOnUse">
|
|
8573
|
-
<stop stop-color="#F16629"/>
|
|
8574
|
-
<stop offset="1" stop-color="#F1A129"/>
|
|
8575
|
-
</linearGradient>
|
|
8576
|
-
<clipPath id="clip0_8198_30743">
|
|
8577
|
-
<rect width="20" height="20" fill="white" transform="matrix(-1 0 0 1 20 0)"/>
|
|
8578
|
-
</clipPath>
|
|
8579
|
-
</defs>
|
|
8580
|
-
</svg>`;
|
|
8581
8568
|
// 默认的拖拽图标
|
|
8582
8569
|
const DEFAULT_DRAG_ICON = `
|
|
8583
8570
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -8591,41 +8578,6 @@ const DEFAULT_DRAG_ICON = `
|
|
|
8591
8578
|
</defs>
|
|
8592
8579
|
</svg>`;
|
|
8593
8580
|
|
|
8594
|
-
function styleInject(css, ref) {
|
|
8595
|
-
if ( ref === void 0 ) ref = {};
|
|
8596
|
-
var insertAt = ref.insertAt;
|
|
8597
|
-
|
|
8598
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
8599
|
-
|
|
8600
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8601
|
-
var style = document.createElement('style');
|
|
8602
|
-
style.type = 'text/css';
|
|
8603
|
-
|
|
8604
|
-
if (insertAt === 'top') {
|
|
8605
|
-
if (head.firstChild) {
|
|
8606
|
-
head.insertBefore(style, head.firstChild);
|
|
8607
|
-
} else {
|
|
8608
|
-
head.appendChild(style);
|
|
8609
|
-
}
|
|
8610
|
-
} else {
|
|
8611
|
-
head.appendChild(style);
|
|
8612
|
-
}
|
|
8613
|
-
|
|
8614
|
-
if (style.styleSheet) {
|
|
8615
|
-
style.styleSheet.cssText = css;
|
|
8616
|
-
} else {
|
|
8617
|
-
style.appendChild(document.createTextNode(css));
|
|
8618
|
-
}
|
|
8619
|
-
}
|
|
8620
|
-
|
|
8621
|
-
var css_248z$9 = ".index-module_edit__-5VvX {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n z-index: 1000;\n cursor: move;\n touch-action: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n position: absolute;\n inset: -10px;\n border: 2px dashed rgb(241, 102, 41);\n border-radius: 2px;\n pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n position: absolute;\n inset: -10px;\n border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n position: absolute;\n top: -20px;\n right: -20px;\n width: 20px;\n height: 20px;\n cursor: grab;\n z-index: 1001;\n pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n position: absolute;\n bottom: -20px;\n left: -20px;\n width: 20px;\n height: 20px;\n cursor: move;\n z-index: 1001;\n pointer-events: auto;\n}";
|
|
8622
|
-
var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","rotate":"index-module_rotate__H-KIZ","move":"index-module_move__mZF8s"};
|
|
8623
|
-
styleInject(css_248z$9);
|
|
8624
|
-
|
|
8625
|
-
const RotateHandle = ({ onRotateStart, isRotating }) => {
|
|
8626
|
-
return (jsx("div", { className: styles$9.rotate, onMouseDown: (e) => onRotateStart(e), onTouchStart: (e) => onRotateStart(e), style: { cursor: isRotating ? 'grabbing' : 'grab' }, dangerouslySetInnerHTML: { __html: DEFAULT_ROTATE_ICON } }));
|
|
8627
|
-
};
|
|
8628
|
-
|
|
8629
8581
|
/**
|
|
8630
8582
|
* 高级节流函数
|
|
8631
8583
|
* @param func 要节流的函数
|
|
@@ -8695,16 +8647,45 @@ function isMobileDevice() {
|
|
|
8695
8647
|
return isMobileUserAgent || (hasTouchScreen && isSmallScreen);
|
|
8696
8648
|
}
|
|
8697
8649
|
|
|
8650
|
+
function styleInject(css, ref) {
|
|
8651
|
+
if ( ref === void 0 ) ref = {};
|
|
8652
|
+
var insertAt = ref.insertAt;
|
|
8653
|
+
|
|
8654
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
8655
|
+
|
|
8656
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8657
|
+
var style = document.createElement('style');
|
|
8658
|
+
style.type = 'text/css';
|
|
8659
|
+
|
|
8660
|
+
if (insertAt === 'top') {
|
|
8661
|
+
if (head.firstChild) {
|
|
8662
|
+
head.insertBefore(style, head.firstChild);
|
|
8663
|
+
} else {
|
|
8664
|
+
head.appendChild(style);
|
|
8665
|
+
}
|
|
8666
|
+
} else {
|
|
8667
|
+
head.appendChild(style);
|
|
8668
|
+
}
|
|
8669
|
+
|
|
8670
|
+
if (style.styleSheet) {
|
|
8671
|
+
style.styleSheet.cssText = css;
|
|
8672
|
+
} else {
|
|
8673
|
+
style.appendChild(document.createTextNode(css));
|
|
8674
|
+
}
|
|
8675
|
+
}
|
|
8676
|
+
|
|
8677
|
+
var css_248z$9 = ".index-module_edit__-5VvX {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: auto;\n z-index: 1000;\n cursor: move;\n touch-action: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n.index-module_edit__-5VvX .index-module_border__JdNLM {\n position: absolute;\n inset: -10px;\n border: 2px dashed rgb(241, 102, 41);\n border-radius: 2px;\n pointer-events: none;\n}\n.index-module_edit__-5VvX .index-module_drag__uvdPG {\n position: absolute;\n inset: -10px;\n border-radius: 2px;\n}\n.index-module_edit__-5VvX .index-module_rotate__H-KIZ {\n position: absolute;\n top: -20px;\n right: -20px;\n width: 20px;\n height: 20px;\n cursor: grab;\n z-index: 1001;\n pointer-events: auto;\n}\n.index-module_edit__-5VvX .index-module_move__mZF8s {\n position: absolute;\n bottom: -20px;\n left: -20px;\n width: 20px;\n height: 20px;\n cursor: move;\n z-index: 1001;\n pointer-events: auto;\n}";
|
|
8678
|
+
var styles$9 = {"edit":"index-module_edit__-5VvX","border":"index-module_border__JdNLM","drag":"index-module_drag__uvdPG","move":"index-module_move__mZF8s"};
|
|
8679
|
+
styleInject(css_248z$9);
|
|
8680
|
+
|
|
8698
8681
|
const DragHandle = ({ onDragStart, isDragging }) => {
|
|
8699
8682
|
// 在PC设备上隐藏拖拽手柄
|
|
8700
8683
|
if (!isMobileDevice()) {
|
|
8701
8684
|
return null;
|
|
8702
8685
|
}
|
|
8703
8686
|
return (jsx("div", { className: styles$9.move, onMouseDown: (e) => {
|
|
8704
|
-
console.log('down');
|
|
8705
8687
|
onDragStart(e);
|
|
8706
8688
|
}, onTouchStart: (e) => onDragStart(e), onMouseUp: (e) => {
|
|
8707
|
-
console.log('drag up');
|
|
8708
8689
|
// onDragEnd(e);
|
|
8709
8690
|
},
|
|
8710
8691
|
// onTouchEnd={(e) => onDragEnd(e)}
|
|
@@ -8712,7 +8693,7 @@ const DragHandle = ({ onDragStart, isDragging }) => {
|
|
|
8712
8693
|
};
|
|
8713
8694
|
|
|
8714
8695
|
const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransformChange, isDragMap = false, }) => {
|
|
8715
|
-
const { isDragging,
|
|
8696
|
+
const { isDragging, handleDragStart, addGlobalListeners } = useDrag({
|
|
8716
8697
|
dragCallbacks,
|
|
8717
8698
|
onBoundaryLabelsCollapse,
|
|
8718
8699
|
onTransformChange,
|
|
@@ -8723,10 +8704,6 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8723
8704
|
const cleanup = addGlobalListeners();
|
|
8724
8705
|
return cleanup;
|
|
8725
8706
|
}, [addGlobalListeners]);
|
|
8726
|
-
// 处理旋转开始
|
|
8727
|
-
const handleRotateStart = (e) => {
|
|
8728
|
-
handleDragStart(e, 'rotate', containerRef?.current);
|
|
8729
|
-
};
|
|
8730
8707
|
// 处理拖拽开始
|
|
8731
8708
|
const handleDragStartEvent = (e) => {
|
|
8732
8709
|
handleDragStart(e, 'drag', containerRef?.current);
|
|
@@ -8734,7 +8711,7 @@ const MapDrag = ({ map: _map, dragCallbacks, onBoundaryLabelsCollapse, onTransfo
|
|
|
8734
8711
|
if (!isDragMap) {
|
|
8735
8712
|
return null;
|
|
8736
8713
|
}
|
|
8737
|
-
return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), jsx(
|
|
8714
|
+
return (jsxs("div", { ref: containerRef, className: styles$9.edit, style: { cursor: isDragging ? 'grabbing' : 'move' }, children: [jsx("div", { className: styles$9.border }), jsx("div", { className: styles$9.drag, onMouseDown: handleDragStartEvent, onTouchStart: handleDragStartEvent }), jsx(DragHandle, { onDragStart: handleDragStartEvent, isDragging: isDragging })] }));
|
|
8738
8715
|
};
|
|
8739
8716
|
|
|
8740
8717
|
/**
|
|
@@ -8785,6 +8762,7 @@ class SvgMapView {
|
|
|
8785
8762
|
svg.style.width = '100%';
|
|
8786
8763
|
svg.style.height = '100%';
|
|
8787
8764
|
svg.style.background = 'transparent';
|
|
8765
|
+
svg.style.overflow = 'visible';
|
|
8788
8766
|
return svg;
|
|
8789
8767
|
}
|
|
8790
8768
|
/**
|
|
@@ -8876,7 +8854,7 @@ class SvgMapView {
|
|
|
8876
8854
|
* 设置自适应视图变换 - 让SVG刚好包裹住图形
|
|
8877
8855
|
*/
|
|
8878
8856
|
fitToView(bounds) {
|
|
8879
|
-
const padding =
|
|
8857
|
+
const padding = 0;
|
|
8880
8858
|
const boundWidth = bounds.maxX - bounds.minX + padding * 2;
|
|
8881
8859
|
const boundHeight = bounds.maxY - bounds.minY + padding * 2;
|
|
8882
8860
|
// 防止宽高为0的情况
|
|
@@ -8885,7 +8863,16 @@ class SvgMapView {
|
|
|
8885
8863
|
return;
|
|
8886
8864
|
}
|
|
8887
8865
|
// 获取容器的实际尺寸进行验证
|
|
8888
|
-
this.container.getBoundingClientRect();
|
|
8866
|
+
const containerRect = this.container.getBoundingClientRect();
|
|
8867
|
+
const containerWidth = containerRect.width;
|
|
8868
|
+
const containerHeight = containerRect.height;
|
|
8869
|
+
if (containerWidth <= 0 || containerHeight <= 0) {
|
|
8870
|
+
console.warn('Invalid container size:', containerWidth, containerHeight);
|
|
8871
|
+
return;
|
|
8872
|
+
}
|
|
8873
|
+
// // 计算内容和容器的宽高比
|
|
8874
|
+
// const contentAspectRatio = boundWidth / boundHeight;
|
|
8875
|
+
// const containerAspectRatio = containerWidth / containerHeight;
|
|
8889
8876
|
// 设置viewBox以包含所有内容
|
|
8890
8877
|
this.viewBox = {
|
|
8891
8878
|
x: bounds.minX - padding,
|
|
@@ -14200,9 +14187,7 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14200
14187
|
}, [mapConfig, onPathLoad]);
|
|
14201
14188
|
// 初始化 SVG 地图视图
|
|
14202
14189
|
const initializeSvgMapView = useCallback((container) => {
|
|
14203
|
-
console.log('initializeSvgMapView called, container:', container, svgMapViewRef.current);
|
|
14204
14190
|
if (!container || svgMapViewRef.current) {
|
|
14205
|
-
console.log('Skipping initialization - container missing or already initialized');
|
|
14206
14191
|
return;
|
|
14207
14192
|
}
|
|
14208
14193
|
containerRef.current = container;
|
|
@@ -14216,12 +14201,10 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14216
14201
|
offscreenContainerRef.current = offscreenContainer;
|
|
14217
14202
|
// 创建 SvgMapView 实例
|
|
14218
14203
|
svgMapViewRef.current = new SvgMapView(sn, offscreenContainer, 800, 600);
|
|
14219
|
-
console.log('SvgMapView created:', svgMapViewRef.current);
|
|
14220
14204
|
// 加载地图数据
|
|
14221
14205
|
loadMapData();
|
|
14222
14206
|
// 加载路径数据
|
|
14223
14207
|
if (pathData && svgMapViewRef.current) {
|
|
14224
|
-
console.log('Loading path data:', pathData);
|
|
14225
14208
|
loadPathData(pathData, mowPartitionData);
|
|
14226
14209
|
}
|
|
14227
14210
|
else {
|
|
@@ -14237,7 +14220,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14237
14220
|
if (svgElement) {
|
|
14238
14221
|
svgElementRef.current = svgElement;
|
|
14239
14222
|
container.appendChild(svgElement);
|
|
14240
|
-
console.log('SVG element added to container');
|
|
14241
14223
|
}
|
|
14242
14224
|
else {
|
|
14243
14225
|
console.warn('Failed to get SVG element from SvgMapView');
|
|
@@ -14279,8 +14261,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14279
14261
|
const setTransform = useCallback((transform) => {
|
|
14280
14262
|
if (!svgMapViewRef.current)
|
|
14281
14263
|
return;
|
|
14282
|
-
console.log('SvgMapView setTransform called with:', transform);
|
|
14283
|
-
// 使用SvgMapView的transform API
|
|
14284
14264
|
svgMapViewRef.current.setTransform(transform);
|
|
14285
14265
|
}, []);
|
|
14286
14266
|
// 重置到默认变换
|
|
@@ -14351,7 +14331,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14351
14331
|
// 监听pathData变化,确保路径数据能够被加载
|
|
14352
14332
|
useEffect(() => {
|
|
14353
14333
|
if (svgMapViewRef.current && pathData) {
|
|
14354
|
-
console.log('PathData changed, reloading...', pathData);
|
|
14355
14334
|
loadPathData(pathData, mowPartitionData);
|
|
14356
14335
|
svgMapViewRef.current.refresh();
|
|
14357
14336
|
}
|
|
@@ -14359,7 +14338,6 @@ const useSvgMapView = ({ mapData, pathData, unitType: _unitType = UnitsType.Impe
|
|
|
14359
14338
|
useEffect(() => {
|
|
14360
14339
|
if (svgMapViewRef.current && mapData) {
|
|
14361
14340
|
loadMapData();
|
|
14362
|
-
console.log('mapData changed, reloading...', mapData);
|
|
14363
14341
|
svgMapViewRef.current.refresh();
|
|
14364
14342
|
}
|
|
14365
14343
|
}, [mapData, loadMapData]);
|
|
@@ -14443,7 +14421,6 @@ const SvgMapComponent = forwardRef(({ editMap, rotate, mapData, pathData, modelT
|
|
|
14443
14421
|
// 初始化 SVG 地图
|
|
14444
14422
|
useEffect(() => {
|
|
14445
14423
|
if (containerRef.current && mapData && !svgMapView) {
|
|
14446
|
-
console.log('Initializing SVG map view, containerRef->', containerRef.current);
|
|
14447
14424
|
initializeSvgMapView(containerRef.current);
|
|
14448
14425
|
}
|
|
14449
14426
|
}, [mapData, svgMapView, initializeSvgMapView, pathData]);
|
|
@@ -15114,20 +15091,20 @@ const DashPath = ({ points, stroke, strokeWidth, strokeOpacity, className, }) =>
|
|
|
15114
15091
|
};
|
|
15115
15092
|
|
|
15116
15093
|
const VertexElement = React__default.memo(({ r, stroke, fill, ...props }) => {
|
|
15117
|
-
const { overlayScale
|
|
15118
|
-
const radius = typeof r === 'number' ? r :
|
|
15119
|
-
return (jsx("circle", { r:
|
|
15094
|
+
const { overlayScale } = useCommonContext();
|
|
15095
|
+
const radius = typeof r === 'number' ? r : 14;
|
|
15096
|
+
return (jsx("circle", { r: radius * overlayScale, stroke: stroke || '#fff', fill: fill || '#fff', strokeWidth: 4 * overlayScale, ...props }));
|
|
15120
15097
|
});
|
|
15121
15098
|
|
|
15122
|
-
var _path$
|
|
15123
|
-
function _extends$
|
|
15099
|
+
var _path$4;
|
|
15100
|
+
function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
|
|
15124
15101
|
var SvgDelete = function SvgDelete(props) {
|
|
15125
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
15102
|
+
return /*#__PURE__*/React.createElement("svg", _extends$a({
|
|
15126
15103
|
xmlns: "http://www.w3.org/2000/svg",
|
|
15127
15104
|
width: 16,
|
|
15128
15105
|
height: 16,
|
|
15129
15106
|
fill: "none"
|
|
15130
|
-
}, props), _path$
|
|
15107
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
|
|
15131
15108
|
fill: "#FD494D",
|
|
15132
15109
|
d: "M6.667 12a.667.667 0 0 0 .666-.667v-4a.667.667 0 1 0-1.333 0v4a.667.667 0 0 0 .667.667m6.666-8h-2.666v-.667a2 2 0 0 0-2-2H7.333a2 2 0 0 0-2 2V4H2.667a.667.667 0 0 0 0 1.333h.666v7.334a2 2 0 0 0 2 2h5.334a2 2 0 0 0 2-2V5.333h.666a.667.667 0 1 0 0-1.333m-6.666-.667a.667.667 0 0 1 .666-.666h1.334a.667.667 0 0 1 .666.666V4H6.667zm4.666 9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666V5.333h6.666zm-2-.667a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-1.333 0v4a.667.667 0 0 0 .666.667"
|
|
15133
15110
|
})));
|
|
@@ -15227,7 +15204,7 @@ const TextElement = ({ x, y, fontSize = 30, fill = '#fff', text, background = 'r
|
|
|
15227
15204
|
height: bbox.height + pad.y * 2,
|
|
15228
15205
|
};
|
|
15229
15206
|
}, [bbox, pad.x, pad.y]);
|
|
15230
|
-
return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, letterSpacing: platform === PlatformType.H5 ?
|
|
15207
|
+
return (jsxs("g", { className: className, style: style, pointerEvents: pointerEvents, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [background && rectProps && (jsx("rect", { x: rectProps.x, y: rectProps.y, width: rectProps.width, height: rectProps.height, rx: rx, ry: ry, fill: background, stroke: backgroundStroke, strokeWidth: backgroundStrokeWidth })), jsx("text", { ref: textRef, x: x, y: y, letterSpacing: platform === PlatformType.H5 ? 0 : -2, fontSize: fontSize, fill: fill, textAnchor: textAnchor, alignmentBaseline: alignmentBaseline,
|
|
15231
15208
|
// keep text crisp at various zoom levels
|
|
15232
15209
|
vectorEffect: "non-scaling-stroke", style: { pointerEvents: 'none' }, children: children || text })] }));
|
|
15233
15210
|
};
|
|
@@ -15305,7 +15282,7 @@ const DistanceLabels = ({ coordinates, createMode = false, editMode = false, com
|
|
|
15305
15282
|
} }))] }));
|
|
15306
15283
|
};
|
|
15307
15284
|
|
|
15308
|
-
var css_248z$5 = ".index-module_polygonPathG__S-Bpl {\n cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n cursor: grabbing;\n}\n\n.index-
|
|
15285
|
+
var css_248z$5 = ".index-module_polygonPathG__S-Bpl {\n cursor: pointer;\n}\n\n.index-module_vertex__-Qb1u {\n cursor: pointer;\n}\n\n.index-module_dragging__xSFdO {\n cursor: grabbing;\n}\n\n.index-module_addVertex__hrF71 {\n cursor: pointer;\n}\n\n.index-module_polygonPath__PynOn {\n pointer-events: stroke;\n cursor: pointer;\n}\n\n.index-module_notCreate__bFnkV {\n cursor: no-drop;\n}";
|
|
15309
15286
|
var styles$5 = {"polygonPathG":"index-module_polygonPathG__S-Bpl","vertex":"index-module_vertex__-Qb1u","dragging":"index-module_dragging__xSFdO","addVertex":"index-module_addVertex__hrF71","polygonPath":"index-module_polygonPath__PynOn","notCreate":"index-module_notCreate__bFnkV"};
|
|
15310
15287
|
styleInject(css_248z$5);
|
|
15311
15288
|
|
|
@@ -15604,7 +15581,6 @@ const useCheckElement = () => {
|
|
|
15604
15581
|
const { editMapInfo, minDistance } = useMapEditContext();
|
|
15605
15582
|
const { svgElementDatas } = useSvgEditContext();
|
|
15606
15583
|
const checkDoodle = useCallback(() => {
|
|
15607
|
-
console.log('checkdoodle', editMapInfo, svgElementDatas);
|
|
15608
15584
|
if (!editMapInfo.selectElement || editMapInfo.selectElement.type !== DataType.DOODLE) {
|
|
15609
15585
|
return {
|
|
15610
15586
|
isValid: false,
|
|
@@ -15628,18 +15604,12 @@ const useCheckElement = () => {
|
|
|
15628
15604
|
// 1. 首先判断 doodle 是否在一个 boundary 内
|
|
15629
15605
|
let isInBoundary = false;
|
|
15630
15606
|
let containingBoundary = null;
|
|
15631
|
-
console.log('doodlePoints--->', doodleElement, doodlePoints);
|
|
15632
15607
|
for (const boundaryData of boundary) {
|
|
15633
15608
|
const boundaryPoints = coordinatesToPoints$1(boundaryData.points);
|
|
15634
15609
|
const allPointsInside = doodlePoints.every((point) => {
|
|
15635
15610
|
const isIn = isPointInPolygon(point, boundaryPoints);
|
|
15636
|
-
// console.log('isIn--->', isIn, point, boundaryPoints);
|
|
15637
|
-
if (!isIn) {
|
|
15638
|
-
console.log('isIn--->', isIn, point, boundaryPoints);
|
|
15639
|
-
}
|
|
15640
15611
|
return isIn;
|
|
15641
15612
|
});
|
|
15642
|
-
console.log('allPointsInside--->', allPointsInside, boundaryPoints, boundaryData);
|
|
15643
15613
|
if (allPointsInside) {
|
|
15644
15614
|
isInBoundary = true;
|
|
15645
15615
|
containingBoundary = boundaryData;
|
|
@@ -15697,7 +15667,6 @@ const useCheckElement = () => {
|
|
|
15697
15667
|
}
|
|
15698
15668
|
// 检查距离是否大于 2m
|
|
15699
15669
|
const distance = polygonToPolygonDistance(doodlePoints, elementPoints);
|
|
15700
|
-
console.log('distance--->', distance, minDistance, doodlePoints, elementPoints);
|
|
15701
15670
|
if (distance < minDistance) {
|
|
15702
15671
|
const elementTypeName = {
|
|
15703
15672
|
[DataType.OBSTACLE]: '障碍物',
|
|
@@ -15712,8 +15681,6 @@ const useCheckElement = () => {
|
|
|
15712
15681
|
};
|
|
15713
15682
|
}
|
|
15714
15683
|
}
|
|
15715
|
-
// 所有检查通过
|
|
15716
|
-
console.log('Doodle 位置检查通过');
|
|
15717
15684
|
return { isValid: true };
|
|
15718
15685
|
}, [editMapInfo, svgElementDatas, minDistance]);
|
|
15719
15686
|
const checkCanNotCreateAtPosition = useCallback((checkPoint, checkPoints) => {
|
|
@@ -15734,7 +15701,6 @@ const useCheckElement = () => {
|
|
|
15734
15701
|
break;
|
|
15735
15702
|
}
|
|
15736
15703
|
}
|
|
15737
|
-
console.log('currentBoundary--->', currentBoundary, points);
|
|
15738
15704
|
if (!currentBoundary)
|
|
15739
15705
|
return {
|
|
15740
15706
|
result: true,
|
|
@@ -15769,7 +15735,6 @@ const useCheckElement = () => {
|
|
|
15769
15735
|
for (const obstacle of obstaclesInBoundary) {
|
|
15770
15736
|
const obstaclePoints = coordinatesToPoints$1(obstacle.points);
|
|
15771
15737
|
if (doPolygonsIntersect(currentObstaclePolygon, obstaclePoints)) {
|
|
15772
|
-
console.log('Obstacle intersection detected with:', obstacle);
|
|
15773
15738
|
return {
|
|
15774
15739
|
result: true,
|
|
15775
15740
|
code: CheckObstaclePointErrorType.OBSTACLE_INTERSECT,
|
|
@@ -15788,7 +15753,6 @@ const useCheckElement = () => {
|
|
|
15788
15753
|
const doodleTransformedPoints = transformSvgElements(doodle).flat();
|
|
15789
15754
|
// 检查相交
|
|
15790
15755
|
if (doPolygonsIntersect(currentObstaclePolygon, doodleTransformedPoints)) {
|
|
15791
|
-
console.log('Obstacle-Doodle intersection detected with:', doodle);
|
|
15792
15756
|
return {
|
|
15793
15757
|
result: true,
|
|
15794
15758
|
code: CheckObstaclePointErrorType.DOODLE_INTERSECT,
|
|
@@ -15796,9 +15760,7 @@ const useCheckElement = () => {
|
|
|
15796
15760
|
}
|
|
15797
15761
|
// 检查距离
|
|
15798
15762
|
const distance = polygonToPolygonDistance(currentObstaclePolygon, doodleTransformedPoints);
|
|
15799
|
-
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15800
15763
|
if (distance < minDistance) {
|
|
15801
|
-
console.log('Obstacle-Doodle distance too close:', distance, 'required:', minDistance);
|
|
15802
15764
|
return {
|
|
15803
15765
|
result: true,
|
|
15804
15766
|
code: CheckObstaclePointErrorType.DOODLE_DISTANCE_TOO_CLOSE,
|
|
@@ -15904,7 +15866,7 @@ const createPathData = (points) => {
|
|
|
15904
15866
|
}
|
|
15905
15867
|
return pathData;
|
|
15906
15868
|
};
|
|
15907
|
-
const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数,如果未指定则根据createMode和editMode自动判断
|
|
15869
|
+
const PolygonElement = ({ canSelect = false, points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity = 1, strokeColor = '#000', strokeWidth = 2, strokeOpacity = 1, createMode = false, showPoints = false, onPointClick, completed = false, mousePos = null, editMode = false, onCoordinatesChange, onPathClick, onPolygonClick, onVertexDelete, draggable = true, // 新增参数,如果未指定则根据createMode和editMode自动判断
|
|
15908
15870
|
}) => {
|
|
15909
15871
|
const { overlayScale, unitType } = useCommonContext();
|
|
15910
15872
|
const { onHandleEvent } = useMapEditContext();
|
|
@@ -16453,30 +16415,50 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16453
16415
|
return (jsxs(Fragment, { children: [(editMode || (createMode && completed)) &&
|
|
16454
16416
|
dragState.isDragging &&
|
|
16455
16417
|
dragState.dragType !== 'new' &&
|
|
16456
|
-
dragState.originalPosition && (jsxs(Fragment, { children: [jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none"
|
|
16418
|
+
dragState.originalPosition && (jsxs(Fragment, { children: [jsx(VertexElement, { cx: dragState.originalPosition[0], cy: dragState.originalPosition[1], stroke: strokeColor, strokeOpacity: 0.2, pointerEvents: "none", style: {
|
|
16419
|
+
userSelect: 'none',
|
|
16420
|
+
WebkitUserSelect: 'none',
|
|
16421
|
+
WebkitTouchCallout: 'none',
|
|
16422
|
+
touchAction: 'none',
|
|
16423
|
+
} }, "ghost-vertex"), (() => {
|
|
16457
16424
|
// 获取前一个点和后一个点的索引
|
|
16458
16425
|
const prevIndex = (dragState.dragIndex - 1 + coordinates.length) % coordinates.length;
|
|
16459
16426
|
const nextIndex = (dragState.dragIndex + 1) % coordinates.length;
|
|
16460
|
-
return (jsxs(Fragment, { children: [jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none"
|
|
16461
|
-
|
|
16462
|
-
|
|
16427
|
+
return (jsxs(Fragment, { children: [jsx("line", { x1: coordinates[prevIndex][0], y1: coordinates[prevIndex][1], x2: dragState.originalPosition[0], y2: dragState.originalPosition[1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
|
|
16428
|
+
userSelect: 'none',
|
|
16429
|
+
WebkitUserSelect: 'none',
|
|
16430
|
+
WebkitTouchCallout: 'none',
|
|
16431
|
+
touchAction: 'none',
|
|
16432
|
+
} }), jsx("line", { x1: dragState.originalPosition[0], y1: dragState.originalPosition[1], x2: coordinates[nextIndex][0], y2: coordinates[nextIndex][1], stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: 0.5, strokeDasharray: "5,5", pointerEvents: "none", style: {
|
|
16433
|
+
userSelect: 'none',
|
|
16434
|
+
WebkitUserSelect: 'none',
|
|
16435
|
+
WebkitTouchCallout: 'none',
|
|
16436
|
+
touchAction: 'none',
|
|
16437
|
+
} })] }));
|
|
16438
|
+
})()] })), renderCoordinates.length >= 2 && (jsx("polygon", { className: canSelect ? styles$5.polygonPathG : '', points: polygonPoints, fill: fillColor, fillOpacity: fillOpacity, stroke: "none" // 边框透明
|
|
16439
|
+
, onClick: onPolygonClick })), jsxs("g", { children: [renderCoordinates.length >= 2 &&
|
|
16463
16440
|
pathSegments.map((segment, index) => {
|
|
16464
16441
|
if (segment.points.length < 2)
|
|
16465
16442
|
return null;
|
|
16466
16443
|
const pathData = createPathData(segment.points);
|
|
16467
16444
|
const isDash = segment.type === 1;
|
|
16468
|
-
return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: styles$5.polygonPath, vectorEffect: "non-scaling-stroke", onClick: onPathClick
|
|
16445
|
+
return (jsx("path", { d: pathData, fill: "none", stroke: isDash ? 'none' : strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity, strokeLinecap: "round", strokeLinejoin: "round", className: canSelect ? styles$5.polygonPath : '', vectorEffect: "non-scaling-stroke", onClick: onPathClick, style: {
|
|
16446
|
+
userSelect: 'none',
|
|
16447
|
+
WebkitUserSelect: 'none',
|
|
16448
|
+
WebkitTouchCallout: 'none',
|
|
16449
|
+
touchAction: 'none',
|
|
16450
|
+
} }, index));
|
|
16469
16451
|
}), renderCoordinates.length >= 2 &&
|
|
16470
16452
|
dashPaths.map((segment, index) => {
|
|
16471
16453
|
if (segment.points.length < 2)
|
|
16472
16454
|
return null;
|
|
16473
|
-
return (jsx(DashPath, { className: styles$5.polygonPath, points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16455
|
+
return (jsx(DashPath, { className: canSelect ? styles$5.polygonPath : '', points: segment.points, stroke: strokeColor, strokeWidth: strokeWidth, strokeOpacity: strokeOpacity }, index));
|
|
16474
16456
|
})] }), (editMode || (createMode && completed)) &&
|
|
16475
16457
|
renderCoordinates.length >= 2 &&
|
|
16476
16458
|
renderCoordinates.map((coord, index) => {
|
|
16477
16459
|
const nextCoord = renderCoordinates[(index + 1) % renderCoordinates.length];
|
|
16478
16460
|
const isDashPath = coord[2] === 1;
|
|
16479
|
-
return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: styles$5.addVertex, style: {
|
|
16461
|
+
return (jsx("line", { x1: coord[0], y1: coord[1], x2: nextCoord[0], y2: nextCoord[1], stroke: isDashPath ? 'transparent' : strokeColor, strokeWidth: platform === PlatformType.H5 ? strokeWidth * 3 : strokeWidth, className: editMode ? styles$5.addVertex : '', style: {
|
|
16480
16462
|
userSelect: 'none',
|
|
16481
16463
|
WebkitUserSelect: 'none',
|
|
16482
16464
|
WebkitTouchCallout: 'none',
|
|
@@ -16508,7 +16490,7 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16508
16490
|
setHoverVertex(null);
|
|
16509
16491
|
},
|
|
16510
16492
|
}) }, `edge-${index}`));
|
|
16511
|
-
}), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
|
|
16493
|
+
}), ghostLastPath && (jsx("path", { d: ghostLastPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), ghostFirstPath && renderCoordinates.length >= 2 && (jsx("path", { d: ghostFirstPath, stroke: strokeColor, strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", opacity: 0.7, onClick: onPathClick })), jsx(DragDistanceIndicator, { dragState: dragState, strokeColor: strokeColor, editMode: editMode, createMode: createMode, completed: completed, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, unitType: unitType }), jsx(DistanceLabels, { coordinates: renderCoordinates, createMode: createMode, editMode: editMode, completed: completed, showPoints: showPoints, mousePos: mousePos, ghostLastDistance: ghostLastDistance, ghostLastMidpoint: ghostLastMidpoint, ghostFirstDistance: ghostFirstDistance, ghostFirstMidpoint: ghostFirstMidpoint, fontSize: platform === PlatformType.H5 ? 12 * overlayScale * 1.5 : 30 * overlayScale, showFirstDistance: platform !== PlatformType.H5, unit: unitType }), hoverVertex && !dragState.isDragging && (jsx(VertexElement, { cx: hoverVertex.position.x, cy: hoverVertex.position.y, stroke: strokeColor, strokeOpacity: 0.6, fill: "white", fillOpacity: 0.8, pointerEvents: "none" })), ((createMode && showPoints) || editMode || (createMode && completed)) &&
|
|
16512
16494
|
renderCoordinates.map((coord, idx) => {
|
|
16513
16495
|
// 判断当前顶点的状态
|
|
16514
16496
|
const isLastPoint = idx === renderCoordinates.length - 1;
|
|
@@ -16517,7 +16499,8 @@ const PolygonElement = ({ points, fillColor = 'rgba(0, 0, 0, 0.1)', fillOpacity
|
|
|
16517
16499
|
const isInEditMode = editMode;
|
|
16518
16500
|
// H5模式下选中的顶点显示蓝色,并且放大1.5倍
|
|
16519
16501
|
const isSelected = platform === PlatformType.H5 && selectedVertexIndex === idx;
|
|
16520
|
-
const
|
|
16502
|
+
const commonRadius = canComplete ? 16 : 12;
|
|
16503
|
+
const vertexRadius = isSelected ? commonRadius * 1.2 : commonRadius;
|
|
16521
16504
|
const vertexFill = isSelected ? '#FFAB7E' : 'white';
|
|
16522
16505
|
return (jsxs("g", { children: [jsx(VertexElement, { className: generateVertexClassName, style: {
|
|
16523
16506
|
userSelect: 'none',
|
|
@@ -16692,10 +16675,9 @@ const BoundaryElement = ({ data }) => {
|
|
|
16692
16675
|
}
|
|
16693
16676
|
}
|
|
16694
16677
|
}, [platform, data, editMapInfo, onSelectElement]);
|
|
16695
|
-
return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16678
|
+
return (jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16696
16679
|
onPathClick();
|
|
16697
16680
|
}, onCoordinatesChange: (coordinates) => {
|
|
16698
|
-
console.log('onCoordinatesChange', coordinates);
|
|
16699
16681
|
setEditMapInfo((prev) => ({
|
|
16700
16682
|
...prev,
|
|
16701
16683
|
selectElement: {
|
|
@@ -16748,7 +16730,6 @@ const useHistoryHandle = (props) => {
|
|
|
16748
16730
|
// undo
|
|
16749
16731
|
const undo = () => {
|
|
16750
16732
|
setEditMapInfo((prev) => {
|
|
16751
|
-
console.log('undo->', prev);
|
|
16752
16733
|
if (prev?.historyList?.length > 0 && prev?.currentHistoryIndex > 0) {
|
|
16753
16734
|
return {
|
|
16754
16735
|
...prev,
|
|
@@ -16816,10 +16797,8 @@ const ObstacleElement = ({ data }) => {
|
|
|
16816
16797
|
const { addHistory } = useHistoryHandle();
|
|
16817
16798
|
// 处理删除顶点
|
|
16818
16799
|
const handleCreateVertexDelete = useCallback((vertexIndex) => {
|
|
16819
|
-
console.log('ObstacleElement删除顶点', vertexIndex);
|
|
16820
16800
|
if (editMapInfo?.selectElement?.points && editMapInfo?.selectElement?.points?.length > 0) {
|
|
16821
16801
|
const newPoints = editMapInfo?.selectElement?.points?.filter((_, index) => index !== vertexIndex);
|
|
16822
|
-
console.log('newPoints', newPoints);
|
|
16823
16802
|
setEditMapInfo((prev) => ({
|
|
16824
16803
|
...prev,
|
|
16825
16804
|
selectElement: {
|
|
@@ -16885,7 +16864,7 @@ const ObstacleElement = ({ data }) => {
|
|
|
16885
16864
|
}
|
|
16886
16865
|
return editMapInfo?.selectElement?.id === data.id;
|
|
16887
16866
|
}, [editMapInfo, data, platform]);
|
|
16888
|
-
return (jsx(PolygonElement, { points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16867
|
+
return (jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: currentPoints, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: editMode, showPoints: editMapInfo?.selectElement?.id === data.id, onPathClick: onPathClick, onPolygonClick: () => {
|
|
16889
16868
|
onPathClick();
|
|
16890
16869
|
}, onVertexDelete: (vertexIndex) => handleCreateVertexDelete(vertexIndex), onCoordinatesChange: (coordinates) => {
|
|
16891
16870
|
console.log('onCoordinatesChange', coordinates);
|
|
@@ -16991,11 +16970,11 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
16991
16970
|
return newPoints;
|
|
16992
16971
|
}, []);
|
|
16993
16972
|
// 计算选择框的四个角点(每条边与内部元素对应边平行)
|
|
16994
|
-
const calculateSelectionBoxPoints = useCallback((points) => {
|
|
16973
|
+
const calculateSelectionBoxPoints = useCallback((points, scale = 1) => {
|
|
16995
16974
|
if (points.length < 4)
|
|
16996
16975
|
return points;
|
|
16997
16976
|
// 设置偏移距离(可以根据需要调整)
|
|
16998
|
-
const offset =
|
|
16977
|
+
const offset = 20 * scale; // 偏移距离
|
|
16999
16978
|
// 使用更简单的方法:计算矩形的边界框,然后向外扩展
|
|
17000
16979
|
// 计算矩形的两条相邻边向量(从左上角出发)
|
|
17001
16980
|
const edge1 = { x: points[1].x - points[0].x, y: points[1].y - points[0].y }; // 左上到左下
|
|
@@ -17312,9 +17291,9 @@ const useVisionOffTransform = (data, scaleConstraints
|
|
|
17312
17291
|
};
|
|
17313
17292
|
|
|
17314
17293
|
var _g$5, _defs$5;
|
|
17315
|
-
function _extends$
|
|
17294
|
+
function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
|
|
17316
17295
|
var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
17317
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17296
|
+
return /*#__PURE__*/React.createElement("svg", _extends$9({
|
|
17318
17297
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17319
17298
|
width: 20,
|
|
17320
17299
|
height: 20,
|
|
@@ -17363,9 +17342,9 @@ var SvgTransformDelete = function SvgTransformDelete(props) {
|
|
|
17363
17342
|
};
|
|
17364
17343
|
|
|
17365
17344
|
var _g$4, _defs$4;
|
|
17366
|
-
function _extends$
|
|
17345
|
+
function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
|
|
17367
17346
|
var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
17368
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17347
|
+
return /*#__PURE__*/React.createElement("svg", _extends$8({
|
|
17369
17348
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17370
17349
|
width: 21,
|
|
17371
17350
|
height: 20,
|
|
@@ -17399,9 +17378,9 @@ var SvgTransformRotate = function SvgTransformRotate(props) {
|
|
|
17399
17378
|
};
|
|
17400
17379
|
|
|
17401
17380
|
var _g$3, _defs$3;
|
|
17402
|
-
function _extends$
|
|
17381
|
+
function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
|
|
17403
17382
|
var SvgTransformScale = function SvgTransformScale(props) {
|
|
17404
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17383
|
+
return /*#__PURE__*/React.createElement("svg", _extends$7({
|
|
17405
17384
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17406
17385
|
width: 21,
|
|
17407
17386
|
height: 20,
|
|
@@ -17435,9 +17414,9 @@ var SvgTransformScale = function SvgTransformScale(props) {
|
|
|
17435
17414
|
};
|
|
17436
17415
|
|
|
17437
17416
|
var _g$2, _defs$2;
|
|
17438
|
-
function _extends$
|
|
17417
|
+
function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
|
|
17439
17418
|
var SvgTransformTranslate = function SvgTransformTranslate(props) {
|
|
17440
|
-
return /*#__PURE__*/React.createElement("svg", _extends$
|
|
17419
|
+
return /*#__PURE__*/React.createElement("svg", _extends$6({
|
|
17441
17420
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17442
17421
|
width: 20,
|
|
17443
17422
|
height: 20,
|
|
@@ -17589,7 +17568,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17589
17568
|
return;
|
|
17590
17569
|
onDragMove?.(currentPoints.map((point) => [point.x, point.y]));
|
|
17591
17570
|
}, [currentPoints, isSelected, isDragging, isRotating, isScaling]);
|
|
17592
|
-
return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
|
|
17571
|
+
return (jsxs("g", { ref: containerRef, className: `vision-off-transform-wrapper ${className} ${isSelected ? 'selected' : ''}`, "data-transform-wrapper": "true", children: [jsx(PolygonElement, { canSelect: Boolean(!editMapInfo?.elementType), points: visionOffData?.points, fillColor: style.fillColor, fillOpacity: style.fillOpacity, strokeColor: style.lineColor, strokeWidth: strokeWidth, editMode: false, onPathClick: () => {
|
|
17593
17572
|
onSelect?.();
|
|
17594
17573
|
}, onPolygonClick: () => {
|
|
17595
17574
|
onSelect?.();
|
|
@@ -17604,7 +17583,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17604
17583
|
}) })), isSelected &&
|
|
17605
17584
|
currentPoints.length === 4 &&
|
|
17606
17585
|
(() => {
|
|
17607
|
-
const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints);
|
|
17586
|
+
const selectionBoxPoints = calculateSelectionBoxPoints(currentPoints, overlayScale);
|
|
17608
17587
|
// 计算选择框的边界
|
|
17609
17588
|
const minX = Math.min(...selectionBoxPoints.map((p) => p.x));
|
|
17610
17589
|
const maxX = Math.max(...selectionBoxPoints.map((p) => p.x));
|
|
@@ -17612,13 +17591,23 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17612
17591
|
// 计算选择框的中心
|
|
17613
17592
|
const centerX = (minX + maxX) / 2;
|
|
17614
17593
|
// 计算尺寸显示框的位置(选择框下方)
|
|
17615
|
-
const infoBoxY = maxY + 20; // 选择框下方20像素
|
|
17616
|
-
const infoBoxWidth =
|
|
17617
|
-
const infoBoxHeight =
|
|
17594
|
+
const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
|
|
17595
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
17596
|
+
const infoBoxHeight = 50 * overlayScale; // 信息框高度
|
|
17618
17597
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
17619
|
-
const scale =
|
|
17598
|
+
const scale = 2 * overlayScale;
|
|
17620
17599
|
const offsetLeft = 10 * scale;
|
|
17621
|
-
return (jsxs(Fragment, { children: [jsx("
|
|
17600
|
+
return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, children: jsxs("div", { style: {
|
|
17601
|
+
padding: `5px ${10 * overlayScale}px`,
|
|
17602
|
+
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
17603
|
+
borderRadius: `${30 * overlayScale}px`,
|
|
17604
|
+
display: 'inline-flex',
|
|
17605
|
+
alignItems: 'center',
|
|
17606
|
+
justifyContent: 'center',
|
|
17607
|
+
fontSize: `${26 * overlayScale}px`,
|
|
17608
|
+
color: 'white',
|
|
17609
|
+
fontWeight: '400',
|
|
17610
|
+
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) })), jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
|
|
17622
17611
|
? {
|
|
17623
17612
|
onTouchStart: createReactEventHandler((e) => {
|
|
17624
17613
|
handleMouseDownWithDisabled(e);
|
|
@@ -17658,18 +17647,7 @@ const VisionOffTransformWrapper = ({ data, isSelected = false, onSelect, onCance
|
|
|
17658
17647
|
}
|
|
17659
17648
|
: {
|
|
17660
17649
|
onMouseDown: handleScaleStartWithDisabled,
|
|
17661
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })
|
|
17662
|
-
padding: '5px 6px',
|
|
17663
|
-
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
17664
|
-
borderRadius: '20px',
|
|
17665
|
-
display: 'inline-flex',
|
|
17666
|
-
alignItems: 'center',
|
|
17667
|
-
justifyContent: 'center',
|
|
17668
|
-
fontSize: '12px',
|
|
17669
|
-
color: 'white',
|
|
17670
|
-
fontWeight: '400',
|
|
17671
|
-
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
17672
|
-
}, children: [convertDistanceByUnits(dimensions.height, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.width, unitType).value] }) }))] }));
|
|
17650
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
|
|
17673
17651
|
})()] }));
|
|
17674
17652
|
};
|
|
17675
17653
|
|
|
@@ -17899,11 +17877,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
17899
17877
|
}, [currentCenter, currentScale, currentDirection, getSvgDimensions]);
|
|
17900
17878
|
// 初始化变换状态
|
|
17901
17879
|
const initializeTransform = useCallback(() => {
|
|
17902
|
-
console.log('useDoodleTransform: 初始化变换状态', {
|
|
17903
|
-
center: data.center,
|
|
17904
|
-
scale: data.scale,
|
|
17905
|
-
direction: data.direction,
|
|
17906
|
-
});
|
|
17907
17880
|
const convertedCenter = convertPoint(data.center);
|
|
17908
17881
|
setCurrentCenter({ x: convertedCenter[0], y: convertedCenter[1] });
|
|
17909
17882
|
setCurrentScale(data.scale);
|
|
@@ -18130,21 +18103,6 @@ const useDoodleTransform = (data, onTransformChange, options) => {
|
|
|
18130
18103
|
};
|
|
18131
18104
|
};
|
|
18132
18105
|
|
|
18133
|
-
var _path$4;
|
|
18134
|
-
function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
|
|
18135
|
-
var SvgTransformArrow = function SvgTransformArrow(props) {
|
|
18136
|
-
return /*#__PURE__*/React.createElement("svg", _extends$6({
|
|
18137
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
18138
|
-
width: 7,
|
|
18139
|
-
height: 11,
|
|
18140
|
-
fill: "none"
|
|
18141
|
-
}, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
|
|
18142
|
-
fill: "#fff",
|
|
18143
|
-
d: "M2.156 1.032a.777.777 0 0 0-1.061 0 .69.69 0 0 0-.062.943l.062.068 3.97 3.78-3.97 3.78a.69.69 0 0 0-.062.944l.062.067c.27.257.696.277.99.06l.07-.06 4.5-4.286a.69.69 0 0 0 .063-.943l-.062-.067z",
|
|
18144
|
-
opacity: 0.5
|
|
18145
|
-
})));
|
|
18146
|
-
};
|
|
18147
|
-
|
|
18148
18106
|
const DoodleTransform = ({ data, isSelected: _isSelected, onSelect }) => {
|
|
18149
18107
|
const { editMapInfo } = useMapEditContext();
|
|
18150
18108
|
const { platform } = useCommonContext();
|
|
@@ -18322,10 +18280,9 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18322
18280
|
const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
|
|
18323
18281
|
// 计算选择框的中心
|
|
18324
18282
|
const centerX = (minX + maxX) / 2;
|
|
18325
|
-
//
|
|
18326
|
-
const
|
|
18327
|
-
const
|
|
18328
|
-
const infoBoxHeight = 100 * overlayScale; // 信息框高度
|
|
18283
|
+
const infoBoxY = maxY + 20 + 30 * overlayScale; // 选择框下方20像素
|
|
18284
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
18285
|
+
const infoBoxHeight = 40 * overlayScale; // 信息框高度
|
|
18329
18286
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
18330
18287
|
return (jsxs(Fragment, { children: [jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#B2B4B9", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
|
|
18331
18288
|
? {
|
|
@@ -18338,14 +18295,14 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18338
18295
|
}) }), jsx("circle", { cx: selectionBoxPoints[0].x, cy: selectionBoxPoints[0].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[3].x, cy: selectionBoxPoints[3].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[1].x, cy: selectionBoxPoints[1].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), jsx("circle", { cx: selectionBoxPoints[2].x, cy: selectionBoxPoints[2].y, r: 10 * overlayScale, fill: "#B2B4B9", stroke: "none" }), platform === PlatformType.H5 && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
|
|
18339
18296
|
onClickInfo?.();
|
|
18340
18297
|
}, children: jsx("div", { style: {
|
|
18341
|
-
padding:
|
|
18298
|
+
padding: `5px ${10 * overlayScale}px`,
|
|
18342
18299
|
background: 'rgba(201, 209, 218, 1)',
|
|
18343
|
-
borderRadius:
|
|
18300
|
+
borderRadius: `${10 * overlayScale}px`,
|
|
18344
18301
|
display: 'inline-flex',
|
|
18345
18302
|
flexDirection: 'column',
|
|
18346
18303
|
alignItems: 'flex-start',
|
|
18347
18304
|
justifyContent: 'center',
|
|
18348
|
-
fontSize:
|
|
18305
|
+
fontSize: `${26 * overlayScale}px`,
|
|
18349
18306
|
color: 'white',
|
|
18350
18307
|
fontWeight: '400',
|
|
18351
18308
|
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
@@ -18403,14 +18360,32 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18403
18360
|
const maxY = Math.max(...selectionBoxPoints.map((p) => p.y));
|
|
18404
18361
|
// 计算选择框的中心
|
|
18405
18362
|
const centerX = (minX + maxX) / 2;
|
|
18406
|
-
//
|
|
18407
|
-
const
|
|
18408
|
-
const infoBoxWidth = 140 * overlayScale; // 信息框宽度
|
|
18363
|
+
const infoBoxY = maxY + 20 + 40 * overlayScale; // 选择框下方20像素
|
|
18364
|
+
const infoBoxWidth = 300 * overlayScale; // 信息框宽度
|
|
18409
18365
|
const infoBoxHeight = 100 * overlayScale; // 信息框高度
|
|
18410
18366
|
const infoBoxX = centerX - infoBoxWidth / 2; // 居中对齐
|
|
18411
|
-
const scale =
|
|
18367
|
+
const scale = 2 * overlayScale;
|
|
18412
18368
|
const offsetLeft = 10 * scale;
|
|
18413
|
-
return (jsxs(Fragment, { children: [jsx("
|
|
18369
|
+
return (jsxs(Fragment, { children: [showInfo && (jsx("foreignObject", { x: infoBoxX, y: infoBoxY, width: infoBoxWidth, height: infoBoxHeight, style: { textAlign: 'center' }, onClick: () => {
|
|
18370
|
+
onClickInfo?.();
|
|
18371
|
+
}, children: jsxs("div", { style: {
|
|
18372
|
+
padding: `${10 * overlayScale}px`,
|
|
18373
|
+
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
18374
|
+
borderRadius: `${20 * overlayScale}px`,
|
|
18375
|
+
display: 'inline-flex',
|
|
18376
|
+
flexDirection: 'column',
|
|
18377
|
+
alignItems: 'flex-start',
|
|
18378
|
+
justifyContent: 'center',
|
|
18379
|
+
fontSize: `${26 * overlayScale}px`,
|
|
18380
|
+
color: 'white',
|
|
18381
|
+
fontWeight: '400',
|
|
18382
|
+
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18383
|
+
}, children: [jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsx("div", { style: {
|
|
18384
|
+
display: 'flex',
|
|
18385
|
+
alignItems: 'center',
|
|
18386
|
+
justifyContent: 'center',
|
|
18387
|
+
gap: `${10 * overlayScale}px`,
|
|
18388
|
+
}, children: jsxs("div", { children: ["Active Time: ", activeTime, " >"] }) })] }) })), jsx("polygon", { points: selectionBoxPoints.map((point) => `${point.x},${point.y}`).join(' '), fill: "none", stroke: "#9EA6BA", strokeWidth: "2", strokeDasharray: "5,5", vectorEffect: "non-scaling-stroke", style: { cursor: 'move' }, ...(platform === PlatformType.H5
|
|
18414
18389
|
? {
|
|
18415
18390
|
onTouchStart: createReactEventHandler((e) => {
|
|
18416
18391
|
handleMouseDownWithDisabled(e);
|
|
@@ -18450,26 +18425,7 @@ const DoodleTransformWrapper = ({ data, isSelected = false, isSelectedWithoutOpe
|
|
|
18450
18425
|
}
|
|
18451
18426
|
: {
|
|
18452
18427
|
onMouseDown: handleScaleStartWithDisabled,
|
|
18453
|
-
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })
|
|
18454
|
-
onClickInfo?.();
|
|
18455
|
-
}, children: jsxs("div", { style: {
|
|
18456
|
-
padding: '5px 6px',
|
|
18457
|
-
background: 'linear-gradient(266.64deg, #F26A2A 4.1%, #F2942A 86.42%)',
|
|
18458
|
-
borderRadius: '10px',
|
|
18459
|
-
display: 'inline-flex',
|
|
18460
|
-
flexDirection: 'column',
|
|
18461
|
-
alignItems: 'flex-start',
|
|
18462
|
-
justifyContent: 'center',
|
|
18463
|
-
fontSize: '12px',
|
|
18464
|
-
color: 'white',
|
|
18465
|
-
fontWeight: '400',
|
|
18466
|
-
// transform: `translate(0, ${50 * overlayScale}px) scale(${overlayScale})`,
|
|
18467
|
-
}, children: [jsxs("div", { children: [convertDistanceByUnits(dimensions.width, unitType).value, " \u00D7", ' ', convertDistanceByUnits(dimensions.height, unitType).value] }), jsxs("div", { style: {
|
|
18468
|
-
display: 'flex',
|
|
18469
|
-
alignItems: 'center',
|
|
18470
|
-
justifyContent: 'center',
|
|
18471
|
-
gap: '10px',
|
|
18472
|
-
}, children: [jsxs("div", { children: ["Active Time: ", activeTime] }), jsx(SvgTransformArrow, {})] })] }) }))] }));
|
|
18428
|
+
}), transform: `translate(${selectionBoxPoints[2].x}, ${selectionBoxPoints[2].y})`, children: jsx("g", { style: { cursor: 'pointer' }, transformOrigin: "center", transform: `translate(-${offsetLeft}, -${offsetLeft}) scale(${scale})`, children: jsx(SvgTransformScale, {}) }) })] }));
|
|
18473
18429
|
})()] }));
|
|
18474
18430
|
};
|
|
18475
18431
|
|
|
@@ -19695,7 +19651,6 @@ function usePolygonDrawing(options = {}) {
|
|
|
19695
19651
|
},
|
|
19696
19652
|
};
|
|
19697
19653
|
});
|
|
19698
|
-
console.log('onSvgClick');
|
|
19699
19654
|
addHistory({
|
|
19700
19655
|
selectElement: {
|
|
19701
19656
|
...editMapInfo.selectElement,
|
|
@@ -19737,7 +19692,6 @@ function usePolygonDrawing(options = {}) {
|
|
|
19737
19692
|
},
|
|
19738
19693
|
};
|
|
19739
19694
|
});
|
|
19740
|
-
console.log('updatePoints');
|
|
19741
19695
|
addHistory({
|
|
19742
19696
|
selectElement: {
|
|
19743
19697
|
...editMapInfo.selectElement,
|
|
@@ -19785,11 +19739,6 @@ const isPointInSvgBounds = (point, svgElement) => {
|
|
|
19785
19739
|
const maxY = minY + height;
|
|
19786
19740
|
// 检查点是否在viewBox范围内
|
|
19787
19741
|
const isInBounds = point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY;
|
|
19788
|
-
console.log('点边界检查:', {
|
|
19789
|
-
point: { x: point.x, y: point.y },
|
|
19790
|
-
viewBox: { minX, minY, maxX, maxY },
|
|
19791
|
-
isInBounds,
|
|
19792
|
-
});
|
|
19793
19742
|
return isInBounds;
|
|
19794
19743
|
}
|
|
19795
19744
|
catch (error) {
|
|
@@ -19816,8 +19765,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
|
|
|
19816
19765
|
// 计算Google Maps容器的中心点
|
|
19817
19766
|
const centerX = mapRect.left + mapRect.width / 2;
|
|
19818
19767
|
const centerY = mapRect.top + mapRect.height / 2;
|
|
19819
|
-
console.log('Google Maps容器中心位置:', { centerX, centerY });
|
|
19820
|
-
console.log('Google Maps容器尺寸:', { width: mapRect.width, height: mapRect.height });
|
|
19821
19768
|
// 直接使用SVG的CTM进行坐标转换
|
|
19822
19769
|
const pt = svgElement.createSVGPoint();
|
|
19823
19770
|
pt.x = centerX;
|
|
@@ -19829,7 +19776,6 @@ const getScreenCenterSvgPoint = (svgElement, mapInstance) => {
|
|
|
19829
19776
|
}
|
|
19830
19777
|
const inv = ctm.inverse();
|
|
19831
19778
|
const svgPoint = pt.matrixTransform(inv);
|
|
19832
|
-
console.log('转换后的SVG坐标:', { x: svgPoint.x, y: svgPoint.y });
|
|
19833
19779
|
// 检查点是否在SVG可见区域内
|
|
19834
19780
|
const point = { x: svgPoint.x, y: svgPoint.y };
|
|
19835
19781
|
if (!isPointInSvgBounds(point, svgElement)) {
|
|
@@ -19934,31 +19880,27 @@ CreateObstacleElement.displayName = 'CreateObstacleElement';
|
|
|
19934
19880
|
|
|
19935
19881
|
const MIN_ELEMENT_WIDTH = 50;
|
|
19936
19882
|
const useCreateVisionOffElement = () => {
|
|
19937
|
-
const { svgRef } = useSvgEditContext();
|
|
19938
19883
|
const { editMapInfo } = useMapEditContext();
|
|
19884
|
+
const { svgViewBox } = useCommonContext();
|
|
19939
19885
|
const centerPoint = useMemo(() => {
|
|
19940
|
-
if (!
|
|
19886
|
+
if (!svgViewBox)
|
|
19941
19887
|
return null;
|
|
19942
|
-
const
|
|
19943
|
-
const center = [
|
|
19944
|
-
baseVal?.x + (baseVal?.width || 0) / 2,
|
|
19945
|
-
baseVal?.y + (baseVal?.height || 0) / 2,
|
|
19946
|
-
];
|
|
19888
|
+
const center = [svgViewBox.x + svgViewBox.width / 2, -svgViewBox.y - svgViewBox.height / 2];
|
|
19947
19889
|
return center;
|
|
19948
|
-
}, [
|
|
19890
|
+
}, [svgViewBox]);
|
|
19949
19891
|
const elementWidth = useMemo(() => {
|
|
19950
|
-
if (!
|
|
19892
|
+
if (!svgViewBox)
|
|
19951
19893
|
return MIN_ELEMENT_WIDTH;
|
|
19952
|
-
const baseVal =
|
|
19953
|
-
if (baseVal && baseVal /
|
|
19954
|
-
return baseVal /
|
|
19894
|
+
const baseVal = Math.min(svgViewBox.width, svgViewBox.height);
|
|
19895
|
+
if (baseVal && baseVal / 4 > MIN_ELEMENT_WIDTH) {
|
|
19896
|
+
return baseVal / 4;
|
|
19955
19897
|
}
|
|
19956
19898
|
return MIN_ELEMENT_WIDTH;
|
|
19957
|
-
}, [
|
|
19899
|
+
}, [svgViewBox]);
|
|
19958
19900
|
const getVisionOffPoints = useCallback(() => {
|
|
19959
|
-
if (!
|
|
19901
|
+
if (!svgViewBox)
|
|
19960
19902
|
return null;
|
|
19961
|
-
const offset = ((
|
|
19903
|
+
const offset = (Math.random() - 0.5) * elementWidth;
|
|
19962
19904
|
const [minX, minY, maxX, maxY] = [
|
|
19963
19905
|
centerPoint[0] - elementWidth / 2 + offset,
|
|
19964
19906
|
centerPoint[1] - elementWidth / 2 + offset,
|
|
@@ -20019,7 +19961,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
|
|
|
20019
19961
|
}, [centerPoint]);
|
|
20020
19962
|
// 调整SVG大小的函数
|
|
20021
19963
|
const adjustSvgSize = (layoutData) => {
|
|
20022
|
-
const padding =
|
|
19964
|
+
const padding = 0; // 添加一些边距以避免内容贴边
|
|
20023
19965
|
const boundWidth = bounds.maxX - bounds.minX + padding * 2;
|
|
20024
19966
|
const boundHeight = bounds.maxY - bounds.minY + padding * 2;
|
|
20025
19967
|
// 防止宽高为0的情况
|
|
@@ -20235,6 +20177,7 @@ const SvgEditMap = forwardRef(({ mapJson, mapConfig, editMap, onEditInfoMapChang
|
|
|
20235
20177
|
left: '50%',
|
|
20236
20178
|
top: '50%',
|
|
20237
20179
|
transform: 'translate(-50%, -50%)',
|
|
20180
|
+
overflow: 'visible',
|
|
20238
20181
|
// cursor: createMode ? 'crosshair' : editMode ? 'default' : 'move',
|
|
20239
20182
|
// pointerEvents: 'auto', // 关键:允许接收鼠标事件
|
|
20240
20183
|
}, xmlns: "http://www.w3.org/2000/svg", "shape-rendering": "geometricPrecision", "text-rendering": "geometricPrecision", "image-rendering": "optimizeQuality", ref: svgRef, onClick: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgClick : undefined, onMouseMove: editMapInfo.createMode && platform !== PlatformType.H5 ? onSvgMouseMove : undefined, children: [jsxs("defs", { children: [jsx("filter", { id: "vertex-tooltip-shadow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: jsx("feDropShadow", { dx: "2", dy: "2", stdDeviation: "2", floodColor: "#000", floodOpacity: "0.12" }) }), jsxs("filter", { id: `path-hover-${DataType.BOUNDARY}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: BOUNDARY_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.VISION_OFF}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: VISION_OFF_AREA_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] }), jsxs("filter", { id: `path-hover-${DataType.OBSTACLE}`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: [jsx("feMorphology", { operator: "dilate", radius: "1", in: "SourceGraphic", result: "border" }), jsx("feFlood", { floodColor: OBSTACLE_STYLES.lineColor, floodOpacity: "1", result: "borderColor" }), jsx("feComposite", { in: "borderColor", in2: "border", operator: "in", result: "coloredBorder" }), jsxs("feMerge", { children: [jsx("feMergeNode", { in: "coloredBorder" }), jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), Object.keys(svgElementDatas)
|
|
@@ -20868,10 +20811,7 @@ const getValidGpsBounds = (mapData, rotation = 0) => {
|
|
|
20868
20811
|
else {
|
|
20869
20812
|
// 最后的fallback:使用默认坐标
|
|
20870
20813
|
console.warn('无法获取有效的GPS边界,使用默认坐标');
|
|
20871
|
-
bounds =
|
|
20872
|
-
sw: [-9.1562, -37.7503],
|
|
20873
|
-
ne: [31.247, 5.797],
|
|
20874
|
-
};
|
|
20814
|
+
bounds = DEFAULT_COORDINATES;
|
|
20875
20815
|
}
|
|
20876
20816
|
}
|
|
20877
20817
|
// 如果有旋转角度,计算旋转后的边界
|
|
@@ -21024,7 +20964,6 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21024
20964
|
overlayScale,
|
|
21025
20965
|
doodleList,
|
|
21026
20966
|
]);
|
|
21027
|
-
// console.log('svgElementDatas->', svgElementDatas, unStructMapData, commonValue);
|
|
21028
20967
|
// 处理地图分区边界
|
|
21029
20968
|
// const partitionBoundary = useMemo(() => {
|
|
21030
20969
|
// const allBoundaryElements = [];
|
|
@@ -21272,8 +21211,7 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21272
21211
|
// 基于固定的参考zoom级别计算overlayScale
|
|
21273
21212
|
const zoomDiff = currentZoom - REFERENCE_ZOOM;
|
|
21274
21213
|
const scale = Math.pow(2, -zoomDiff); // 负数实现反向缩放
|
|
21275
|
-
|
|
21276
|
-
setOverlayScale(scale < 1 ? 1 : scale);
|
|
21214
|
+
setOverlayScale(scale < 1 ? 1 : platform === PlatformType.H5 ? 1.5 * scale : scale);
|
|
21277
21215
|
};
|
|
21278
21216
|
// 使用lodash throttle进行节流处理: 100ms内只执行一次
|
|
21279
21217
|
const handleZoomChanged = throttle$2(updateScale, 50);
|
|
@@ -21355,7 +21293,9 @@ modelType, mapRef, mapJson, pathJson, realTimeData, antennaConfig, onMapLoad, on
|
|
|
21355
21293
|
// 添加视觉失效区
|
|
21356
21294
|
addVisionOffPoint: () => svgEditMapRef.current?.addVisionOffPoint(),
|
|
21357
21295
|
// h5进入视觉失效区编辑模式
|
|
21358
|
-
enterVisionOffEditMode: (mode) =>
|
|
21296
|
+
enterVisionOffEditMode: (mode) => {
|
|
21297
|
+
svgEditMapRef.current?.enterVisionOffEditMode(mode);
|
|
21298
|
+
},
|
|
21359
21299
|
// 重做
|
|
21360
21300
|
redo: () => svgEditMapRef.current?.redo(),
|
|
21361
21301
|
// 撤销
|