fix: adjust yak trade flow map positions

src/views/yakManagement/index.vue

@@ -730,27 +730,27 @@ const tradeFlowFallbackSlots = [
   { lng: 116.407387, lat: 39.904179 },
 ]
 const tradeFlowProvinceVisualCenters = {
-  四川: { visualLng: 106.4, visualLat: 28.5, labelSide: "bottom" },
+  四川: { visualLng: 106.4, visualLat: 28.5, visualX: 0.78, visualY: -2.15, labelSide: "bottom" },
-  青海: { visualLng: 95.2, visualLat: 37.6, labelSide: "left" },
+  青海: { visualLng: 95.2, visualLat: 37.6, visualX: -2.1, visualY: 0.62, labelSide: "left" },
-  甘肃: { visualLng: 100.4, visualLat: 42.0, labelSide: "top" },
+  甘肃: { visualLng: 100.4, visualLat: 42.0, visualX: -0.82, visualY: 2.18, labelSide: "top" },
-  重庆: { visualLng: 109.8, visualLat: 28.2, labelSide: "bottom-right" },
+  重庆: { visualLng: 109.8, visualLat: 28.2, visualX: 1.72, visualY: -2.02, labelSide: "bottom-right" },
-  陕西: { visualLng: 110.2, visualLat: 36.2, labelSide: "right" },
+  陕西: { visualLng: 110.2, visualLat: 36.2, visualX: 1.64, visualY: 0.48, labelSide: "right" },
-  云南: { visualLng: 99.6, visualLat: 24.0, labelSide: "bottom-left" },
+  云南: { visualLng: 99.6, visualLat: 24.0, visualX: -0.82, visualY: -2.82, labelSide: "bottom-left" },
-  西藏: { visualLng: 88.6, visualLat: 30.0, labelSide: "bottom-left" },
+  西藏: { visualLng: 88.6, visualLat: 30.0, visualX: -3.45, visualY: -1.35, labelSide: "bottom-left" },
-  新疆: { visualLng: 85.8, visualLat: 43.6, labelSide: "top-left" },
+  新疆: { visualLng: 85.8, visualLat: 43.6, visualX: -4.05, visualY: 2.38, labelSide: "top-left" },
-  北京: { visualLng: 118.2, visualLat: 41.0, labelSide: "top-right" },
+  北京: { visualLng: 118.2, visualLat: 41.0, visualX: 3.55, visualY: 1.72, labelSide: "top-right" },
-  上海: { visualLng: 122.2, visualLat: 31.5, labelSide: "right" },
+  上海: { visualLng: 122.2, visualLat: 31.5, visualX: 4.12, visualY: -0.86, labelSide: "right" },
-  广东: { visualLng: 116.0, visualLat: 22.4, labelSide: "bottom-right" },
+  广东: { visualLng: 116.0, visualLat: 22.4, visualX: 3.18, visualY: -2.92, labelSide: "bottom-right" },
 }
 const tradeFlowFallbackVisualCenters = [
-  { visualLng: 91.8, visualLat: 42.2, labelSide: "top-left" },
+  { visualLng: 91.8, visualLat: 42.2, visualX: -3.52, visualY: 2.18, labelSide: "top-left" },
-  { visualLng: 114.0, visualLat: 40.6, labelSide: "top-right" },
+  { visualLng: 114.0, visualLat: 40.6, visualX: 2.72, visualY: 1.86, labelSide: "top-right" },
-  { visualLng: 122.0, visualLat: 31.4, labelSide: "right" },
+  { visualLng: 122.0, visualLat: 31.4, visualX: 4.0, visualY: -0.82, labelSide: "right" },
-  { visualLng: 116.0, visualLat: 22.4, labelSide: "bottom-right" },
+  { visualLng: 116.0, visualLat: 22.4, visualX: 3.18, visualY: -2.9, labelSide: "bottom-right" },
-  { visualLng: 98.4, visualLat: 24.6, labelSide: "bottom-left" },
+  { visualLng: 98.4, visualLat: 24.6, visualX: -1.22, visualY: -2.68, labelSide: "bottom-left" },
-  { visualLng: 89.0, visualLat: 30.2, labelSide: "bottom-left" },
+  { visualLng: 89.0, visualLat: 30.2, visualX: -3.32, visualY: -1.28, labelSide: "bottom-left" },
-  { visualLng: 104.4, visualLat: 43.0, labelSide: "top" },
+  { visualLng: 104.4, visualLat: 43.0, visualX: 0.2, visualY: 2.78, labelSide: "top" },
-  { visualLng: 106.4, visualLat: 28.5, labelSide: "bottom" },
+  { visualLng: 106.4, visualLat: 28.5, visualX: 0.78, visualY: -2.15, labelSide: "bottom" },
 ]
 
 const viewTopics = [
@@ -2389,12 +2389,12 @@ function getTradeFlowVisualCenter(province, index = 0) {
 }
 
 function getTradeFlowVisualOffset(index = 0, groupIndex = 0, groupSize = 1) {
-  if (groupSize <= 1) return { lng: 0, lat: 0 }
+  if (groupSize <= 1) return { lng: 0, lat: 0, x: 0, y: 0 }
-  const radius = Math.min(1.6, 0.62 + groupSize * 0.18)
+  const radius = Math.min(0.52, 0.26 + groupSize * 0.05)
   const angle = -0.9 + (Math.PI * 1.45 * groupIndex) / Math.max(groupSize - 1, 1)
-  const lng = Math.cos(angle) * radius + (index % 2 === 0 ? -0.08 : 0.08)
+  const x = Math.cos(angle) * radius + (index % 2 === 0 ? -0.04 : 0.04)
-  const lat = Math.sin(angle) * radius * 0.58
+  const y = Math.sin(angle) * radius * 0.58
-  return { lng, lat }
+  return { lng: x * 1.6, lat: y * 1.6, x, y }
 }
 
 function getTradeFlowEndpoint(name, index = 0, groupIndex = 0, groupSize = 1) {
@@ -2408,6 +2408,8 @@ function getTradeFlowEndpoint(name, index = 0, groupIndex = 0, groupSize = 1) {
       ...tradeFlowPlaceCenters[matchedPlaceKey],
       visualLng: visualCenter.visualLng + offset.lng,
       visualLat: visualCenter.visualLat + offset.lat,
+      visualX: visualCenter.visualX + offset.x,
+      visualY: visualCenter.visualY + offset.y,
       labelSide: visualCenter.labelSide,
       province: province || matchedPlaceKey,
     }
@@ -2420,6 +2422,8 @@ function getTradeFlowEndpoint(name, index = 0, groupIndex = 0, groupSize = 1) {
       ...tradeFlowProvinceCenters[matchedKey],
       visualLng: visualCenter.visualLng + offset.lng,
       visualLat: visualCenter.visualLat + offset.lat,
+      visualX: visualCenter.visualX + offset.x,
+      visualY: visualCenter.visualY + offset.y,
       labelSide: visualCenter.labelSide,
       province: matchedKey,
     }
@@ -2431,6 +2435,8 @@ function getTradeFlowEndpoint(name, index = 0, groupIndex = 0, groupSize = 1) {
     ...fallback,
     visualLng: visualCenter.visualLng + offset.lng,
     visualLat: visualCenter.visualLat + offset.lat,
+    visualX: visualCenter.visualX + offset.x,
+    visualY: visualCenter.visualY + offset.y,
     labelSide: visualCenter.labelSide,
     province: "全国流向",
   }