feat: 地图“勤务路线”和“干线协调”更换起点终点图标

src/components/TongzhouTrafficMap.vue

@@ -638,69 +638,98 @@ export default {
         const isAbnormal = ["离线", "降级", "故障"].includes(config.name);
         const isRoute = ["干线协调", "勤务路线"].includes(config.name);
 
-        // 动态计算尺寸：起终点最大，异常点次之，普通点最小
-        const size = (type === 'start' || type === 'end') ? '22px' : (isAbnormal ? '30px' : '14px');
-        const sizeNumber = parseInt(size, 10);
-        const paddingNumber = (isAbnormal || type === 'start' || type === 'end') ? 0 : 2;
-        const outerSizeNumber = sizeNumber + paddingNumber * 2;
-
-        // 边框样式：起终点用实白边框
-        const borderStyle = (type === 'start' || type === 'end')
-          ? '2px solid #fff'
-          : '1.5px solid rgba(255,255,255,0.7)';
-
-        // 生成异常状态的图标路径
-        let markerContent = '';
-        if (isAbnormal) {
-          const iconName = config.name === '离线' ? 'lixian' : config.name === '降级' ? 'jiangji' : 'guzhang';
-          markerContent = `
-            <div class="pure-light-node ${isAbnormal ? 'breathe' : ''}"
-                style="
-                  width: ${size};
-                  height: ${size};
-                  background: transparent;
-                  box-shadow: none;
-                  border: none;
-                  box-sizing: content-box;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  cursor: pointer;
-                  padding: ${paddingNumber}px;
-                ">
-              <img src="${require(`@/assets/images/icon_${iconName}.png`)}" style="width: 100%; height: 100%; object-fit: contain;" />
-            </div>
-          `;
-        } else {
-          markerContent = `
-            <div class="pure-light-node ${isAbnormal ? 'breathe' : ''} ${isRoute ? 'route-node' : ''}"
-                style="
-                  width: ${size};
-                  height: ${size};
-                  background: ${config.color || '#999'};
-                  box-shadow: ${isRoute ? 'none' : `0 0 8px ${config.color}`};
-                  border: ${isRoute ? 'none' : borderStyle};
-                  box-sizing: content-box;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  color: #fff;
-                  border-radius: 50%;
-                  cursor: pointer;
-                  padding: ${paddingNumber}px;
-                ">
-              <span style="transform: scale(0.8); font-weight: bold; font-size: 12px;">${displayText}</span>
-            </div>
-          `;
-        }
+      // 动态计算尺寸：起终点最大，异常点次之，普通点最小
+      const isStartEnd = type === 'start' || type === 'end';
+      const size = isStartEnd ? '24px' : (isAbnormal ? '30px' : '14px');
+      const sizeNumber = parseInt(size, 10);
+      const paddingNumber = (isAbnormal || isStartEnd) ? 0 : 2;
+      const outerSizeNumber = sizeNumber + paddingNumber * 2;
+
+      // 边框样式：起终点用实白边框
+      const borderStyle = isStartEnd
+        ? '2px solid #fff'
+        : '1.5px solid rgba(255,255,255,0.7)';
+
+      // 生成标记内容
+      let markerContent = '';
+      if (isStartEnd) {
+        const iconPath = type === 'start' 
+          ? require('@/assets/map/start.png') 
+          : require('@/assets/map/end.png');
+        markerContent = `
+          <div class="pure-light-node start-end-node"
+              style="
+                width: ${size};
+                height: 30px;
+                background: transparent;
+                border: none;
+                display: flex;
+                justify-content: center;
+                align-items: flex-end;
+                cursor: pointer;
+                transform-origin: bottom center;
+              ">
+            <img src="${iconPath}" style="width: 100%; height: auto; object-fit: contain; pointer-events: none;" />
+          </div>
+        `;
+      } else if (isAbnormal) {
+        const iconName = config.name === '离线' ? 'lixian' : config.name === '降级' ? 'jiangji' : 'guzhang';
+        markerContent = `
+          <div class="pure-light-node ${isAbnormal ? 'breathe' : ''}"
+              style="
+                width: ${size};
+                height: ${size};
+                background: transparent;
+                box-shadow: none;
+                border: none;
+                box-sizing: content-box;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                padding: ${paddingNumber}px;
+              ">
+            <img src="${require(`@/assets/images/icon_${iconName}.png`)}" style="width: 100%; height: 100%; object-fit: contain;" />
+          </div>
+        `;
+      } else {
+        markerContent = `
+          <div class="pure-light-node ${isAbnormal ? 'breathe' : ''} ${isRoute ? 'route-node' : ''}"
+              style="
+                width: ${size};
+                height: ${size};
+                background: ${config.color || '#999'};
+                box-shadow: ${isRoute ? 'none' : `0 0 8px ${config.color}`};
+                border: ${isRoute ? 'none' : borderStyle};
+                box-sizing: content-box;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+                border-radius: 50%;
+                cursor: pointer;
+                padding: ${paddingNumber}px;
+              ">
+            <span style="transform: scale(0.8); font-weight: bold; font-size: 12px;">${displayText}</span>
+          </div>
+        `;
+      }
+
+      // 计算偏移量：起点终点底部对齐，其他中心对齐
+      let markerOffset;
+      if (isStartEnd) {
+        // 设置 24px 宽 30px 高，偏移量设置为底部中心对齐
+        markerOffset = new this.AMap.Pixel(-12, -30);
+      } else {
+        markerOffset = new this.AMap.Pixel(-Math.round(outerSizeNumber / 2), -Math.round(outerSizeNumber / 2));
+      }
 
-        const marker = new this.AMap.Marker({
-          position: [lng, lat],
-          // 这里的 type 已经从参数拿到了，不会报错了
-          zIndex: (type === 'start' || type === 'end') ? 120 : (isAbnormal ? 110 : 100),
-          content: markerContent,
-          offset: new this.AMap.Pixel(-Math.round(outerSizeNumber / 2), -Math.round(outerSizeNumber / 2)),
-          extData: {
+      const marker = new this.AMap.Marker({
+        position: [lng, lat],
+        zIndex: isStartEnd ? 120 : (isAbnormal ? 110 : 100),
+        content: markerContent,
+        offset: markerOffset,
+        extData: {
             ...config,
             position: [lng, lat],
             statusColor: config.color || '#999',