可视化大屏开发

src/components/CommonMap.vue

 <template>
-  <div id="container" v-loading="mapLoading" element-loading-background="rgba(122, 122, 122, 0)"></div>
+  <div
+    id="container"
+    v-loading="mapLoading"
+    element-loading-background="rgba(122, 122, 122, 0)"
+  ></div>
 </template>
 <script setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
@@ -11,7 +15,7 @@ import {
   onUnmounted,
   onActivated,
   defineEmits,
-  watch
+  watch,
 } from "vue";
 
 const props = defineProps({
@@ -24,14 +28,15 @@ watch(
   () => props.tabKey,
   (newVal) => {
     // 根据页面内容，调整地图显示位置
-    const center = ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787];
+    const center = ["lixiang", "tuichu"].includes(props.tabKey)
+      ? [100.808299, 35.791787]
+      : [127.808299, 35.791787];
     map && map.setCenter(center);
     map.setZoom(4);
     handleAddMarket();
   }
 );
 
-
 // 定义事件
 const emit = defineEmits(["province-selected"]);
 import gansuLine from "./newLine.json";
@@ -52,7 +57,9 @@ const handleInitMap = () => {
     viewMode: "2D",
     zoom: 4, //根据屏幕宽度设置初始化地图级别
     zooms: [4, 8],
-        center: ["lixiang", "tuichu"].includes(props.tabKey) ? [100.808299, 35.791787] : [127.808299, 35.791787], //初始化地图中心点位置
+    center: ["lixiang", "tuichu"].includes(props.tabKey)
+      ? [100.808299, 35.791787]
+      : [127.808299, 35.791787], //初始化地图中心点位置
     expandZoomRange: true, // 开启显示范围设置
     mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
     rotateEnable: false, // 是否可以旋转
@@ -87,7 +94,7 @@ const handleInitMap = () => {
       geojsonObj && map.remove(geojsonObj);
       geojsonObj = null;
       handleAddMarket();
-          provincePolylines.forEach(provincePolyline => {
+      provincePolylines.forEach((provincePolyline) => {
         map.remove(provincePolyline);
       });
     }
@@ -100,8 +107,7 @@ const searchDistrict = () => {
     key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
     // version: "2.0",
     plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
-  })
-    .then((AMap) => {
+  }).then((AMap) => {
     let districtSearch = new AMap.DistrictSearch({
       subdistrict: 1, //获取边界不需要返回下级行政区
       extensions: "all", //返回行政区边界坐标组等具体信息
@@ -114,9 +120,9 @@ const searchDistrict = () => {
       }
       handleInitMap();
       handleDistrict();
-      })
-  })
-}
+    });
+  });
+};
 // 高亮和描边
 const handleDistrict = () => {
   // 描边
@@ -185,7 +191,10 @@ const addPolylines = () => {
 
         // 鼠标经过
         polylineObj.on("mouseover", function (e) {
-          infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
+          infoWindow.open(map, [
+            `${e.lnglat.getLng()}`,
+            `${e.lnglat.getLat()}`,
+          ]);
         });
         // 鼠标移出
         polylineObj.on("mouseout", function (e) {
@@ -284,7 +293,7 @@ const handleAddMarket = () => {
       isCustom: true,
       content: infoContent,
       offset: new AMap.Pixel(5, 0),
-      closeWhenClickMap: true
+      closeWhenClickMap: true,
     });
 
     const marker = new AMap.Marker({
@@ -296,7 +305,7 @@ const handleAddMarket = () => {
         '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
         `<div class="anchorPoint">${markerData.number}</div>` +
         "</div>",
-        zIndex: 100
+      zIndex: 100,
     });
 
     // 鼠标悬浮事件
@@ -312,7 +321,7 @@ const handleAddMarket = () => {
     // 点击事件：聚焦到对应省份并显示省份地图
     marker.on("click", function (e) {
       // map.remove(provincePolylines);
-      provincePolylines.forEach(provincePolyline => {
+      provincePolylines.forEach((provincePolyline) => {
         map.remove(provincePolyline);
       });
       provincePolylines = [];
@@ -486,21 +495,25 @@ onActivated(() => {});
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
-  p{
+  p {
     height: 51px;
     line-height: 51px;
     display: flex;
     align-items: center;
-    &:not(:last-child){
+    &:not(:last-child) {
       position: relative;
-      &::after{
+      &::after {
         content: "";
         height: 1px;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
-        background: radial-gradient(rgba(255, 255, 255, 0) 0%, #3B71FA 50%, rgba(255, 255, 255, 0) 100%);
+        background: radial-gradient(
+          rgba(255, 255, 255, 0) 0%,
+          #3b71fa 50%,
+          rgba(255, 255, 255, 0) 100%
+        );
       }
     }
   }
@@ -595,8 +608,8 @@ onActivated(() => {});
 }
 </style>
 <style lang="less">
-  .amap-info{
+.amap-info {
   z-index: 2;
   pointer-events: none;
-  }
-  </style>
\ No newline at end of file
+}
+</style>

src/router/routes.js

@@ -211,6 +211,12 @@ const routes = [
             title: "投资目标责任书",
             component: () => import("@/views/everydayPage/shareAdd.vue"),
           },
+          {
+            path: "/bigScreen",
+            name: "bigScreen",
+            title: "可视化大屏",
+            component: () => import("@/views/everydayPage/bigScreen.vue"),
+          },
         ],
       },
       {