dijkstra-subway-line-search
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.css">
    <style type="text/css">
      .btn-container {
        display: flex;
        justify-content: space-around;
      }
    </style>
    <title>Dijkstra</title>
  </head>
  <body>
    <h1 style="text-align: center;margin-bottom: 60px;">Dijkstra算法地铁寻路演示</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h2>起点站</h2>
        </div>
        <div class="col-md-6">
          <h2>终点站</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <select id="start-line-select" class="form-control"></select>
        </div>
        <div class="col-md-3">
          <select id="start-station-select" class="form-control"></select>
        </div>
         <div class="col-md-3">
           <select id="end-line-select" class="form-control"></select>
         </div>
         <div class="col-md-3">
           <select id="end-station-select" class="form-control"></select>
         </div>
      </div>

      <div class="row btn-container mt-5">
        <button class="btn btn-primary" id="search-route">查询</button>
      </div>

      <div id="path-search-result"></div>

    </div>
  </body>
</html>


<script type="module">
  import data from './test_data.js'
  import Dijkstra from './js/Dijkstra.js'

  const startLineSelect = document.getElementById('start-line-select')
  const startStationSelect = document.getElementById('start-station-select')
  const endLineSelect = document.getElementById('end-line-select')
  const endStationSelect = document.getElementById('end-station-select')

  let lineOptions = '<option disabled selected>请选择</option>'
  const lineMap = new Map()
  data.forEach(each => {
    lineOptions += `<option value="${each['name']}">${each['name']}</option>`
    lineMap.set(each['name'], each['stations'])
  })

  startLineSelect.innerHTML = lineOptions
  endLineSelect.innerHTML = lineOptions

  function onChange(e) {
    const stations = lineMap.get(this.value)
    let stationOptions = ''
    stations.forEach(item => {
      stationOptions += `<option value="${item}">${item}</option>`
    })

    if(e.target.id == 'start-line-select') {
      startStationSelect.innerHTML = stationOptions
    } else {
      endStationSelect.innerHTML = stationOptions
    }
  }

  startLineSelect.onchange = onChange
  endLineSelect.onchange = onChange

  Dijkstra.initData(data)

  document.getElementById('search-route').onclick = () => {
    const startStation = startStationSelect.value
    const endStation = endStationSelect.value

    const pathList = Dijkstra.searchPath(startStation, endStation)
    console.log(JSON.stringify(pathList))

    if ((pathList.length == 1 && pathList[0].distance == 9999) || pathList.length == 0) {
      document.getElementById("path-search-result").innerHTML = "未查询到路线"
      return
    }

    let innerHTML = ''

    pathList.forEach(path => {
      innerHTML += `<h3>${path.lineName}</h3>`
      innerHTML += `<p>${path.stationList.join("--->")}</p>`
    })
    document.getElementById("path-search-result").innerHTML = innerHTML
  }
</script>