fix：巡检信息修改地图

src/components/map/fssm-map.vue

@@ -62,9 +62,9 @@ export default {
   props: {
     // 接收传过来得中心点
     centerPoint: {
-      type: Object,
+      type: Array,
       default: () => {
-        return { lat: 123.30297096718999, lon: 41.87942945541742 };
+        return [123.30297096718999, 41.87942945541742];
       },
     },
     // 接受传过来得地图层级
@@ -90,7 +90,11 @@ export default {
     // 地图控件位置
     controlStyle: {
       type: Object,
-      default: () => {},
+      default: () => {
+        return {
+          top: 0,
+        };
+      },
     },
     // 用于区分同一个页面多个地图的id
     mapId: {
@@ -168,7 +172,10 @@ export default {
     // this.changeImg("cva_c");
   },
   methods: {
-    /* 初始化openlayer地图 */
+    /**
+     * @description: 初始化openlayer地图
+     * @return {*}
+     */
     initMap() {
       // const tianditu_vec_c = new TileLayer({
       //   className: "baseLayerClass",
@@ -207,7 +214,7 @@ export default {
           rotate: false,
         }),
         view: new View({
-          center: [this.centerPoint.lat, this.centerPoint.lon], //中心点经纬度
+          center: this.centerPoint, //中心点经纬度
           zoom: this.zoom, //图层缩放大小
           projection: "EPSG:4326",
           minZoom: 7,
@@ -307,11 +314,18 @@ export default {
       this.instance.set("overlay-list", []);
     },
     
-    /* 删除图层选择对象 */
+    /**
+     * @description: 删除图层选择对象
+     * @return {*}
+     */
     removeSelectClick() {
       this.selectSingClick.getFeatures().clear();
     },
-    /* 绘制地图 */
+
+    /**
+     * @description: 绘制地图
+     * @return {*}
+     */
     drawMap() {
       if (this.drawMarkers.length < 1) {
         const map = this.instance.get("map");
@@ -360,7 +374,12 @@ export default {
         });
       }
     },
-    /* 监听绘制完成的事件 */
+
+    /**
+     * @description: 监听绘制完成的事件
+     * @param {*} event
+     * @return {*}
+     */
     drawend(event) {
       const feature = event.feature;
       const geometry = feature.getGeometry();
@@ -379,7 +398,12 @@ export default {
       }
       this.$emit("endEoordinate", this.drawMarkers);
     },
-    /* 检测交叉点位方法 */
+
+    /**
+     * @description: 检测交叉点位方法
+     * @param {*} coordinates
+     * @return {*}
+     */
     isSelfCrossing(coordinates) {
       for (let i = 0; i < coordinates.length - 1; i++) {
         const segment1 = [coordinates[i], coordinates[i + 1]];
@@ -393,7 +417,13 @@ export default {
       }
       return false;
     },
-    /* 检测交叉线段 */
+
+    /**
+     * @description: 检测交叉线段
+     * @param {*} segment1
+     * @param {*} segment2
+     * @return {*}
+     */
     doSegmentsCross(segment1, segment2) {
       const [p1, p2] = segment1;
       const [q1, q2] = segment2;
@@ -421,7 +451,11 @@ export default {
       // 判断是否相交并且不是共线
       return t > 0 && t < 1 && u > 0 && u < 1;
     },
-    /* 删除绘制功能 */
+
+    /**
+     * @description: 删除绘制功能
+     * @return {*}
+     */
     deletedraw() {
       const map = this.instance.get("map");
       map.removeInteraction(this.draw);
@@ -434,7 +468,12 @@ export default {
       this.drawMarkers = [];
       this.$emit("endEoordinate", []);
     },
-    /* 修改地图底图样式 */
+
+    /**
+     * @description: 修改地图底图样式
+     * @param {*} item
+     * @return {*}
+     */
     changeImg(item) {
       if (this.mapType !== item) {
         this.mapType = item;
@@ -487,6 +526,7 @@ export default {
         });
       }
     },
+
     /**
      * @description: 切换当前位置
      * @param {Array} position 中心点位置
@@ -517,7 +557,10 @@ export default {
       map.removeLayer(layer);
     },
 
-    /* 根据类型清除地图线段图层 */
+    /**
+     * @description: 根据类型清除地图线段图层
+     * @return {*}
+     */
     clearMapLine() {
       const map = this.instance.get("map");
       const [layer] = map

src/views/xj/inspection/road-management/components/road-add.vue

@@ -115,7 +115,11 @@
         </el-col>
       </el-row>
       <el-form-item label="病害位置">
-        <div ref="addMap" id="addMap" class="no-hand-cursor"></div>
+        <fssm-map
+          ref="addMap"
+          @map-click="getMapClick"
+          class="no-hand-cursor"
+        ></fssm-map>
       </el-form-item>
       <el-form-item label="上传病害图片">
         <el-upload
@@ -156,9 +160,20 @@
 <script>
 import { addRoad, uploadRoad } from "@/api/xj/road";
 import { getToken } from "@/utils/auth";
+// 地图
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style } from "ol/style";
+import * as styleExports from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import { Vector as VectorSource } from "ol/source";
 
 export default {
   name: "RoadAdd",
+  components: {
+    FssmMap,
+  },
   props: {
     dialogItem: {
       type: Object,
@@ -254,8 +269,6 @@ export default {
         // 上传的文件列表
         fileList: [],
       },
-      // 地图中心点
-      centerPoint: [123.30297096718999, 41.87942945541742],
       // 点击坐标
       markers: [],
     };
@@ -273,13 +286,10 @@ export default {
             };
           });
           this.$nextTick(() => {
-            const e = {
+            const map = this.$refs.addMap.instance.get("map");
-              lnglat: {
+            map.getView().setCenter(val.geometry.coordinates);
-                lng: val.geometry.coordinates[0],
+            this.markers = val.geometry.coordinates;
-                lat: val.geometry.coordinates[1],
+            this.drawMapPoint();
-              },
-            };
-            this.onMapClick(e);
           });
         }
       },
@@ -287,20 +297,96 @@ export default {
       deep: true,
     },
   },
-  /* 生命周期函数-mouted */
+  /**
-  mounted() {
+   * @description: 生命周期函数-mouted
-    this.initMap();
+   * @return {*}
-  },
+   */
+  mounted() {},
   methods: {
-    /* 文件提交处理 */
+    /**
+     * @description: 传回来的地图点击事件获取点位数据
+     * @param {*} e
+     * @return {*}
+     */
+    getMapClick(e) {
+      const map = this.$refs.addMap.instance.get("map");
+      map.removeLayer(this.markLayerPoints);
+      const { coordinate } = e;
+      this.markers = coordinate;
+      this.drawMapPoint();
+    },
+
+    /**
+     * @description: 绘制地图点位
+     * @param {*} val
+     * @return {*}
+     */
+    drawMapPoint() {
+      const features = [];
+      const point = new Point(this.markers); // 修改坐标格式
+      const feature = new Feature({
+        geometry: point,
+        type: "icon", //  自己设置一个标识
+      });
+      feature.setStyle([
+        new Style({
+          image: new styleExports.Circle({
+            //点样式
+            radius: 6,
+            stroke: new styleExports.Stroke({
+              color: "#9a9c9e",
+              width: 4,
+            }),
+            fill: new styleExports.Fill({
+              color: "blue",
+            }),
+          }),
+        }),
+      ]);
+      features.push(feature);
+      //设置地图的数据源
+      const pointSource = new VectorSource({
+        features,
+      });
+      this.markLayerPoints = new VectorLayer({
+        source: pointSource,
+        properties: {
+          type: "point",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.addMap.instance.get("map");
+        map.addLayer(this.markLayerPoints);
+      });
+    },
+
+    /**
+     * @description: 文件提交处理
+     * @param {*} e
+     * @return {*}
+     */
     submitUpload() {
       this.$refs.upload.submit();
     },
-    /* 文件上传中处理 */
+
+    /**
+     * @description: 文件上传中处理
+     * @param {*} event
+     * @param {*} file
+     * @param {*} fileList
+     * @return {*}
+     */
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
     },
-    /* 文件上传成功处理 */
+
+    /**
+     * @description: 文件上传成功处理
+     * @param {*} response
+     * @param {*} file
+     * @param {*} fileList
+     * @return {*}
+     */
     handleFileSuccess(response, file, fileList) {
       this.upload.fileList = fileList.map((item) => {
         if (item.response) {
@@ -310,7 +396,11 @@ export default {
       });
       this.upload.isUploading = false;
     },
-    /* 点击确定事件 */
+
+    /**
+     * @description: 点击确定事件
+     * @return {*}
+     */
     submitForm() {
       this.$refs["roadForm"].validate((valid) => {
         if (valid) {
@@ -331,7 +421,7 @@ export default {
             }),
             geometry: {
               type: "Point",
-              coordinates: [this.markers[0].lng, this.markers[0].lat],
+              coordinates: this.markers,
               id: this.roadForm?.geometry?.id,
             },
           };
@@ -369,34 +459,14 @@ export default {
         }
       });
     },
-    /* 点击取消事件 */
+
+    /**
+     * @description: 点击取消事件
+     * @return {*}
+     */
     cancel() {
       this.$emit("cancel");
     },
-    /* 初始化天地图 */
-    initMap() {
-      // 初始化天地图
-      this.map = new T.Map("addMap");
-      this.map.centerAndZoom(
-        new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
-        9
-      );
-      // 添加单击事件
-      this.map.on("click", this.onMapClick);
-    },
-    /* 新增/编辑地图单击事件 */
-    onMapClick(e) {
-      const marker = new T.Marker(e.lnglat);
-      if (this.markers.length > 0) {
-        this.markers.shift();
-        this.map.clearOverLays();
-        this.map.addOverLay(marker);
-        this.markers.push(e.lnglat);
-      } else {
-        this.map.addOverLay(marker);
-        this.markers.push(e.lnglat);
-      }
-    },
   },
 };
 </script>

src/views/xj/inspection/road-management/components/road-view.vue

@@ -34,7 +34,10 @@
       </div>
 
       <!-- 下半部分显示天地图 -->
-      <div id="viewMap" style="height: 300px; margin-top: 20px"></div>
+      <fssm-map
+        style="height: 300px; margin-top: 20px"
+        ref="viewMap"
+      ></fssm-map>
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button @click="closeDialog">关闭</el-button>
@@ -43,8 +46,19 @@
 </template>
 
 <script>
+// 地图
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style } from "ol/style";
+import * as styleExports from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import { Vector as VectorSource } from "ol/source";
 export default {
   name: "RoadView",
+  components: {
+    FssmMap,
+  },
   props: {
     dialogItem: {
       type: Object,
@@ -71,20 +85,10 @@ export default {
         if (val.title === "查看路产") {
           this.viewForm = JSON.parse(JSON.stringify(val));
           this.$nextTick(() => {
-            this.centerPoint = [
+            const map = this.$refs.viewMap.instance.get("map");
-              val.geometry.coordinates[0],
+            map.getView().setCenter(val.geometry.coordinates);
-              val.geometry.coordinates[1],
+            this.markers = val.geometry.coordinates;
-            ];
+            this.drawMapPoint();
-            this.initMap("viewMap");
-            const e = {
-              lnglat: {
-                lat: val.geometry.coordinates[1],
-                lng: val.geometry.coordinates[0],
-              },
-            };
-            this.onMapClick(e);
-            // 移除点击事件
-            this.map.removeEventListener("click", this.onMapClick);
           });
         }
       },
@@ -92,11 +96,13 @@ export default {
       deep: true,
     },
   },
-  mounted() {
+  mounted() {},
-    // this.initMap("viewMap");
-  },
   methods: {
-    /* 过滤列表路产类型 */
+    /**
+     * @description: 过滤列表路产类型
+     * @param {*} value
+     * @return {*}
+     */
     filterDefect(value) {
       let a = null;
       [a] = this.roadType.filter((item) => {
@@ -106,37 +112,58 @@ export default {
         return a.label;
       }
     },
-    /* 关闭弹窗 */
+
+    /**
+     * @description: 绘制地图点位
+     * @param {*} val
+     * @return {*}
+     */
+    drawMapPoint() {
+      const features = [];
+      const point = new Point(this.markers); // 修改坐标格式
+      const feature = new Feature({
+        geometry: point,
+        type: "icon", //  自己设置一个标识
+      });
+      feature.setStyle([
+        new Style({
+          image: new styleExports.Circle({
+            //点样式
+            radius: 6,
+            stroke: new styleExports.Stroke({
+              color: "#9a9c9e",
+              width: 4,
+            }),
+            fill: new styleExports.Fill({
+              color: "blue",
+            }),
+          }),
+        }),
+      ]);
+      features.push(feature);
+      //设置地图的数据源
+      const pointSource = new VectorSource({
+        features,
+      });
+      this.markLayerPoints = new VectorLayer({
+        source: pointSource,
+        properties: {
+          type: "point",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.viewMap.instance.get("map");
+        map.addLayer(this.markLayerPoints);
+      });
+    },
+
+    /**
+     * @description: 关闭弹窗
+     * @return {*}
+     */
     closeDialog() {
       this.$emit("cancel");
     },
-    /* 初始化天地图 */
-    initMap(ele) {
-      // if (this.map) {
-      //   this.map.remove(); // 如果已经有地图实例，先移除再重新加载
-      // }
-      // 初始化天地图
-      this.map = new T.Map(ele);
-      this.map.centerAndZoom(
-        new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
-        9
-      ); // 设置中心点和缩放级别
-      // 添加单击事件
-      this.map.on("click", this.onMapClick);
-    },
-    /* 新增/编辑地图单击事件 */
-    onMapClick(e) {
-      const marker = new T.Marker(e.lnglat);
-      if (this.markers.length > 0) {
-        this.markers.shift();
-        this.map.clearOverLays();
-        this.map.addOverLay(marker);
-        this.markers.push(e.lnglat);
-      } else {
-        this.map.addOverLay(marker);
-        this.markers.push(e.lnglat);
-      }
-    },
   },
 };
 </script>

src/views/xj/inspection/road-management/index.vue

@@ -319,6 +319,7 @@
       @close="addCancel"
     >
       <road-add
+        v-if="addVisible"
         @cancel="addCancel"
         :dialogItem="dialogItem"
         :segmentList="segmentList"
@@ -338,6 +339,7 @@
       @close="viewCancel"
     >
       <road-view
+        v-if="viewVisible"
         @cancel="viewCancel"
         :dialogItem="dialogItem"
         :roadType="roadType"
@@ -670,7 +672,7 @@ export default {
       this.viewVisible = false;
       this.dialogItem = { title: "添加路产" };
     },
-    
+
     /* 打开查看图片弹窗 */
     showScreenImg(item) {
       this.currentImageItem = item;

src/views/xj/route/route-line/index.vue

@@ -305,7 +305,8 @@
 
         <!-- 右侧地图部分 -->
         <div style="flex: 1; position: relative">
-          <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div>
+          <!-- <div id="add_map" ref="mapContainer" class="no-hand-cursor"></div> -->
+          <fssm-map :showDraw="true" class="no-hand-cursor" ref="mapContainer"></fssm-map>
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
@@ -324,10 +325,20 @@ import {
   addRoute,
   updateRoute,
 } from "@/api/xj/route";
-
+// 地图
+import FssmMap from "@/components/map/fssm-map.vue";
+import { Feature } from "ol";
+import { Point } from "ol/geom";
+import { Style } from "ol/style";
+import * as styleExports from "ol/style";
+import VectorLayer from "ol/layer/Vector";
+import { Vector as VectorSource } from "ol/source";
 export default {
   name: "Route",
   dicts: ["bas_road_type", "bas_direction"],
+  components: {
+    FssmMap,
+  },
   data() {
     return {
       menuOpen: false,
@@ -400,143 +411,12 @@ export default {
   },
   created() {
     this.getList();
-    this.dialogVisible = true;
-    this.dialogVisible = false;
   },
   methods: {
-    undoLastAction() {
+    /**
-      // 撤销最后一次添加的点和连线
+     * @description: 查询道路线列表
-      if (this.lines.length > 0) {
+     * @return {*}
-        const lastLine = this.lines.pop();
+     */
-        this.map.removeOverLay(lastLine); // 从地图中移除最后一条线
-      }
-
-      if (this.lines.length == 0) {
-        this.resetMap();
-        return;
-      }
-      this.markers.pop();
-      // 更新上一个点为撤销后的点
-      this.previousPoint =
-        this.markers.length > 0
-          ? this.markers[this.markers.length - 1].getLngLat()
-          : null;
-
-      // 更新坐标点 textarea
-      const coordArr = this.form.coordinates.split(";");
-      coordArr.pop(); // 移除最后一个坐标
-      this.form.coordinates = coordArr.join(";");
-    },
-
-    resetMap() {
-      // 清空坐标点、地图上的所有覆盖物
-      this.form.coordinates = "";
-      this.previousPoint = null;
-      this.map.clearOverLays();
-      this.markers = [];
-      this.lines = [];
-    },
-    initMap() {
-      if (!this.map) {
-        // 初始化天地图
-
-        this.map = new T.Map("add_map");
-        this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); // 设置中心点和缩放级别
-
-        // 添加双击事件
-        this.map.on("click", this.onMapClick);
-
-        // 添加右键菜单
-        this.map.on("contextmenu", this.onMapRightClick);
-      } else {
-        this.resetMap();
-      }
-    },
-    onMapClick(e) {
-      if (this.menuOpen) {
-        this.menuOpen = false;
-        return;
-      }
-      const latLng = e.lnglat;
-      const point = `${latLng.lng},${latLng.lat}`;
-
-      // 追加经纬度到textarea
-      if (this.form.coordinates == null) {
-        this.form.coordinates = "";
-      }
-      this.form.coordinates += this.form.coordinates ? `;${point}` : point;
-
-      // 绘制点和连线
-
-      const marker = new T.Marker(latLng);
-
-      this.markers.push(marker); // 保存点
-      // 连线
-      if (this.previousPoint) {
-        const line = new T.Polyline([this.previousPoint, latLng], {
-          strokeColor: "blue",
-          strokeWeight: 3,
-          strokeOpacity: 0.7,
-        });
-        this.map.addOverLay(line);
-        this.lines.push(line);
-      }
-      if (this.lines.length == 0) {
-        this.map.addOverLay(marker);
-      }
-      this.previousPoint = latLng; // 记录上一个点
-    },
-    drawExistingCoordinates() {
-      // 如果有保存的坐标点数据
-      // console.log(this.form.coordinates, "this.form.coordinates");
-
-      if (this.form.coordinates) {
-        const coordArr = this.form.coordinates.split(";");
-        let previousLatLng = null;
-
-        coordArr.forEach((coord, index) => {
-          const [lng, lat] = coord.split(",").map(Number);
-          const latLng = new T.LngLat(lng, lat);
-
-          // 绘制点
-          const marker = new T.Marker(latLng);
-          this.markers.push(marker);
-
-          // 如果有上一个点，绘制连线
-          if (previousLatLng) {
-            const line = new T.Polyline([previousLatLng, latLng], {
-              strokeColor: "blue",
-              strokeWeight: 3,
-              strokeOpacity: 0.7,
-            });
-            this.map.addOverLay(line);
-            this.lines.push(line);
-          }
-
-          // 将当前点设置为 previousPoint，最后一个点会被设置为最后的 previousPoint
-          previousLatLng = latLng;
-        });
-
-        // 设置最后一个点为当前的 previousPoint，方便继续绘制
-        this.previousPoint = previousLatLng;
-      }
-    },
-    onMapRightClick(e) {
-      this.menuOpen = true;
-      var menu = new T.ContextMenu({
-        width: 50,
-      });
-      var _MenuItem1 = new T.MenuItem("撤销", this.undoLastAction);
-
-      var _MenuItem2 = new T.MenuItem("重绘", this.resetMap);
-
-      menu.addItem(_MenuItem1);
-
-      menu.addItem(_MenuItem2);
-      this.map.addContextMenu(menu);
-    },
-
-    /** 查询道路线列表 */
     getList() {
       this.loading = true;
       listRoute(this.queryParams).then((response) => {
@@ -545,66 +425,66 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
+
+    /**
+     * @description: 取消按钮
+     * @return {*}
+     */
     cancel() {
-      this.open = false;
       this.dialogVisible = false;
-      this.reset();
     },
-    // 表单重置
+
+    /**
+     * @description: 表单重置
+     * @return {*}
+     */
     reset() {
-      this.form = {
-        id: null,
-        routeCode: null,
-        routeName: null,
-        fullName: null,
-        routeType: null,
-        direction: null,
-        startPoint: null,
-        endPoint: null,
-        coordinates: null,
-        startMilepost: null,
-        endMilepost: null,
-        remarks: null,
-        createdBy: null,
-        createdAt: null,
-        updatedBy: null,
-        updatedAt: null,
-        deletedBy: null,
-        deletedAt: null,
-        isDeleted: null,
-        companyId: null,
-      };
-      this.resetForm("form");
     },
-    /** 搜索按钮操作 */
+
+    /**
+     * @description: 搜索按钮操作
+     * @return {*}
+     */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    /** 重置按钮操作 */
+
+    /**
+     * @description: 重置按钮操作
+     * @return {*}
+     */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
+    
+    /**
+     * @description: 多选框选中数据
+     * @param {selection}
+     * @return {*}
+     */
     handleSelectionChange(selection) {
       this.ids = selection.map((item) => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /** 新增按钮操作 */
+    
+    /**
+     * @description: 新增按钮操作
+     * @return {*}
+     */
     handleAdd() {
       this.reset();
       this.dialogVisible = true;
-
       this.title = "添加道路线";
-      let that = this;
-      setTimeout(function () {
-        that.initMap();
-      }, 100);
     },
-    /** 修改按钮操作 */
+
+    /**
+     * @description: 修改按钮操作
+     * @param {row}
+     * @return {*}
+     */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids;
@@ -612,15 +492,13 @@ export default {
         this.form = response.data;
         this.dialogVisible = true;
         this.title = "修改道路线";
-        let that = this;
-
-        setTimeout(function () {
-          that.initMap();
-          that.drawExistingCoordinates();
-        }, 200);
       });
     },
-    /** 提交按钮 */
+
+    /**
+     * @description: 提交按钮
+     * @return {*}
+     */
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
@@ -640,7 +518,12 @@ export default {
         }
       });
     },
-    /** 删除按钮操作 */
+
+    /**
+     * @description: 删除按钮操作
+     * @param {row}
+     * @return {*}
+     */
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal
@@ -654,7 +537,11 @@ export default {
         })
         .catch(() => {});
     },
-    /** 导出按钮操作 */
+
+    /**
+     * @description: 导出按钮操作
+     * @return {*}
+     */
     handleExport() {
       this.download(
         "xj/route/export",