Spaces:

chienweichang
/

poi_data_frontend

Sleeping

App Files Files Community

chienweichang commited on Jun 6, 2024

Commit

50c0328

verified ·

1 Parent(s): c107815

Upload 6 files

Browse files

Files changed (6) hide show

Dockerfile +20 -0
index.html +93 -0
main.js +252 -0
no-image-icon-23494.png +0 -0
styles.css +118 -0
worker.js +9 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,20 @@

+# 使用 Node.js 官方鏡像作為基礎鏡像
+FROM node:14
+# 設置工作目錄
+WORKDIR /app
+# 複製 package.json 和 package-lock.json（如果有）
+COPY package*.json ./
+# 安裝依賴
+RUN npm install
+# 複製應用程序文件
+COPY . .
+# 暴露應用運行的端口
+EXPOSE 8080
+# 運行應用程序
+CMD ["npx", "http-server", "-p", "8080"]

index.html ADDED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>POI Map</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div id="map"></div>
+  <div id="controls" class="container-fluid">
+    <div class="row mb-2">
+      <div class="col-md-4 col-12">
+        <div class="form-group">
+          <label for="poiTypeSelect">選擇POI類型</label>
+          <select id="poiTypeSelect" class="form-control">
+            <option value="all">All</option>
+            <option value="mrt">MRT</option>
+            <option value="school">SCHOOL</option>
+            <option value="landfill">LANDFILL</option>
+            <option value="hospital">HOSPITAL</option>
+            <option value="collage">COLLAGE</option>
+            <option value="park">PARK</option>
+            <option value="financial_industry">FINANCIAL_INDUSTRY</option>
+            <option value="entertainment">ENTERTAINMENT</option>
+            <option value="shopping">SHOPPING</option>
+            <option value="temple">TEMPLE</option>
+            <option value="funeral_industry">FUNERAL_INDUSTRY</option>
+            <option value="night_market">NIGHT_MARKET</option>
+            <option value="hsr">HSR</option>
+            <option value="gas_station">GAS_STATION</option>
+            <option value="station">STATION</option>
+            <option value="bus_station">BUS_STATION</option>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-4 col-6">
+        <div class="form-group">
+          <label for="latInput">輸入緯度</label>
+          <input type="text" id="latInput" class="form-control" placeholder="輸入緯度" />
+        </div>
+      </div>
+      <div class="col-md-4 col-6">
+        <div class="form-group">
+          <label for="lngInput">輸入經度</label>
+          <input type="text" id="lngInput" class="form-control" placeholder="輸入經度" />
+        </div>
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col-12">
+        <button id="searchButton" class="btn btn-primary">查詢最近的前10個POI</button>
+        <button id="uploadButton" class="btn btn-secondary">上傳POI數據</button>
+        <input type="file" id="fileInput" style="display:none">
+        <button id="clearButton" class="btn btn-danger">清除POI</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12 d-md-block">
+        <div id="info" class="mt-3"></div>
+      </div>
+    </div>
+  </div>
+  <div id="legend" class="legend"></div>
+  <!-- 確認/取消通知模態框 -->
+  <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="confirmationModalLabel">確認操作</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" id="confirmationMessage"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+          <button type="button" class="btn btn-primary" id="confirmButton">確認</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,252 @@

+// 初始化地圖
+var map = L.map('map').setView([23.5, 121], 8);
+console.log('地圖初始化成功'); // 調試代碼
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  maxZoom: 18,
+  errorTileUrl: 'no-image-icon-23494.png' // 可選：設置錯誤時的替代圖像
+}).addTo(map).on('tileerror', function(error) {
+  console.error('地圖圖層加載失敗', error); // 調試代碼
+});
+console.log('圖層添加成功'); // 調試代碼
+// 測試地圖圖層加載
+fetch('https://a.tile.openstreetmap.org/0/0/0.png')
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.blob();
+  })
+  .then(blob => {
+    console.log('地圖圖層加載成功');
+  })
+  .catch(error => {
+    console.error('地圖圖層加載失敗', error);
+  });
+// 定義顏色對應的poi_type
+var poiTypeColors = {
+  "mrt": "red",
+  "school": "blue",
+  "landfill": "green",
+  "hospital": "yellow",
+  "collage": "purple",
+  "park": "orange",
+  "financial_industry": "cyan",
+  "entertainment": "magenta",
+  "shopping": "lime",
+  "temple": "brown",
+  "funeral_industry": "navy",
+  "night_market": "olive",
+  "hsr": "teal",
+  "gas_station": "pink",
+  "station": "coral",
+  "bus_station": "gold"
+};
+// 創建標記圖層
+var markersLayer = L.layerGroup().addTo(map);
+var poiMarkers = {};
+var selectedMarker = null; // 用於保存所選位置的標記
+// 動態生成下拉選單選項
+var select = document.getElementById('poiTypeSelect');
+var latInput = document.getElementById('latInput');
+var lngInput = document.getElementById('lngInput');
+var searchButton = document.getElementById('searchButton');
+var uploadButton = document.getElementById('uploadButton');
+var clearButton = document.getElementById('clearButton');
+var fileInput = document.getElementById('fileInput');
+var confirmationModal = $('#confirmationModal');
+var confirmationMessage = document.getElementById('confirmationMessage');
+var confirmButton = document.getElementById('confirmButton');
+// 監聽POI類型選擇改變事件
+select.addEventListener('change', function(e) {
+  var selectedType = e.target.value;
+  // 使用者選擇POI類型後，自動取得當前地圖中心點的經緯度進行查詢
+  var center = map.getCenter();
+  searchNearestPOIs(center.lat, center.lng, selectedType);
+});
+searchButton.addEventListener('click', function() {
+  var lat = parseFloat(latInput.value);
+  var lng = parseFloat(lngInput.value);
+  var poiType = select.value;
+  if (!isNaN(lat) && !isNaN(lng)) {
+    setMarker(lat, lng);
+    searchNearestPOIs(lat, lng, poiType);
+  } else {
+    alert('請輸入有效的經緯度');
+  }
+});
+// 上傳POI數據
+uploadButton.addEventListener('click', function() {
+  fileInput.click();
+});
+fileInput.addEventListener('change', function() {
+  var file = fileInput.files[0];
+  if (file) {
+    confirmationMessage.textContent = '確定要上傳這個POI數據文件嗎？';
+    confirmButton.onclick = function() {
+      var formData = new FormData();
+      formData.append("file", file);
+      fetch('https://chienweichang-poi-data.hf.space/upload-poi', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => response.json())
+      .then(data => {
+        confirmationModal.modal('hide');
+      })
+      .catch(error => {
+        console.error('Error uploading POI data:', error);
+        confirmationModal.modal('hide');
+        alert('上傳POI數據失敗');
+      });
+    };
+    confirmationModal.modal('show');
+  }
+});
+// 清除POI
+clearButton.addEventListener('click', function() {
+  confirmationMessage.textContent = '確定要清除所有POI數據嗎？';
+  confirmButton.onclick = function() {
+    fetch('https://chienweichang-poi-data.hf.space/clear-kdtrees', {
+      method: 'POST'
+    })
+    .then(response => response.json())
+    .then(data => {
+      confirmationModal.modal('hide');
+    })
+    .catch(error => {
+      console.error('Error clearing POI:', error);
+      confirmationModal.modal('hide');
+      alert('清除POI失敗');
+    });
+  };
+  confirmationModal.modal('show');
+});
+// 查詢最近的POI
+function searchNearestPOIs(lat, lng, poiType) {
+  // 清空現有標記
+  markersLayer.clearLayers();
+  poiMarkers = {};
+  // 調用後端API獲取最近的POI
+  fetch(`https://chienweichang-poi-data.hf.space/poi/nearest?lat=${lat}&lng=${lng}&poi_type=${poiType}`)
+    .then(response => response.json())
+    .then(data => {
+      if (data && data.length > 0) {
+        let infoHtml = generatePOITable(data);
+        document.getElementById('info').innerHTML = infoHtml;
+        // 更新地圖圖例
+        updateLegend(new Set(data.map(poi => poi.poi_type)));
+        // 為每個表格行添加點擊事件
+        data.forEach((poi, index) => {
+          document.getElementById(`poi-${index}`).addEventListener('click', () => {
+            var marker = poiMarkers[index];
+            map.setView(marker.getLatLng(), 15);  // 跳轉到POI位置並放大地圖
+            marker.openPopup();  // 開啟POI的彈出訊息
+            // 取消之前選中的標記樣式
+            Object.values(poiMarkers).forEach(m => m.getElement().classList.remove('highlight'));
+            // 添加選中標記的樣式
+            marker.getElement().classList.add('highlight');
+          });
+        });
+      } else {
+        document.getElementById('info').innerHTML = `沒有找到附近的 POI`;
+      }
+    })
+    .catch(error => {
+      console.error('Error fetching nearest POI:', error);
+      document.getElementById('info').innerHTML = `錯誤：無法獲取最近的POI`;
+    });
+}
+function generatePOITable(data) {
+  let infoHtml = `<table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th scope="col">名稱</th>
+                        <th scope="col">類型</th>
+                        <th scope="col">距離 (米)</th>
+                      </tr>
+                    </thead>
+                    <tbody>`;
+  data.forEach((poi, index) => {
+    var customIcon = L.divIcon({
+      className: 'custom-icon',
+      html: `<div style="background-color: ${poiTypeColors[poi.poi_type] || 'gray'}; width: 12px; height: 12px;"></div>`
+    });
+    var marker = L.marker([poi.latitude, poi.longitude], { icon: customIcon })
+      .bindPopup(`<b>${poi.name}</b><br>距離：${poi.distance} 米`)
+      .bindTooltip(`<b>${poi.name}</b><br>距離：${poi.distance} 米`, { permanent: false, direction: 'top' })
+      .addTo(markersLayer);
+    // 保存marker以便後續使用
+    poiMarkers[index] = marker;
+    infoHtml += `<tr id="poi-${index}" class="poi-row">
+                   <td>${poi.name}</td>
+                   <td>${poi.poi_type}</td>
+                   <td>${poi.distance}</td>
+                 </tr>`;
+  });
+  infoHtml += `</tbody></table>`;
+  return infoHtml;
+}
+// 點擊地圖事件
+map.on('click', function(e) {
+  var lat = e.latlng.lat;
+  var lng = e.latlng.lng;
+  var poiType = select.value;
+  latInput.value = lat.toFixed(6);
+  lngInput.value = lng.toFixed(6);
+  setMarker(lat, lng);
+  searchNearestPOIs(lat, lng, poiType);
+});
+// 在地圖上設置或更新標記
+function setMarker(lat, lng) {
+  if (selectedMarker) {
+    map.removeLayer(selectedMarker);
+  }
+  selectedMarker = L.marker([lat, lng], {
+    icon: L.icon({
+      iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
+      shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
+      iconAnchor: [12, 41], // 設置圖標的錨點為圖標底部中心
+      shadowAnchor: [13, 41], // 設置陰影的錨點為陰影底部中心
+      popupAnchor: [0, -41] // 設置彈出框的錨點為圖標頂部
+    })
+  }).addTo(map);
+  map.setView([lat, lng], 15);  // 跳轉到所選位置並放大地圖
+}
+// 更新地圖圖例
+function updateLegend(displayedTypes) {
+  var legendHtml = '<b>圖例</b><br>';
+  displayedTypes.forEach(type => {
+    legendHtml += `<i style="background:${poiTypeColors[type]}; width: 12px; height: 12px; display: inline-block; margin-right: 5px;"></i> ${type}<br>`;
+  });
+  document.getElementById('legend').innerHTML = legendHtml;
+}
+// 初始加載圖例
+updateLegend(new Set());

no-image-icon-23494.png ADDED Viewed

styles.css ADDED Viewed

	@@ -0,0 +1,118 @@

+body {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  flex-direction: column;
+}
+#map {
+  flex: 1;
+  height: 60vh;
+  position: relative;
+}
+#controls {
+  padding: 20px;
+  box-sizing: border-box;
+}
+#info, #modalInfo {
+  overflow-y: auto;
+  max-height: 40vh; /* 通用最大高度 */
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+}
+/* 桌面版表格高度 */
+@media (min-width: 769px) {
+  #info {
+    max-height: 20vh; /* 桌面版最大高度 */
+  }
+}
+.legend {
+  background: white;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  line-height: 1.5em;
+  color: #555;
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  pointer-events: none;
+}
+@media (max-width: 768px) {
+  #map {
+    height: 50vh;
+  }
+  #searchButton {
+    display: none;
+  }
+  #showTableButton {
+    display: none; /* 隱藏顯示表格按鈕 */
+  }
+  #info {
+    display: block; /* 顯示表格 */
+    max-height: 30vh; /* 限制表格高度 */
+  }
+  #latInput, #lngInput, label[for="latInput"], label[for="lngInput"] {
+    display: none;
+  }
+  #legend {
+    display: none; /* 隱藏右下角圖例 */
+  }
+}
+@keyframes highlight {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.5); }
+  100% { transform: scale(1); }
+}
+#info table, #modalInfo table {
+  width: 100%;
+  margin-top: 10px;
+}
+#info th, #info td, #modalInfo th, #modalInfo td {
+  text-align: left;
+  padding: 8px;
+}
+#info th, #modalInfo th {
+  background-color: #f2f2f2;
+}
+.poi-row {
+  cursor: pointer;
+}
+.poi-row:hover {
+  background-color: #e0e0e0;
+}
+.poi-row:active {
+  background-color: #b0b0b0;
+}
+.custom-icon div {
+  display: inline-block;
+  border: 1px solid #555;
+  box-shadow: 0 0 2px rgba(0,0,0,0.5);
+}
+.custom-icon .highlight {
+  animation: highlight 0.6s ease-out;
+  border: 2px solid yellow;
+}

worker.js ADDED Viewed

	@@ -0,0 +1,9 @@

+self.addEventListener('message', function(e) {
+  var data = e.data;
+  if (data.type === 'filter') {
+    var filteredData = data.allData.filter(function(d) {
+      return data.modelType === 'all' || d.model_type === data.modelType;
+    });
+    self.postMessage({type: 'filtered', data: filteredData});
+  }
+});