update views/map

src/api/exam.js

@@ -5,7 +5,6 @@ const examApi = {
   // 科目接口
   getSubject: '/api/content/exam/subject',
   getSubjectKV: '/api/content/exam/subject/kv',
-  getSubjectCascade: '/api/content/exam/subject/cascade',
   // *********************************************************************************************************************
   // 试题接口
   getQuestionType: '/api/content/exam/question/type',
@@ -40,10 +39,6 @@ export function getSubjectKV() {
   return get(examApi.getSubjectKV)
 }
 
-export function getSubjectCascade() {
-  return get(examApi.getSubjectCascade)
-}
-
 // *********************************************************************************************************************
 // 试题接口
 export function getQuestionType() {

src/api/map.js

@@ -2,10 +2,14 @@ import { get, post } from '@/utils/request'
 
 const mapAPI = {
   photoMarks: '/api/geo/photo/marks',
+  photoMarksArea: '/api/geo/photo/marks_area',
+  photoMarksNearby: '/api/geo/photo/marks_nearby',
   cupMapApi: '/api/geo/map/cup',
+  cascadeApi: '/api/geo/map/cascade',
   photoMarkInfo: '/api/geo/photo/mark/info',
   photoItemApi: '/api/geo/photo/item',
   addPositionAPi: '/api/geo/map/position',
+  addMyPositionAPi: '/api/geo/map/my_position',
   mapMarks: '/api/geo/map/marks',
   trailPathApi: '/api/geo/map/trail'
 }
@@ -14,14 +18,26 @@ export function getMapMarks() {
   return get(mapAPI.mapMarks)
 }
 
-export function getPhotoMarks(type) {
-  return get(mapAPI.photoMarks + '?type=' + type)
+export function getPhotoMarks(areaCode) {
+  return get(mapAPI.photoMarks + '?type=' + areaCode)
+}
+
+export function getPhotoMarksArea(areaCode) {
+  return get(mapAPI.photoMarksArea + '?areaCode=' + areaCode)
+}
+
+export function getPhotoMarksNearby(distance) {
+  return get(mapAPI.photoMarksNearby + '?distance=' + distance)
 }
 
 export function getCupMap() {
   return get(mapAPI.cupMapApi)
 }
 
+export function getAreaCascadeOptions() {
+  return get(mapAPI.cascadeApi)
+}
+
 export function getMarkerInfo(id) {
   return get(mapAPI.photoMarkInfo + '?id=' + id)
 }
@@ -34,6 +50,10 @@ export function addGeoPosition(data) {
   return post(mapAPI.addPositionAPi, data)
 }
 
+export function addMyPosition(data) {
+  return post(mapAPI.addMyPositionAPi, data)
+}
+
 export function getGeoPoint() {
   return get(mapAPI.trailPathApi)
 }

src/views/exam/ExamDashboard.vue

@@ -59,7 +59,7 @@
               clearable
               filterable
               @change="handleChange"
-            ></el-cascader>
+            />
           </div>
           <div id="chart3" style="height:400px;" />
         </el-card>
@@ -69,7 +69,8 @@
 </template>
 
 <script>
-import { getExamCount, getExamPassRate, getLineChartData, getSubjectCascade } from '@/api/exam'
+import { getExamCount, getExamPassRate, getLineChartData } from '@/api/exam'
+import { getAreaCascadeOptions } from '@/api/map'
 
 export default {
   name: 'ExamDashboard',
@@ -100,7 +101,7 @@ export default {
   },
   methods: {
     getData() {
-      getSubjectCascade().then(resp => {
+      getAreaCascadeOptions().then(resp => {
         if (resp.code === 0) {
           this.cascaderOptions = resp.data
         }

src/views/geo/GeoMap.vue

@@ -192,7 +192,7 @@ export default {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
             type: 'warning',
-            duration: 5000
+            duration: 1000
           })
 
           for (const item of res.data) {
@@ -225,7 +225,7 @@ export default {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
             type: 'warning',
-            duration: 5000
+            duration: 1000
           })
 
           const massMarkers = []

src/views/map/AMap.vue

@@ -1,6 +1,7 @@
 <template>
   <el-container>
     <el-header height="60">
+      <span style="float: left; padding: 5px; color: red">点击地图上任意点触发操作</span>
       <el-button style="float: right; padding: 5px" type="text" @click="clearCircle">清除圆形</el-button>
       <el-button style="float: right; padding: 5px" type="text" @click="onPathNavigator">路径巡航</el-button>
     </el-header>
@@ -14,7 +15,7 @@
           <span>操作</span>
           <el-button style="float: right; padding: 5px" type="text" @click="onSavePosition">保存坐标</el-button>
           <el-button v-if="!showInput" style="float: right; padding: 5px" type="text" @click="onDrawCircle">绘制圆形</el-button>
-          <el-button style="float: right; padding: 5px" type="text" @click="onSavePosition">保存坐标2</el-button>
+          <el-button style="float: right; padding: 5px" type="text" @click="onSaveMyPosition">保存为我的位置</el-button>
         </div>
         <div class="text item">
           <el-row>
@@ -37,7 +38,7 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader'
-import { addGeoPosition, getGeoPoint } from '@/api/map'
+import { addGeoPosition, addMyPosition, getGeoPoint } from '@/api/map'
 
 export default {
   name: 'AMap',
@@ -272,6 +273,20 @@ export default {
         }
       })
     },
+    onSaveMyPosition() {
+      this.showPositionDialog = false
+      addMyPosition(this.positionForm).then(resp => {
+        if (resp.code !== 0) {
+          this.$message.info('设置位置失败')
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 1000
+        })
+      })
+    },
     onDrawCircle() {
       this.showInput = true
     },

src/views/map/PhotoMap.vue

@@ -6,8 +6,10 @@
           <div slot="header" class="clearfix">
             <el-select
               v-model="selectedOption"
+              clearable
               placeholder="选择标签"
-              @change="onChange"
+              style="padding-right: 3px"
+              @change="onSelectChange"
             >
               <el-option
                 v-for="(item, index) in selectOptions"
@@ -16,7 +18,18 @@
                 :value="item.value"
               />
             </el-select>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onRefresh">刷新</el-button>
+            <el-cascader
+              v-model="cascaderOption"
+              :options="cascaderOptions"
+              :props="{ checkStrictly: true }"
+              placeholder="或者选择地区(支持地区搜索)"
+              style="padding-right: 3px"
+              clearable
+              filterable
+              @change="onCascaderChange"
+            />
+            <el-button style="float: right; padding-right: 5px" type="text" @click="onRefreshButton">刷新</el-button>
+            <el-button style="float: right; padding-right: 5px" type="text" @click="onNearbyButton">我的附近</el-button>
           </div>
           <div class="text item amap-wrapper">
             <el-amap
@@ -94,7 +107,14 @@
 </template>
 
 <script>
-import { getPhotoItems, getPhotoMarks, getMarkerInfo } from '@/api/map'
+import {
+  getPhotoItems,
+  getPhotoMarks,
+  getMarkerInfo,
+  getAreaCascadeOptions,
+  getPhotoMarksArea,
+  getPhotoMarksNearby
+} from '@/api/map'
 
 import Vue from 'vue'
 import VueAMap from 'vue-amap'
@@ -141,8 +161,8 @@ export default {
       massMarks: null,
       amapManager,
       mapEvents: {
-        init: this.mapInit,
-        zoomchange: this.zoomchange
+        init: this.mapInitEvent,
+        zoomchange: this.zoomChangeEvent
       },
       /* 弹框数据 */
       showMarkerDialog: false,
@@ -158,16 +178,25 @@ export default {
         lat: null,
         lng: null
       },
-      selectedOption: 1,
+      selectedOption: '',
       selectOptions: [],
-      value: []
+      cascaderOption: [],
+      cascaderOptions: []
     }
   },
   created() {
     document.title = '照片地图'
+    this.getData()
     this.getItems()
   },
   methods: {
+    getData() {
+      getAreaCascadeOptions().then(resp => {
+        if (resp.code === 0) {
+          this.cascaderOptions = resp.data
+        }
+      })
+    },
     getItems() {
       getPhotoItems().then(resp => {
         if (resp.code === 0) {
@@ -175,7 +204,7 @@ export default {
         }
       })
     },
-    mapInit(o) {
+    mapInitEvent(o) {
       this.amap = o
       lazyAMapApiLoaderInstance.load().then(() => {
         // 图标样式
@@ -200,23 +229,25 @@ export default {
         })
         this.massMarks = massMarks
 
-        this.getPhotoMarksWrapper(this.selectedOption)
+        if (this.selectedOption !== '') {
+          this.getPhotoMarksWrapper(this.selectedOption)
+        }
         // this.getPhotoMarksWrapper1(type)
       })
     },
-    zoomchange(e) {
+    zoomChangeEvent(e) {
       console.log('当前缩放级别: ' + this.amap.getZoom())
     },
     getPhotoMarksWrapper(type) {
-      this.markers = []
       getPhotoMarks(type).then(res => {
         if (res.code === 0) {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
             type: 'warning',
-            duration: 5000
+            duration: 1000
           })
 
+          this.markers = []
           for (const item of res.data) {
             this.markers.push({
               position: [item.position.lng, item.position.lat],
@@ -247,9 +278,10 @@ export default {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
             type: 'warning',
-            duration: 5000
+            duration: 1000
           })
 
+          this.markers = []
           const massMarkers = []
           for (const item of res.data) {
             massMarkers.push({
@@ -297,7 +329,107 @@ export default {
         console.log(error)
       })
     },
-    /* 弹出框 */
+    onSelectChange() {
+      this.cascaderOption = []
+      if (this.selectedOption === '') {
+        this.$message.error('请先选择标签')
+        return
+      }
+
+      this.getPhotoMarksWrapper(this.selectedOption)
+    },
+    onCascaderChange(val) {
+      this.selectedOption = ''
+      const length = val.length
+      if (length === 0) {
+        this.$message.error('请先选择地区')
+        return
+      }
+
+      var areaCode = this.cascaderOption[length - 1]
+      getPhotoMarksArea(areaCode).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 1000
+          })
+
+          this.markers = []
+          for (const item of res.data) {
+            this.markers.push({
+              position: [item.position.lng, item.position.lat],
+              label: { content: item.title, offset: [0, 0] },
+              extData: { id: item.id }
+            })
+          }
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 1000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 1000
+        })
+      })
+    },
+    onRefreshButton() {
+      if (this.cascaderOption.length !== 0) {
+        this.onCascaderChange(this.cascaderOption)
+      } else if (this.selectedOption !== '') {
+        this.getPhotoMarksWrapper(this.selectedOption)
+      } else {
+        this.$message.error('请先选择标签或地区后再刷新')
+      }
+    },
+    onNearbyButton() {
+      // 5km
+      var distance = 5000
+      getPhotoMarksNearby(distance).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 1000
+          })
+
+          var myMark = res.data[res.data.length - 1]
+          this.mapCenter = [myMark.position.lng, myMark.position.lat]
+          // 比例尺 1000m
+          this.zoom = 13
+          this.amap.setCenter(this.mapCenter)
+          this.amap.setZoom(this.zoom)
+
+          this.markers = []
+          for (const item of res.data) {
+            this.markers.push({
+              position: [item.position.lng, item.position.lat],
+              label: { content: item.title, offset: [0, 0] },
+              extData: { id: item.id }
+            })
+          }
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 1000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 1000
+        })
+      })
+    },
+    // *************************************************************
+    // 弹出框
     handleDialogClose(done) {
       this.showMarkerDialog = false
       this.earthPoint = { lat: null, lng: null }
@@ -316,12 +448,6 @@ export default {
         type: 'error',
         duration: 1000
       })
-    },
-    onChange() {
-      this.getPhotoMarksWrapper(this.selectedOption)
-    },
-    onRefresh() {
-      this.getPhotoMarksWrapper(this.selectedOption)
     }
   }
 }