diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ
diff --git a/src/assets/newImgs/user_1.png b/src/assets/newImgs/user_1.png
new file mode 100644
index 0000000..12484de
--- /dev/null
+++ b/src/assets/newImgs/user_1.png
Binary files differ

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ
diff --git a/src/assets/newImgs/user_1.png b/src/assets/newImgs/user_1.png
new file mode 100644
index 0000000..12484de
--- /dev/null
+++ b/src/assets/newImgs/user_1.png
Binary files differ
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index aada8d0..c410763 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -97,7 +97,7 @@
             pitch && newfiberMapbox.map.setPitch(pitch);
             center && newfiberMapbox.map.setCenter(center);
             clearTimeout(timeout);
-          }, 2000);
+          }, 1000);
           newfiberMapbox.map.load = true;
         });
       }, 200);

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ
diff --git a/src/assets/newImgs/user_1.png b/src/assets/newImgs/user_1.png
new file mode 100644
index 0000000..12484de
--- /dev/null
+++ b/src/assets/newImgs/user_1.png
Binary files differ
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index aada8d0..c410763 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -97,7 +97,7 @@
             pitch && newfiberMapbox.map.setPitch(pitch);
             center && newfiberMapbox.map.setCenter(center);
             clearTimeout(timeout);
-          }, 2000);
+          }, 1000);
           newfiberMapbox.map.load = true;
         });
       }, 200);
diff --git a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
index d22c3a1..d8945e0 100644
--- a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
+++ b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
@@ -250,12 +250,12 @@
       class="dialog-detail-box"
       :close-on-click-modal="false"
     >
-      <popupbox :DataList="DataList" />
+      <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry" />
     </el-dialog>
   </div>
 </template>
 <script setup name="Inspectionplan">
-import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage } from '@/api/longoPeration/inspectiontasks';
+import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
 import { getProjectInfoList } from '@/api/preassess/targetManage';
 import { listUser } from '@/api/system/user';
 import popupbox from './pop-upbox.vue'; //详情弹框
@@ -275,6 +275,8 @@
 const dataList = ref([]);
 const dataListTwo = ref([]);
 const DataList = ref([]);
+const pathData = ref([]);
+const pathGeometry = ref([]);
 const AllData = reactive({
   publishTime: [],
   publishTime1: [],
@@ -355,10 +357,17 @@
 }
 
 //查看详情操作
-function handleDetail(row) {
+async function handleDetail(row) {
   opendetails.value = true;
   DataList.value = { ...row };
+  console.log('row----', row);
   // console.log(DataList.value, 'DataList.value');
+  let res = await PatrolTaskID(row.id);
+  if (res && res.code == 200) {
+    console.log('res.data--', res.data);
+    pathData.value = res.data.patrolPathLngLat;
+    pathGeometry.value = res.data.patrolPath;
+  }
 }
 
 /** 主任务查询列表 */

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ
diff --git a/src/assets/newImgs/user_1.png b/src/assets/newImgs/user_1.png
new file mode 100644
index 0000000..12484de
--- /dev/null
+++ b/src/assets/newImgs/user_1.png
Binary files differ
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index aada8d0..c410763 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -97,7 +97,7 @@
             pitch && newfiberMapbox.map.setPitch(pitch);
             center && newfiberMapbox.map.setCenter(center);
             clearTimeout(timeout);
-          }, 2000);
+          }, 1000);
           newfiberMapbox.map.load = true;
         });
       }, 200);
diff --git a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
index d22c3a1..d8945e0 100644
--- a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
+++ b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
@@ -250,12 +250,12 @@
       class="dialog-detail-box"
       :close-on-click-modal="false"
     >
-      <popupbox :DataList="DataList" />
+      <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry" />
     </el-dialog>
   </div>
 </template>
 <script setup name="Inspectionplan">
-import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage } from '@/api/longoPeration/inspectiontasks';
+import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
 import { getProjectInfoList } from '@/api/preassess/targetManage';
 import { listUser } from '@/api/system/user';
 import popupbox from './pop-upbox.vue'; //详情弹框
@@ -275,6 +275,8 @@
 const dataList = ref([]);
 const dataListTwo = ref([]);
 const DataList = ref([]);
+const pathData = ref([]);
+const pathGeometry = ref([]);
 const AllData = reactive({
   publishTime: [],
   publishTime1: [],
@@ -355,10 +357,17 @@
 }
 
 //查看详情操作
-function handleDetail(row) {
+async function handleDetail(row) {
   opendetails.value = true;
   DataList.value = { ...row };
+  console.log('row----', row);
   // console.log(DataList.value, 'DataList.value');
+  let res = await PatrolTaskID(row.id);
+  if (res && res.code == 200) {
+    console.log('res.data--', res.data);
+    pathData.value = res.data.patrolPathLngLat;
+    pathGeometry.value = res.data.patrolPath;
+  }
 }
 
 /** 主任务查询列表 */
diff --git a/src/views/longoPeration/Patrolmanagement/pop-upbox.vue b/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
index 7b4d09d..77e41d3 100644
--- a/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
+++ b/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="first">
-    <div class="ditu">地图</div>
+    <div class="ditu">
+      <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
+    </div>
     <!-- 类容 -->
     <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
       <div class="flex flex-r">
@@ -115,12 +117,25 @@
 
 <script setup>
 import { patrolProblempage } from '@/api/longoPeration/inspectiontasks';
+import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
+import CoordTransform from '@/utils/gis/CoorTransform.js';
+import point_start from '@/assets/newImgs/point_start.png';
+import point_end from '@/assets/newImgs/point_end.png';
+import user from '@/assets/newImgs/user_1.png';
 const props = defineProps({
   // 数据
   DataList: {
     type: Array,
     default: null,
   },
+  pathData: {
+    type: Array,
+    default: null,
+  },
+  pathGeometry: {
+    type: String,
+    default: '',
+  },
 });
 const { proxy } = getCurrentInstance();
 const { problem_type } = proxy.useDict('problem_type'); //  巡查类型的字典
@@ -134,7 +149,44 @@
     dataListPhone.value = element.sysFileList;
   });
 };
-
+//添加轨迹线
+const addRecordLine = (geojson, layerId) => {
+  newfiberMapbox.map.addSource(layerId, {
+    type: 'geojson',
+    data: geojson,
+  });
+  newfiberMapbox.map.addLayer({
+    id: layerId,
+    type: 'line',
+    source: layerId,
+    paint: {
+      'line-color': 'rgba(35, 217, 110,1)',
+      'line-width': 3,
+    },
+  });
+};
+//添加轨迹起止点
+const addStartAndEnd = (geojson, layerId, Icon) => {
+  newfiberMapbox.map.loadImage(Icon, (error, image) => {
+    if (error) throw error;
+    newfiberMapbox.map.addImage(layerId + '_icon', image);
+  });
+  newfiberMapbox.map.addSource(layerId, {
+    type: 'geojson',
+    data: geojson,
+  });
+  newfiberMapbox.map.addLayer({
+    id: layerId,
+    type: 'symbol',
+    source: layerId,
+    layout: {
+      'icon-image': layerId + '_icon',
+      'icon-size': 0.2,
+      'icon-offset': [0, 0],
+      'icon-allow-overlap': true,
+    },
+  });
+};
 watch(
   () => props.DataList,
   val => {
@@ -145,6 +197,72 @@
   },
   { deep: true, immediate: true }
 );
+watch(
+  () => props.pathGeometry,
+  val => {
+    if (val) {
+      if (val === '') return;
+      if (newfiberMapbox.map.getLayer('recordLineGeojson')) {
+        newfiberMapbox.map.removeLayer('recordLineGeojson');
+        newfiberMapbox.map.removeSource('recordLineGeojson');
+      }
+      //轨迹线
+      let recordLineGeojson = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: Terraformer.WKT.parse(val),
+          },
+        ],
+      };
+      console.log('recordLineGeojson--', recordLineGeojson);
+      gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
+      setTimeout(() => {
+        addRecordLine(recordLineGeojson, 'recordLineGeojson');
+        gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
+      }, 2000);
+    }
+  }
+);
+watch(
+  () => props.pathData,
+  val => {
+    if (val) {
+      console.log('val-----', val);
+      if (!val.length) return;
+      if (newfiberMapbox.map.getLayer('point_start')) {
+        newfiberMapbox.map.removeLayer('point_start');
+        newfiberMapbox.map.removeLayer('point_end');
+        newfiberMapbox.map.removeSource('point_start');
+        newfiberMapbox.map.removeSource('point_end');
+        newfiberMapbox.map.removeImage('point_start_icon');
+        newfiberMapbox.map.removeImage('point_end_icon');
+      }
+      //起止点
+      let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
+      let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
+      let startPointGeojson = {
+        type: 'FeatureCollection',
+        features: [turf.point(start_84)],
+      };
+      let endPointGeojson = {
+        type: 'FeatureCollection',
+        features: [turf.point(end_84)],
+      };
+      setTimeout(() => {
+        addStartAndEnd(startPointGeojson, 'point_start', point_start);
+        addStartAndEnd(endPointGeojson, 'point_end', point_end);
+        newfiberMapbox.map.setPitch(0);
+        newfiberMapbox.map.easeTo({
+          center: start_84,
+          zoom: 15,
+        });
+      }, 2000);
+    }
+  },
+  { deep: true, immediate: true }
+);
 onMounted(() => {});
 </script>
 
@@ -153,7 +271,6 @@
   .ditu {
     width: 100%;
     height: 200px;
-    border: 1px solid red;
   }
 }
 </style>

diff --git a/src/api/longoPeration/inspectiontasks.js b/src/api/longoPeration/inspectiontasks.js
index e837d13..40140a2 100644
--- a/src/api/longoPeration/inspectiontasks.js
+++ b/src/api/longoPeration/inspectiontasks.js
@@ -7,7 +7,13 @@
     params: query,
   });
 }
-
+// // 查询巡查任务
+export function PatrolTaskID(id) {
+  return request({
+    url: '/business/patrolTask/' + id,
+    method: 'get',
+  });
+}
 // 新增
 export function patrolTaskadd(data) {
   return request({
diff --git a/src/assets/newImgs/point_end.png b/src/assets/newImgs/point_end.png
new file mode 100644
index 0000000..1d551e3
--- /dev/null
+++ b/src/assets/newImgs/point_end.png
Binary files differ
diff --git a/src/assets/newImgs/point_start.png b/src/assets/newImgs/point_start.png
new file mode 100644
index 0000000..504b0cf
--- /dev/null
+++ b/src/assets/newImgs/point_start.png
Binary files differ
diff --git a/src/assets/newImgs/user_1.png b/src/assets/newImgs/user_1.png
new file mode 100644
index 0000000..12484de
--- /dev/null
+++ b/src/assets/newImgs/user_1.png
Binary files differ
diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue
index aada8d0..c410763 100644
--- a/src/views/gisMapPage/gisMapBox1.vue
+++ b/src/views/gisMapPage/gisMapBox1.vue
@@ -97,7 +97,7 @@
             pitch && newfiberMapbox.map.setPitch(pitch);
             center && newfiberMapbox.map.setCenter(center);
             clearTimeout(timeout);
-          }, 2000);
+          }, 1000);
           newfiberMapbox.map.load = true;
         });
       }, 200);
diff --git a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
index d22c3a1..d8945e0 100644
--- a/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
+++ b/src/views/longoPeration/Patrolmanagement/inspectiontasks.vue
@@ -250,12 +250,12 @@
       class="dialog-detail-box"
       :close-on-click-modal="false"
     >
-      <popupbox :DataList="DataList" />
+      <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry" />
     </el-dialog>
   </div>
 </template>
 <script setup name="Inspectionplan">
-import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage } from '@/api/longoPeration/inspectiontasks';
+import { patrolTaskpage, patrolTaskadd, patrolBasicInfopage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
 import { getProjectInfoList } from '@/api/preassess/targetManage';
 import { listUser } from '@/api/system/user';
 import popupbox from './pop-upbox.vue'; //详情弹框
@@ -275,6 +275,8 @@
 const dataList = ref([]);
 const dataListTwo = ref([]);
 const DataList = ref([]);
+const pathData = ref([]);
+const pathGeometry = ref([]);
 const AllData = reactive({
   publishTime: [],
   publishTime1: [],
@@ -355,10 +357,17 @@
 }
 
 //查看详情操作
-function handleDetail(row) {
+async function handleDetail(row) {
   opendetails.value = true;
   DataList.value = { ...row };
+  console.log('row----', row);
   // console.log(DataList.value, 'DataList.value');
+  let res = await PatrolTaskID(row.id);
+  if (res && res.code == 200) {
+    console.log('res.data--', res.data);
+    pathData.value = res.data.patrolPathLngLat;
+    pathGeometry.value = res.data.patrolPath;
+  }
 }
 
 /** 主任务查询列表 */
diff --git a/src/views/longoPeration/Patrolmanagement/pop-upbox.vue b/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
index 7b4d09d..77e41d3 100644
--- a/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
+++ b/src/views/longoPeration/Patrolmanagement/pop-upbox.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="first">
-    <div class="ditu">地图</div>
+    <div class="ditu">
+      <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
+    </div>
     <!-- 类容 -->
     <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
       <div class="flex flex-r">
@@ -115,12 +117,25 @@
 
 <script setup>
 import { patrolProblempage } from '@/api/longoPeration/inspectiontasks';
+import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
+import CoordTransform from '@/utils/gis/CoorTransform.js';
+import point_start from '@/assets/newImgs/point_start.png';
+import point_end from '@/assets/newImgs/point_end.png';
+import user from '@/assets/newImgs/user_1.png';
 const props = defineProps({
   // 数据
   DataList: {
     type: Array,
     default: null,
   },
+  pathData: {
+    type: Array,
+    default: null,
+  },
+  pathGeometry: {
+    type: String,
+    default: '',
+  },
 });
 const { proxy } = getCurrentInstance();
 const { problem_type } = proxy.useDict('problem_type'); //  巡查类型的字典
@@ -134,7 +149,44 @@
     dataListPhone.value = element.sysFileList;
   });
 };
-
+//添加轨迹线
+const addRecordLine = (geojson, layerId) => {
+  newfiberMapbox.map.addSource(layerId, {
+    type: 'geojson',
+    data: geojson,
+  });
+  newfiberMapbox.map.addLayer({
+    id: layerId,
+    type: 'line',
+    source: layerId,
+    paint: {
+      'line-color': 'rgba(35, 217, 110,1)',
+      'line-width': 3,
+    },
+  });
+};
+//添加轨迹起止点
+const addStartAndEnd = (geojson, layerId, Icon) => {
+  newfiberMapbox.map.loadImage(Icon, (error, image) => {
+    if (error) throw error;
+    newfiberMapbox.map.addImage(layerId + '_icon', image);
+  });
+  newfiberMapbox.map.addSource(layerId, {
+    type: 'geojson',
+    data: geojson,
+  });
+  newfiberMapbox.map.addLayer({
+    id: layerId,
+    type: 'symbol',
+    source: layerId,
+    layout: {
+      'icon-image': layerId + '_icon',
+      'icon-size': 0.2,
+      'icon-offset': [0, 0],
+      'icon-allow-overlap': true,
+    },
+  });
+};
 watch(
   () => props.DataList,
   val => {
@@ -145,6 +197,72 @@
   },
   { deep: true, immediate: true }
 );
+watch(
+  () => props.pathGeometry,
+  val => {
+    if (val) {
+      if (val === '') return;
+      if (newfiberMapbox.map.getLayer('recordLineGeojson')) {
+        newfiberMapbox.map.removeLayer('recordLineGeojson');
+        newfiberMapbox.map.removeSource('recordLineGeojson');
+      }
+      //轨迹线
+      let recordLineGeojson = {
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: Terraformer.WKT.parse(val),
+          },
+        ],
+      };
+      console.log('recordLineGeojson--', recordLineGeojson);
+      gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
+      setTimeout(() => {
+        addRecordLine(recordLineGeojson, 'recordLineGeojson');
+        gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
+      }, 2000);
+    }
+  }
+);
+watch(
+  () => props.pathData,
+  val => {
+    if (val) {
+      console.log('val-----', val);
+      if (!val.length) return;
+      if (newfiberMapbox.map.getLayer('point_start')) {
+        newfiberMapbox.map.removeLayer('point_start');
+        newfiberMapbox.map.removeLayer('point_end');
+        newfiberMapbox.map.removeSource('point_start');
+        newfiberMapbox.map.removeSource('point_end');
+        newfiberMapbox.map.removeImage('point_start_icon');
+        newfiberMapbox.map.removeImage('point_end_icon');
+      }
+      //起止点
+      let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
+      let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
+      let startPointGeojson = {
+        type: 'FeatureCollection',
+        features: [turf.point(start_84)],
+      };
+      let endPointGeojson = {
+        type: 'FeatureCollection',
+        features: [turf.point(end_84)],
+      };
+      setTimeout(() => {
+        addStartAndEnd(startPointGeojson, 'point_start', point_start);
+        addStartAndEnd(endPointGeojson, 'point_end', point_end);
+        newfiberMapbox.map.setPitch(0);
+        newfiberMapbox.map.easeTo({
+          center: start_84,
+          zoom: 15,
+        });
+      }, 2000);
+    }
+  },
+  { deep: true, immediate: true }
+);
 onMounted(() => {});
 </script>
 
@@ -153,7 +271,6 @@
   .ditu {
     width: 100%;
     height: 200px;
-    border: 1px solid red;
   }
 }
 </style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index 9b106ad..4cbcf0c 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -65,6 +65,7 @@
   }, 5000);
 });
 onBeforeUnmount(() => {
+  if (!newfiberMap) return;
   newfiberMap.removeByIds(['oneCenter']);
   bus.emit('setIniteLayer', [
     {