底图省界部分修改

web/package.json

@@ -38,7 +38,8 @@
     "d3": "^7.9.0",
     "default-passive-events": "^2.0.0",
     "docx-preview": "^0.3.0",
-    "echarts": "^5.2.2",
+    "echarts": "^5.6.0",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.2.27",
     "github-markdown-css": "^5.1.0",
     "highlight.js": "^10.7.2",

web/src/components/trajectory/index.vue

@@ -19,7 +19,7 @@ import worldMap from './newJson.json'
 const DEFAULT_MAP_SIZE = { width: 800, height: 600 }
 const PROJECTION_CENTER = [104, 37] // 中国地理中心近似坐标
 const SCALE_FACTORS = { normal: 600, fullscreen: 1000 }
-
+const isRouteInitialized = ref(false) // 原initqie，重命名以明确含义
 // ==================== 组件Props/Emits ====================
 const props = defineProps({
   coordinates: {
@@ -143,7 +143,13 @@ const renderChinaProvinces = (projection) => {
     .append('path')
     .attr('class', 'province-path')
     .attr('d', pathGenerator)
-    .attr('fill', 'none')
+    .attr('fill', d => {
+      // 动态颜色分配
+      if (d.properties.name === '四川省' || d.properties.name === "台湾省") {
+        return 'none'
+      }
+      return '#e7e7e7'
+    })
     .attr('stroke', '#000')
     .attr('stroke-width', 0.2)
 
@@ -155,7 +161,15 @@ const renderChinaProvinces = (projection) => {
     .attr('class', 'province-label')
     .attr('transform', d => {
       const centroid = pathGenerator.centroid(d)
-      return `translate(${centroid[0]},${centroid[1]})`
+      let [x, y] = centroid
+      // 对河北省进行偏移
+      if (d.properties.name === '河北省') {
+        x -= 3; y += 10;
+      } else if (d.properties.name === '甘肃省') {
+        x -= 3; y -= 10;
+      }
+
+      return `translate(${x},${y})`
     })
     .text(d => d.properties.name || '')
     .attr('text-anchor', 'middle')
@@ -185,9 +199,12 @@ const updateRoute = () => {
   const pathGenerator = d3.geoPath().projection(projection)
 
   // 清理旧路线
-  routeGroup.selectAll('.route-path').remove()
-  markersGroup.selectAll('*').remove()
-
+  if (isRouteInitialized.value) {
+    routeGroup.selectAll('.route-path').remove()
+    markersGroup.selectAll('*').remove()
+    isRouteInitialized.value = false
+    emit('qvehuan1', isRouteInitialized.value)
+  }
   // 绘制新路线
   renderRoutePath(pathGenerator)
   renderMarkers(projection)
@@ -199,7 +216,7 @@ const renderRoutePath = (path) => {
     coordinates: props.coordinates
   }
 
-  routeGroup.selectAll('.route-path').remove()
+  // routeGroup.selectAll('.route-path').remove()
 
   routeGroup.append('path')
     .datum(routeData)
@@ -274,7 +291,8 @@ onBeforeUnmount(() => {
 
 // ==================== 响应式监听 ====================
 watch(() => props.qvehuan, (newVal) => {
-  if (!newVal) updateRoute()
+  isRouteInitialized.value = newVal
+  updateRoute()
 })
 
 watch(() => props.coordinates, () => {