diff --git a/src/assets/css/components/views/location/location.scss b/src/assets/css/components/views/location/location.scss
index 53fc730c..6c09dea4 100644
--- a/src/assets/css/components/views/location/location.scss
+++ b/src/assets/css/components/views/location/location.scss
@@ -190,6 +190,7 @@ $color-highlight: #CC4444;
           height: 30px;
           border: 2px solid $color-white;
           z-index: 2;
+          display: flex !important;
 
           &.map-marker--human svg {
             width: 21px;
@@ -208,6 +209,7 @@ $color-highlight: #CC4444;
           border: 2px solid $color-white;
           background-color: $color-highlight;
           z-index: 3;
+          display: flex !important;
 
           svg {
             width: 21px;
diff --git a/src/components/rightBox/location/MyFollowBox.vue b/src/components/rightBox/location/MyFollowBox.vue
index 0debda4a..d1d00137 100644
--- a/src/components/rightBox/location/MyFollowBox.vue
+++ b/src/components/rightBox/location/MyFollowBox.vue
@@ -13,9 +13,9 @@
             :api="url"
     >
       <template #top-tool-left>
-        <button id="cancleFollows" class="business-button business-button--light margin-r-10" 
-                :disabled="disableCancle" @click="cancleFollowBatch">
-          <span>{{ $t('location.cancleFollow') }}</span>
+        <button id="cancelFollows" class="business-button business-button--light margin-r-10"
+                :disabled="disableCancel" @click="cancelFollowBatch">
+          <span>{{ $t('location.cancelFollow') }}</span>
         </button>
       </template>
       <template #default>
@@ -64,7 +64,7 @@ export default {
     return {
       url:  api.location.followedSubscriber,
       tableId: 'myFollowTable',
-      disableCancle: true
+      disableCancel: true
     }
   },
   mounted () {
@@ -113,9 +113,9 @@ export default {
           this.batchDeleteObjs.push(obj)
         }
       })
-      this.disableCancle = this.batchDeleteObjs.length < 1
+      this.disableCancel = this.batchDeleteObjs.length < 1
     },
-    cancleFollowBatch() {
+    cancelFollowBatch() {
       const ids = []
       if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
         this.batchDeleteObjs.forEach(item => {
@@ -125,7 +125,7 @@ export default {
       this.toggleLoading(true)
       axios.delete(api.location.follow + '?subscriberIds=' + ids.join(',')).then(response => {
         if (response.status === 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
           this.batchDeleteObjs.forEach(item => {
             item.isFollowed = 0
           })
@@ -136,7 +136,7 @@ export default {
         this.$message.error(e.response.data.message)
       }).finally(() => {
         this.toggleLoading(false)
-        this.$emit('handleCancleFollowBatch', this.batchDeleteObjs)
+        this.$emit('handleCancelFollowBatch', this.batchDeleteObjs)
       })
     },
     /* 关闭弹框 */
diff --git a/src/components/table/location/MyFollowTable.vue b/src/components/table/location/MyFollowTable.vue
index de8c031c..2a0561bf 100644
--- a/src/components/table/location/MyFollowTable.vue
+++ b/src/components/table/location/MyFollowTable.vue
@@ -48,7 +48,7 @@
           </template>
         </template>
         <template v-else-if="item.prop === 'isFollowed'" >
-          <span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancleFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
+          <span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancelFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
           <span class="follow-cursor" v-else @click="follow(scope.row)"><i class="cn-icon cn-icon-follow"></i></span>
         </template>
         <span v-else>{{scope.row[item.prop] || '-'}}</span>
@@ -109,10 +109,10 @@ export default {
     }
   },
   methods: {
-    cancleFollow(item) {
+    cancelFollow(item) {
       axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
         if (res.status === 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
           /* 刷新列表 */
           item.isFollowed = 0
           this.$refs.dataTable.toggleRowSelection(item, false)
diff --git a/src/components/table/setting/knowledgeBaseTableForCard.vue b/src/components/table/setting/knowledgeBaseTableForCard.vue
index 4858e344..c69d58a0 100644
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -220,7 +220,7 @@
           </el-form>
         </div>
         <div class="dialog-footer">
-          <button @click="cancle" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
+          <button @click="cancel" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
           <button @click="submitConfirm" class="business-button">{{ $t('tip.confirm') }}</button>
         </div>
       </template>
@@ -590,7 +590,7 @@ export default {
     submit () {
       this.$refs.knowledgeUpload.submit()
     },
-    cancle () {
+    cancel () {
       this.showAddUpdateDialog = false
     },
     clickCard (data, event) {
diff --git a/src/components/table/setting/knowledgeBaseTableForCard2.vue b/src/components/table/setting/knowledgeBaseTableForCard2.vue
index f3452b4e..2523f0fe 100644
--- a/src/components/table/setting/knowledgeBaseTableForCard2.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard2.vue
@@ -221,7 +221,7 @@
           </el-form>
         </div>
         <div class="dialog-footer">
-          <el-button @click="cancle">{{ $t('overall.cancel') }}</el-button>
+          <el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
           <el-button type="primary" @click="submitConfirm">{{ $t('tip.confirm') }}</el-button>
         </div>
       </template>
@@ -550,7 +550,7 @@ export default {
     submit () {
       this.$refs.knowledgeUpload.submit()
     },
-    cancle () {
+    cancel () {
       this.showAddUpdateDialog = false
     },
     clickCard (data, event) {
@@ -698,7 +698,7 @@ export default {
       this.switchKnowledgeId = id
       return false
     },
-    cancleSwitch () {
+    cancelSwitch () {
       this.showConfirmSwitch = false
     },
     switchLearning () {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 77af6758..a96722d7 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -753,7 +753,7 @@ export default {
       this.changeUrlTabState()
       this.getChartData(queryParams)
     },
-    cancleSortArrow () {
+    cancelSortArrow () {
       // 取消表格排序高亮的箭头
       if (this.column.prop) {
         // const table = this.$refs['dataTable_' + this.index]
@@ -810,7 +810,7 @@ export default {
       this.toggleLoading(true)
       this.$nextTick(() => {
         // 取消表格排序高亮的箭头
-        this.cancleSortArrow()
+        this.cancelSortArrow()
         // 设置默认排序
         if (this.tableSortColumn) {
           const refName = 'dataTable_' + this.tableSortTab
@@ -1694,7 +1694,7 @@ export default {
           item.order = ''
         })
       }
-      this.cancleSortArrow()
+      this.cancelSortArrow()
       this.column = {}
       this.index = 0
       this.tableSortColumn = ''
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index eb56d4f4..b5534b9c 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -72,6 +72,7 @@
           </div>
           <div class="chart-line__drawing" id="activeSubscribersChart"></div>
         </div>
+        <!-- subscriber list -->
         <div class="analysis-statistics__title">
           {{$t('location.subscribers')}}
           <simple-loading :loading="loading.subscriberLoading" placement="right" size="small"></simple-loading>
@@ -1048,15 +1049,9 @@ export default {
       }
     },
     async hexagonVisualRangeChange (e) {
-      const currentZoom = this.mapChart.getZoom()
-      console.info(`current zoom: ${currentZoom}`)
-      if (currentZoom < 11) {
-        this.hideBaseStation()
-        this.hideFollowed()
-      } else {
-        this.showBaseStation()
-        this.showFollowed()
-      }
+      this.currentZoom = this.mapChart.getZoom()
+      console.info(`current zoom: ${this.currentZoom}`)
+
       if (this.updateBoundaryBox()) {
         const oldSourceData = this.mapChart.getSource('hexGrid')._data
         const hexagonData = await this.queryHexagon()
@@ -1225,13 +1220,13 @@ export default {
     subscriberListMouseEnter (subscriber) {
       const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
       if (target) {
-        target.getElement().classList.add('map-marker--hover')
+        target.addClassName && target.addClassName('map-marker--hover')
       }
     },
     subscriberListMouseLeave (subscriber) {
       const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
       if (target) {
-        target.getElement().classList.remove('map-marker--hover')
+        target.removeClassName && target.removeClassName('map-marker--hover')
       }
     },
     async scrollList (e) {
@@ -1298,7 +1293,7 @@ export default {
     },
     showBaseStation () {
       this.baseStationMarkers.forEach(bs => {
-        bs.addClassName && bs.removeClassName('map-marker--hidden')
+        bs.removeClassName && bs.removeClassName('map-marker--hidden')
       })
     },
     hideFollowed () {
@@ -1308,7 +1303,7 @@ export default {
     },
     showFollowed () {
       this.humanMarkers.forEach(human => {
-        human.addClassName && human.removeClassName('map-marker--hidden')
+        human.removeClassName && human.removeClassName('map-marker--hidden')
       })
     },
     // 关注列表的添加、删除追踪
@@ -1521,7 +1516,7 @@ export default {
     cancelFollowSubscribers (item) {
       axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
         if (res.status === 200) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
           /* 刷新右侧列表 */
           item.isFollowed = 0
           // 删除地图中对应的人
@@ -1541,7 +1536,7 @@ export default {
       if (item.isFollowed === 1) {
         axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
           if (res.status === 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+            this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
             // 删除地图中对应的人
             this.humanMarkers.forEach(marker => {
               if (marker.subscriberId === item.subscriberId) {
@@ -1569,6 +1564,13 @@ export default {
             this.humanMarkers = []
             const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber()
             this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
+            if (this.currentZoom < 11) {
+              this.hideBaseStation()
+              this.hideFollowed()
+            } else {
+              this.showBaseStation()
+              this.showFollowed()
+            }
           } else {
             this.$message.error(res.data.message)
           }
@@ -1728,6 +1730,15 @@ export default {
       handler (n) {
         this.loading.mapLoading = n || this.loading.timeBarLoading || this.loading.hexagonLoading
       }
+    },
+    currentZoom (n, o) {
+      if (o && n < 11) {
+        this.hideBaseStation()
+        this.hideFollowed()
+      } else {
+        this.showBaseStation()
+        this.showFollowed()
+      }
     }
   },
   computed: {
@@ -1932,6 +1943,7 @@ export default {
       loading, // 控制组件内各处loading图标
       maxZoom: mapConfig.maxZoom, // 地图最小缩放比例
       minZoom: mapConfig.minZoom, // 地图最大缩放比例
+      currentZoom: ref(null),
       mapLevel: mapConfig.mapLevel, // 地图精度  1、2、3
       unitTypes,
       defaultZoom: mapConfig.defaultZoom, // 地图默认缩放比例
diff --git a/src/views/setting/KnowledgeBase.vue b/src/views/setting/KnowledgeBase.vue
index 9ed5bced..04bde22e 100644
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -149,9 +149,9 @@ export default {
           this.batchDeleteObjs.push(data)
         }
       } else {
-        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
-        if (cancleObjIndex > -1) {
-          this.batchDeleteObjs.splice(cancleObjIndex, 1)
+        const cancelObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
+        if (cancelObjIndex > -1) {
+          this.batchDeleteObjs.splice(cancelObjIndex, 1)
         }
       }
       if (this.batchDeleteObjs.length === 1) {
diff --git a/src/views/setting/KnowledgeBaseUserDefinedList.vue b/src/views/setting/KnowledgeBaseUserDefinedList.vue
index d91243e2..24305edc 100644
--- a/src/views/setting/KnowledgeBaseUserDefinedList.vue
+++ b/src/views/setting/KnowledgeBaseUserDefinedList.vue
@@ -203,9 +203,9 @@ export default {
           this.batchDeleteObjs.push(data)
         }
       } else {
-        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
-        if (cancleObjIndex > -1) {
-          this.batchDeleteObjs.splice(cancleObjIndex, 1)
+        const cancelObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
+        if (cancelObjIndex > -1) {
+          this.batchDeleteObjs.splice(cancelObjIndex, 1)
         }
       }
       if (this.batchDeleteObjs.length === 1) {