fix:：调整地图api，设置线段打点层级修改

src/api/xj/screen/index.js

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-24 15:03:28
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-31 15:36:37
+ * @LastEditTime: 2024-11-06 13:25:37
  * @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -29,7 +29,7 @@ export function mapPointList(query) {
 // 获取地图绘制线段数据接口
 export function mapPciList(query) {
   return request({
-    url: "/bigscreen/roadPci",
+    url: "/bigscreen/mapPci",
     method: "get",
     params: query,
   });

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 10:46:24
+ * @LastEditTime: 2024-11-06 16:42:42
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -168,23 +168,23 @@ export default {
   methods: {
     /* 初始化openlayer地图 */
     initMap() {
-      const tianditu_vec_c = new TileLayer({
+      // const tianditu_vec_c = new TileLayer({
-        className: "baseLayerClass",
+      //   className: "baseLayerClass",
-        title: "矢量底图",
+      //   title: "矢量底图",
-        id: "vec_c",
+      //   id: "vec_c",
-        source: new XYZ({
+      //   source: new XYZ({
-          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
+      //     url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=1eb44fae5b9dc454442b322e9a41d233",
-          projection: "EPSG:4326",
+      //     projection: "EPSG:4326",
-        }),
+      //   }),
-        visible: true,
+      //   visible: true,
-      });
+      // });
       const tianditu_cva_c = new TileLayer({
         className: "baseLayerClass",
         title: "矢量地图",
         id: "cva_c",
         source: new XYZ({
-          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=1eb44fae5b9dc454442b322e9a41d233",
+          url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
-          projection: "EPSG:4326",
+          // projection: "EPSG:4326",
         }),
         visible: true,
       });
@@ -192,8 +192,8 @@ export default {
         title: "影像地图",
         id: "img_c",
         source: new XYZ({
-          url: "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}&T=img_c&tk=1eb44fae5b9dc454442b322e9a41d233",
+          url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-          projection: "EPSG:4326",
+          // projection: "EPSG:4326",
         }),
         visible: false,
       });
@@ -211,7 +211,7 @@ export default {
           minZoom: 7,
           maxZoom: 18,
         }),
-        layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c],
+        layers: [ tianditu_img_c, tianditu_cva_c],
       });
       // 图层点击事件
       map.on("singleclick", (e) => {

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-06 10:32:20
+ * @LastEditTime: 2024-11-07 09:09:50
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -96,7 +96,7 @@
           </div>
         </div>
         <!-- 右上角切换坐标类型多选框 -->
-        <div class="road-checkBox" v-if="!showImgBk">
+        <div class="road-checkBox" v-if="!showImgBk && this.mapZoom >= 13">
           <fssm-scroll class="road-scroll">
             <el-checkbox-group v-model="iconType" @change="handleChecked">
               <el-checkbox
@@ -115,12 +115,14 @@
           <div class="map-care">
             <div
               class="map-care-div"
-              :class="`map-care-div-${item.tip}`"
+              :class="`map-care-div-${item.status}`"
               v-for="(item, index) in mapCareList"
               :key="`map-care-${index}`"
               :style="{ left: item.left, top: item.top }"
             >
-              <span @click="changeMap(false, item)">{{ item.name }}</span>
+              <span @click="item.lat ? changeMap(false, item) : ''">{{
+                item.name
+              }}</span>
             </div>
           </div>
         </div>
@@ -129,7 +131,8 @@
           v-if="!showImgBk"
           ref="roadMap"
           :showChange="true"
-          :controlStyle="{ top: '30%', right: '26%' }"
+          :controlStyle="{ top: '23%', left: '27%' }"
+          :centerPoint="mapCenterPoint"
           @map-moveend="mapMoveend"
           @map-zoom="getZoom"
           @feature-select="featureSelect"
@@ -331,6 +334,8 @@ export default {
         { name: "道路资产", component: "RoadScreen" },
         { name: "交安事件", component: "TrafficScreen" },
       ],
+      // 地图中心点
+      mapCenterPoint: {},
       // 中心点集合(全部)
       centerPiont: [],
       // 中心点集合（当前）
@@ -389,6 +394,7 @@ export default {
         this.dataTime = `${hours}:${minutes}:${seconds}`;
       }, 1000);
     },
+
     /* 获取数据栏右上角选项数据 */
     getSelect() {
       selectTypeList().then(({ code, data }) => {
@@ -397,121 +403,26 @@ export default {
         }
       });
     },
+
     /* 获取图片背景下坐标数据 */
     getMapCare() {
       comppanyImg().then(({ code, data }) => {
         if (code === 200) {
-          // this.mapCareList = data.filter((item) => item.lat && item.lon);
+          this.mapCareList = data;
-          // console.log(this.mapCareList)
         }
       });
-      this.mapCareList = [
-        {
-          name: "沈抚",
-          left: "63%",
-          top: "12%",
-          tip: "1",
-        },
-        {
-          name: "葫芦岛",
-          left: "24%",
-          top: "38%",
-          tip: "1",
-        },
-        {
-          name: "阜新",
-          left: "40%",
-          top: "10%",
-          tip: "1",
-        },
-        {
-          name: "盘锦",
-          left: "44%",
-          top: "27%",
-          tip: "1",
-        },
-        {
-          name: "铁岭",
-          left: "70%",
-          top: "3%",
-          tip: "1",
-        },
-        {
-          name: "抚顺",
-          left: "56%",
-          top: "17%",
-          tip: "1",
-        },
-        {
-          name: "本溪",
-          left: "67%",
-          top: "26%",
-          tip: "1",
-        },
-        {
-          name: "辽阳",
-          left: "60%",
-          top: "30%",
-          tip: "1",
-        },
-        {
-          name: "营口",
-          left: "48%",
-          top: "42%",
-          tip: "1",
-        },
-        {
-          name: "鞍山",
-          left: "57%",
-          top: "38%",
-          tip: "1",
-        },
-        {
-          name: "沈阳",
-          left: "51%",
-          top: "11%",
-          tip: "2",
-        },
-        {
-          name: "锦州",
-          left: "35%",
-          top: "25%",
-          tip: "3",
-        },
-        {
-          name: "朝阳",
-          left: "20%",
-          top: "20%",
-          tip: "4",
-        },
-        {
-          name: "大连",
-          left: "43%",
-          top: "53%",
-          tip: "5",
-        },
-        {
-          name: "丹东",
-          left: "71%",
-          top: "39%",
-          tip: "6",
-        },
-        {
-          name: "金普",
-          left: "47%",
-          top: "57%",
-          tip: "6",
-        },
-      ];
     },
+
     /* 点击病害筛查 */
     clickImg() {
       this.imgVisible = true;
     },
+
     /* 关闭图片查看弹窗 */
     imgCancel() {
       this.imgVisible = false;
     },
+
     /* 切换icon类型多选框事件 */
     handleChecked(value) {
       this.centerPiont = this.drawPointList.filter(
@@ -524,9 +435,11 @@ export default {
         this.drawPoint();
       });
     },
+
     /* 点击图片点位切换地图事件 */
-    changeMap(boolen, value) {
+    changeMap(boolen, item) {
       this.showImgBk = boolen;
+      this.mapCenterPoint = { lat: item.lat * 1, lon: item.lon * 1 };
       if (!boolen) {
         // 默认点击的图标是巡查车
         this.changeIconType("defect");
@@ -535,8 +448,10 @@ export default {
         this.mapZoom = "";
         this.clusters = null;
         this.markLayerLines = null;
+        this.mapCenterPoint = {};
       }
     },
+
     /* 获取地图点位信息 */
     getCenterPiont() {
       // 如果当前已经有打点坐标
@@ -566,6 +481,7 @@ export default {
         });
       }
     },
+
     /* 绘制地图点位 */
     drawPoint() {
       const features = [];
@@ -596,8 +512,8 @@ export default {
         features.push(feature);
       });
       const clusterSource = new Cluster({
-        distance: 60,
+        distance: this.mapZoom > 15 ? 0 : 130,
-        minDistance: 60,
+        minDistance: this.mapZoom > 15 ? 0 : 130,
         source: new VectorSource({
           features,
         }),
@@ -665,21 +581,21 @@ export default {
         map.addLayer(this.clusters);
       });
     },
+
     /* 获取地图线段点位信息 */
     getLinePoint() {
-      if (!this.markLayerLines) {
+      mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => {
-        mapPciList({ type: this.mapClick }).then(({ code, data }) => {
         if (code === 200) {
           this.lineString = data.map((item) => {
-              return item.coordinates.split(";").map((it) => {
+            return item?.coordinates?.split(";").map((it) => {
               return it.split(",").map(Number);
             });
           });
           this.drawLine();
         }
       });
-      }
     },
+
     /* 绘制地图线段 */
     drawLine() {
       const features = [];
@@ -724,17 +640,18 @@ export default {
         map.addLayer(this.markLayerLines);
       });
     },
+
     /* 图标类别切换点击事件 */
     changeIconType(value) {
       if (this.mapClick !== value) {
         this.mapClick = value;
-        if (this.$refs.roadMap) {
+        this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
           map.removeLayer(this.markLayerLines);
           map.removeLayer(this.clusters);
           this.clusters = null;
           this.markLayerLines = null;
-        }
+        });
         // 获取对应右上角icon类型
         this.getIconType(value);
         // 请求地图打点/绘制线段接口
@@ -745,6 +662,7 @@ export default {
         }
       }
     },
+
     /* 获取icon多选数据 */
     getIconType(value) {
       this.mapLogeList = {};
@@ -760,36 +678,38 @@ export default {
         }
       });
     },
+
     /* 传回来的地图图层 */
     getZoom(zoom) {
-      if (zoom === "10") {
+      this.mapZoom = zoom;
-        // 绘制点位
+      if (zoom * 1 >= 13) {
         this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
           map.removeLayer(this.markLayerLines);
           this.markLayerLines = null;
-        });
           this.getCenterPiont();
-        this.mapZoom = zoom;
+        });
-      } else if (zoom === "9") {
+      } else if (zoom * 1 < 13) {
-        // 绘制线段
         this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
           map.removeLayer(this.clusters);
+          map.removeLayer(this.markLayerLines);
           this.clusters = null;
-        });
+          this.markLayerLines = null;
           this.getLinePoint();
-        this.mapZoom = zoom;
+        });
       }
     },
+
     /* 地图缩放完成事件 */
     mapMoveend(zoom) {
-      if (this.clusters && zoom > 13) {
+      if (this.clusters && zoom * 1 > 15) {
         this.clusters.getSource().setDistance(0);
-      } else if (this.clusters && zoom <= 13) {
+      } else if (this.clusters && zoom * 1 <= 15) {
-        this.clusters.getSource().setDistance(60);
+        this.clusters.getSource().setDistance(130);
       }
     },
+
     /* 地图选中feature事件 */
     featureSelect(e) {
       const map = this.$refs.roadMap.instance.get("map");
@@ -820,6 +740,7 @@ export default {
         }
       }
     },
+
     /* 数据栏切换事件 */
     changeElement(item) {
       if (this.elementDiv !== item) {
@@ -968,6 +889,7 @@ export default {
         }
       }
     },
+
     /* 跳转系统首页 */
     goIndex() {
       this.$router.push("/index");