Commit 684d2ae5 authored by Sparkf's avatar Sparkf 🏙️
Browse files

use different icon for different lines 

	modified:   docs/.vuepress/components/RealtimeMapv2.vue
	modified:   docs/.vuepress/components/TabView.vue
	modified:   docs/transport/bustimer-wx.md
	modified:   docs/transport/bustimer.md
parent bb6c991c

docs/.vuepress/components/RealtimeMapv2.vue

+32 −23
Original line number Diff line number Diff line
@@ -28,6 +28,28 @@ export default { 
      mapTextColor: '#000000',

      mapTextHaloColor: '#FFFFFF', // 为文字描边颜色创建一个状态



      // 配置表，每条线路单独定义方向映射 & 颜色

      routeConfig: {

        NKDH1: {

          name: 'L1',

          directions: { '0': '顺时针🔁CW', '1': '' },

          icon: 'https://bus.sustcra.com/static/icon/bus-icon-NKDH1.png',

          color: '#4ca963'

        },

        NKDH2: {

          name: 'L2',

          directions: { '0': '逆时针🔄CCW', '1': '' },

          icon: 'https://bus.sustcra.com/static/icon/bus-icon-NKDH2.png',

          color: '#db7490'

        },

        SEV: { // 新增的路线

          name: '电瓶车',

          directions: { '-1': '' },

          icon: 'https://bus.sustcra.com/static/icon/bus-icon-SEV.png',

          color: '#7030a1'

        }

      },



      // --- Data Placeholders ---

      // 在这里填入你的线路GeoJSON坐标数据

      geojson_NKDH1: [],
@@ -339,6 +361,14 @@ export default { 
          const busEl = document.createElement('div');

          busEl.className = 'bus-marker';



          // [核心修改] 根据 route_code 获取对应的图片

          const config = this.routeConfig[bus.route_code];

          // 如果找不到配置，使用原来的默认图片作为 fallback

          const iconUrl = config ? config.icon : 'https://bus.sustcra.com/bus-icon-view.png';



          // 动态设置背景图片

          busEl.style.backgroundImage = `url('${iconUrl}')`;



          const marker = new maplibre.Marker({ element: busEl, anchor: 'center' })

              .setLngLat([bus.lng, bus.lat])

              .setPopup(this.createBusInfoPopup(bus))
@@ -442,32 +472,12 @@ export default { 
    },



    createBusInfoPopup(bus) {

      // 配置表，每条线路单独定义方向映射 & 颜色

      const routeConfig = {

        NKDH1: {

          name: 'L1',

          directions: { '0': '顺时针 Clockwise', '1': '' },

          color: '#4ca963'

        },

        NKDH2: {

          name: 'L2',

          directions: { '0': '逆时针 Counter-Clockwise', '1': '' },

          color: '#db7490'

        },

        SEV: { // 新增的路线

          name: '电瓶车',

          directions: { '-1': '' },

          color: '#7030a1'

        }

      };

      const config = this.routeConfig[bus.route_code] || {};



      // 使用时直接查表

      const lineNum = routeConfig[bus.route_code]?.name || bus.route_code;

      const config = routeConfig[bus.route_code] || {};

      const lineNum = config.name || bus.route_code;

      const direction = config.directions?.[bus.route_dir] ?? '';

      const color = config.color ?? '#cccccc';





      const html = `

        <div class="bus-popup">

          <div class="plate">${bus.id.slice(2)} (${bus.speed} km/h)</div>
@@ -576,7 +586,6 @@ export default { 
.bus-marker {

  width: 25px;

  height: 25px;

  background-image: url('https://bus.sustcra.com/bus-icon-view.png');

  background-size: contain;

  background-repeat: no-repeat;

  cursor: pointer;

docs/.vuepress/components/TabView.vue

+0 −1
Original line number Diff line number Diff line
@@ -15,7 +15,6 @@ 
      <div v-if="currentSelect === 'bus-location'">

        <div class="bus-location-hint" v-if="showMapChart">

          <b>位置每5秒自动刷新。</b>Location refreshes automatically every 5 seconds.<br>

          <b>由于线路调整，实时到站时间功能暂时停用。请参考时刻表计划行程。</b>Arrival estimates are not available now due to route adjustments. Please refer to the timetable to plan your trip.<br>>

        </div>

        <RealtimeMapv2 v-if="showMapChart" />

        <!-- <BusETAdemo /> -->

docs/transport/bustimer-wx.md

+4 −6
Original line number Diff line number Diff line
@@ -5,8 +5,10 @@ navbar: false 
# 🚌校园巴士时刻表 SUSTech Campus Bus Info

<BusAnnouncement />



<b>自 2025.11.24 起，校巴改用环线运行。南科手册上的内容正在更新，以适配新运行图。请各位同学参考如下指引乘车。</b>

This page is being updated after the route change at 2025.11.24. As of now, please refer the the following guide to plan your trip.

<ClientOnly>

  <TabView :isMapTabEnabled="true"></TabView>

</ClientOnly>





![](https://mirrors.sustech.edu.cn/site/sustech-online/img/campus-map/sustech_bus_map_2025.11.24.svg)
@@ -14,10 +16,6 @@ This page is being updated after the route change at 2025.11.24. As of now, plea 


<hr>



<ClientOnly>

  <TabView :isMapTabEnabled="true"></TabView>

</ClientOnly>



![](https://mirrors.sustech.edu.cn/site/sustech-online/img/misc/nces-ad.svg)

[**（点此访问NCES）**](https://ncesnext.com/)

docs/transport/bustimer.md

+4 −12
Original line number Diff line number Diff line 
# 🚌校园巴士时刻表 SUSTech Campus Bus Info

<BusAnnouncement />



<b>自 2025.11.24 起，校巴改用环线运行。南科手册上的内容正在更新，以适配新运行图。请各位同学参考如下指引乘车。</b>

This page is being updated after the route change at 2025.11.24. As of now, please refer the the following guide to plan your trip.

<ClientOnly>

  <TabView :isMapTabEnabled="true"></TabView>

</ClientOnly>



![](https://mirrors.sustech.edu.cn/site/sustech-online/img/campus-map/sustech_bus_map_2025.11.24.svg)



![](https://mirrors.sustech.edu.cn/site/sustech-online/img/campus-map/sustech_bus_schedule_2025.11.24.svg)



<hr>



<div id="button-div">

<div class='bt-sub-new'><a href="./">🚌校园地图与校巴线路图查看🚌</a></div>

</div>



<hr>



<style>
@@ -25,9 +19,7 @@ This page is being updated after the route change at 2025.11.24. As of now, plea 
}

</style>



<ClientOnly>

  <TabView :isMapTabEnabled="true"></TabView>

</ClientOnly>





*如需切换亮/暗主题，请切换后刷新页面*

CRA Git | Maintained and supported by SUSTech CRA and CCSE