atchain-mapbox-vue/composables/useMapBoxConstants.ts

A Vue 3 MapBox component library with subway lines, stations, markers and polygons support. Zero dependencies except Vue 3 and Mapbox GL JS.

/**
 * MapBox 组件常量定义
 */

// 地球半径（公里）
export const EARTH_RADIUS_KM = 6371

// 地铁相关常量
export const SUBWAY_SOURCE_ID = 'subway-lines'
export const SUBWAY_BASE_LAYER_ID = 'subway-lines-base'
export const SUBWAY_ANIMATED_LAYER_ID = 'subway-lines-animated'

// 站点相关常量
export const STATION_SOURCE_ID = 'subway-stations'
export const STATION_LAYER_ID = 'subway-stations-layer'
export const STATION_LABEL_LAYER_ID = 'subway-stations-labels'

// 上海地铁线路配色方案
export const SUBWAY_LINE_COLORS: Record<string, string> = {
  "1": "#E4002B",    // 红色
  "2": "#00AD56",    // 绿色  
  "3": "#FFD100",    // 黄色
  "4": "#652C91",    // 紫色
  "5": "#784421",    // 棕色
  "6": "#E936A7",    // 粉色
  "7": "#F3A546",    // 橙色
  "8": "#00B5E2",    // 蓝色
  "9": "#91C7E8",    // 浅蓝色
  "10": "#C8ACD6",   // 淡紫色
  "11": "#8C2323",   // 深红色
  "12": "#007B5F",   // 深绿色
  "13": "#F173AC",   // 玫瑰色
  "14": "#825A2C",   // 深棕色
  "15": "#68217A",   // 深紫色
  "16": "#00B7A6",   // 青色
  "17": "#C9234A",   // 深粉色
  "18": "#F0C05A",   // 金黄色
  "磁浮": "#FF6600"   // 橙红色
}

// 默认样式配置
export const DEFAULT_STYLES = {
  // 地铁线路样式
  subway: {
    baseLineWidth: 6,
    baseLineOpacity: 0.4,
    animatedLineWidth: 6,
    animatedLineDashArray: [0, 4, 3] as [number, number, number],
    animatedLineEmissiveStrength: 1
  },
  
  // 站点样式
  station: {
    normalRadius: 6,
    interchangeRadius: 8,
    strokeWidth: 2,
    strokeColor: '#333333',
    opacity: 0.9,
    defaultColor: '#ffffff'
  },
  
  // 站点标签样式
  stationLabel: {
    normalFontSize: 12,
    interchangeFontSize: 14,
    textColor: '#333333',
    haloColor: '#ffffff',
    haloWidth: 2,
    textOpacity: 0.9,
    textOffset: [0, 2] as [number, number],
    textAnchor: 'top' as const,
    fonts: ['Open Sans Semibold', 'Arial Unicode MS Bold'] as string[]
  }
} as const

// 动画配置
export const ANIMATION_CONFIG = {
  // 地铁线路动画序列
  dashArraySequence: [
    [0, 4, 3],
    [0.5, 4, 2.5],
    [1, 4, 2],
    [1.5, 4, 1.5],
    [2, 4, 1],
    [2.5, 4, 0.5],
    [3, 4, 0],
    [0, 0.5, 3, 3.5],
    [0, 1, 3, 3],
    [0, 1.5, 3, 2.5],
    [0, 2, 3, 2],
    [0, 2.5, 3, 1.5],
    [0, 3, 3, 1],
    [0, 3.5, 3, 0.5]
  ] as number[][],
  
  // 动画帧间隔（毫秒）
  frameInterval: 50,
  
  // 图层调整延时
  layerAdjustDelay: 50,
  stationLayerAdjustDelay: 100
} as const

// 默认配置
export const DEFAULT_CONFIG = {
  // 默认渲染半径
  defaultSubwayRenderRadius: 8,
  defaultStationRenderRadius: 15,
  
  // 数据获取配置
  dataFetch: {
    timeout: 10000,
    retries: 3,
    retryDelay: 1000
  }
} as const