更新 src/views/map 模块

src/api/map.js

@@ -2,16 +2,13 @@ import { get, post } from '@/utils/request'
 
 const mapAPI = {
   mapApi: '/api/geo/map',
+  chartmapApi: '/api/geo/chartmap',
   photoMarks: '/api/geo/photo/marks',
   photoMarksArea: '/api/geo/photo/marks_area',
-  photoMarksNearby: '/api/geo/photo/marks_nearby',
-  cascadeApi: '/api/geo/map/cascade',
-  photoMarkInfo: '/api/geo/photo/mark/info',
-  geoPathApi: '/api/geo/map/path',
-  chartMapGeojsonApi: '/api/geo/map/geojson'
+  photoMarkInfo: '/api/geo/photo/mark/info'
 }
 
-export function saveBatchMarks(jsonData) {
+export function addsMapMarks(jsonData) {
   return post(mapAPI.mapApi + '/marks', jsonData)
 }
 
@@ -27,12 +24,8 @@ export function getPhotoMarksArea(areaCode) {
   return get(mapAPI.photoMarksArea + '?areaCode=' + areaCode)
 }
 
-export function getPhotoMarksNearby(distance) {
-  return get(mapAPI.photoMarksNearby + '?distance=' + distance)
-}
-
-export function getAreaCascadeOptions() {
-  return get(mapAPI.cascadeApi)
+export function getNearbyMarks(distance) {
+  return get(mapAPI.mapApi + '/nearby?distance=' + distance)
 }
 
 export function getMarkerInfo(id) {
@@ -40,13 +33,17 @@ export function getMarkerInfo(id) {
 }
 
 export function addGeoPath(data) {
-  return post(mapAPI.geoPathApi, data)
+  return post(mapAPI.mapApi + '/path', data)
 }
 
 export function getGeoPath(queryParam) {
-  return get(mapAPI.geoPathApi, queryParam)
+  return get(mapAPI.mapApi + '/path', queryParam)
 }
 
 export function getChartMapGeojson(areaCode) {
-  return get(mapAPI.chartMapGeojsonApi + '?areaCode=' + areaCode)
+  return get(mapAPI.chartmapApi + '/geojson?areaCode=' + areaCode)
+}
+
+export function getAreaCascadeOptions() {
+  return get(mapAPI.chartmapApi + '/cascade')
 }

src/router/index.js

@@ -148,7 +148,7 @@ export const constantRoutes = [
     meta: { title: 'OpenLayersMap', needAuth: false }
   },
   {
-    path: '/map2',
+    path: '/chartmap',
     name: 'ChartMap',
     component: ChartMap,
     meta: { title: 'ChartMap', needAuth: false }

src/views/map/AMap.vue

@@ -102,8 +102,7 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader'
-// 注意：在这里引入你实际用来批量保存标记点的后端 API，这里假设名字叫 saveBatchMarks
-import { addGeoPath, getGeoPath, getMapMarks, saveBatchMarks } from '@/api/map'
+import { addGeoPath, getGeoPath, getMapMarks, addsMapMarks } from '@/api/map'
 
 export default {
   name: 'AMap',
@@ -280,7 +279,7 @@ export default {
         }
 
         // 发送保存数组到后端
-        saveBatchMarks(this.tempMarkedPoints).then(resp => {
+        addsMapMarks(this.tempMarkedPoints).then(resp => {
           if (resp.code === 0) {
             this.$message.success('批量标记地点保存成功！')
           }
@@ -453,7 +452,10 @@ export default {
               data: this.path,
               getPath: (pathData) => pathData.path
             })
-            const navg = pathSimplifierIns.createPathNavigator(0, { loop: false, speed: 3600 })
+
+            // 单位 km/h, 这里设置为 1000m/s
+            const speed = 3600
+            const navg = pathSimplifierIns.createPathNavigator(0, { loop: false, speed: speed })
             navg.start()
           })
         }

src/views/map/OpenLayersMap.vue

@@ -281,8 +281,8 @@ export default {
       getMapMarks().then(resp => {
         if (resp.code === 0) {
           for (const item of resp.data) {
-            const numLng1 = item.position.lng
-            const numLat1 = item.position.lat
+            const numLng1 = item.lng
+            const numLat1 = item.lat
             // 创建要素几何（使用转换后的坐标，如果是高德底图，记得在外面套一层 fromLonLat）
             const finalCoord = fromLonLat([numLng1, numLat1]) // 如果底图是高德请解开这行，下面传入 finalCoord
             const feature = new Feature({