feat(MapView): map paning when navigate

ExpTechTW · Feb 4, 2024 · 5fb6b2b · 5fb6b2b
1 parent bcac8af
commit 5fb6b2b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/src/components/component/HomeViewMapControl.vue b/src/components/component/HomeViewMapControl.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import maplibregl from "maplibre-gl";
+
+import { TaiwanBounds } from "../../scripts/helper/constant";
+
+const { map } = defineProps<{
+  map: maplibregl.Map;
+}>();
+
+onMounted(() => {
+  map.fitBounds(TaiwanBounds, {
+    padding: 16,
+    duration: 300,
+  });
+});
+</script>
+
+<template lang="pug"></template>
diff --git a/src/components/component/MapReportListMarker.vue b/src/components/component/MapReportListMarker.vue
@@ -4,6 +4,7 @@ import maplibregl from "maplibre-gl";
 
 import type { PartialReport } from '../../scripts/class/api';
 import CrossMarker from './CrossMarker.vue';
+import { TaiwanBounds } from "../../scripts/helper/constant";
 
 const { map, reports } = defineProps<{
   map: maplibregl.Map;
@@ -24,6 +25,10 @@ onMounted(() => {
 
     markers.push(marker);
   }
+  map.fitBounds(TaiwanBounds, {
+    padding: { top: 16, left: 16, bottom: 16, right: 316 },
+    duration: 200,
+  });
 });
 
 onUnmounted(() => {

diff --git a/src/components/component/NavigationBar.vue b/src/components/component/NavigationBar.vue
@@ -11,6 +11,7 @@ defineProps<{
 .nav-bar
   NavigationButton(icon="home", label="主頁", value="home",:current-view="currentView", :change-view="changeView")
   NavigationButton(icon="earthquake", label="地震報告", value="report-list",:current-view="currentView", :change-view="changeView")
+  NavigationButton(icon="settings", label="設定", value="setting",:current-view="currentView", :change-view="changeView")
 </template>
 
 <style>

diff --git a/src/components/view/MapView.vue b/src/components/view/MapView.vue
@@ -9,6 +9,7 @@ import maplibregl from "maplibre-gl";
 import type { Station, Report, Rts, PartialReport } from '../../scripts/class/api';
 import MapReportListMarker from '../component/MapReportListMarker.vue';
 import MapRtsBox from '../component/MapRtsBox.vue';
+import HomeViewMapControl from "../component/HomeViewMapControl.vue";
 
 defineProps<{
   currentView: string;
@@ -132,6 +133,8 @@ onUnmounted(() => {
 <template lang="pug">
 #map.map-container.maplibregl-map(:class="{ 'hide-rts-markers': currentView.startsWith('report'), 'hide-report-list-markers': currentView != 'report-list' }")
 .map-layers(v-if="map")
+  .home(v-if="currentView == 'home'")
+    HomeViewMapControl(:map="map")
   .report-list(v-if="currentView == 'report-list'")
     MapReportListMarker(:map="map", :reports="reports")
   .active-report(v-if="activeReport && currentView == 'report'")