接入地图功能展示社区居委小区边界

src/view/components/filter-drawer.vue

@@ -183,6 +183,8 @@ import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
 
+const emit = defineEmits(['boundary'])
+
 const show = computed(() => store.state.showFilterDrawer)
 const close = () => {
   store.dispatch('getBasicInfo')
@@ -445,9 +447,16 @@ const checkPathThenFetchInfo = () => {
 
 watch(
   [() => curArea.value, () => curCommittee.value, () => curCommunity.value],
-  () => {
+  ([area, committee, community]) => {
     checkPathThenFetchInfo()
-    // TODO 地图框出边界并撒点
+    if (community) {
+      emit('boundary', { type: 'community', name: community })
+    } else if (committee) {
+      emit('boundary', { type: 'committee', name: committee })
+    } else if (area) {
+      emit('boundary', { type: 'area', name: area })
+    }
+    // TODO 地图落点
   },
 )
 </script>

src/view/components/map.vue

@@ -176,6 +176,15 @@ function showCommittee(name: string) {
 function showCommunity(name: string) {
   queryBound(0, name)
 }
+defineExpose({
+  resetMap,
+  switchBM,
+  switchJM,
+  showStreet,
+  showArea,
+  showCommittee,
+  showCommunity,
+})
 // function showBuilding(name: string) {
 //   window.sceneView
 //     .whenLayerView(window.sceneLayer0)

src/view/components/nav-bar.vue

@@ -95,9 +95,6 @@
     :search-key="searchKey"
     @select="handleSelect"
   />
-  <FilterDrawer />
-  <ActivityDrawer />
-  <StructModal />
 </template>
 
 <script lang="ts" setup>
@@ -106,9 +103,6 @@ import store from '@/store'
 import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
-import FilterDrawer from './filter-drawer.vue'
-import ActivityDrawer from './activity-drawer.vue'
-import StructModal from './struct-modal.vue'
 import nav1 from '@images/nav1.svg'
 import nav2 from '@images/nav2.svg'
 import nav3 from '@images/nav3.svg'

src/view/main.vue

 <template>
-  <Map />
+  <Map ref="map" />
   <NavBar @focus="showTag = false" @blur="showTag = true" />
   <BasicInfo :visible="showTag" />
-  <div v-if="showReset" class="reset">
+  <div v-if="showReset" class="reset" @click="resetMap">
     <n-icon class="icon" size=".14rem">
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
+  <FilterDrawer @boundary="setBoundary" />
+  <ActivityDrawer />
+  <StructModal />
+
   <InforModal class="fix1" />
   <ListModal class="fix2" pagination />
   <!-- <ActivityDetail class="fix1" /> -->
@@ -17,6 +21,9 @@ import { computed, ref } from 'vue'
 import Map from './components/map.vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
+import FilterDrawer from './components/filter-drawer.vue'
+import ActivityDrawer from './components/activity-drawer.vue'
+import StructModal from './components/struct-modal.vue'
 import InforModal from './components/info-modal.vue'
 import ListModal from './components/list-modal.vue'
 import ActivityDetail from './components/activity-detail.vue'
@@ -25,6 +32,24 @@ import store from '@/store'
 
 const showTag = ref(true)
 const showReset = computed(() => store.state.showBasicInfo)
+const map = ref<any>()
+const resetMap = () => map.value && map.value.resetMap()
+const setBoundary = ({ type, name }: { type: string; name: string }) => {
+  if (!map.value) return
+  switch (type) {
+    case 'community':
+      map.value.showCommunity(name)
+      break
+    case 'committee':
+      map.value.showCommittee(name)
+      break
+    case 'area':
+      map.value.showArea(name)
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style lang="stylus">