地图添加长三角示范区图层

src/components/OpeningAnimation.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {onMounted, ref, watch} from "vue";
 
-const openingAnimationSrc = ref(new URL('@/assets/video/openingAnimation.mp4', import.meta.url).href)
+const openingAnimationSrc = ref(new URL('@/assets/video/openAnimation.mp4', import.meta.url).href)
 const openingAnimationRef = ref(null)
 const isPlaying = ref(false);
 

src/utils/mapConfig.ts

@@ -4,6 +4,7 @@ import {Map as AntvMap} from "@antv/l7-maps";
 import {formatStringByTemplate} from "@/utils/string";
 import bus from "@/utils/bus";
 import boundary from '@/assets/json/zmw.json'
+import boundaryTri from '@/assets/json/tri.json'
 import thData from '@/assets/json/th.json'
 import thRiverData from '@/assets/json/thly2.json'
 // import river2Data from '@/assets/json/river2.json'
@@ -34,7 +35,7 @@ export function init(config: any) {
     id: 'mapDiv',
     map: new AntvMap({
       center: [120.69349862882711, 30.929366187471757],
-      zoom: 9.806292879449915
+      zoom: 5
     }),
   });
 
@@ -46,6 +47,19 @@ export function init(config: any) {
     if (config && config.images && config.images.length > 0) {
       loadImage(config.images)
     }
+    setTimeout(function() {
+      scene.setZoom(6);
+      setTimeout(function() {
+        scene.setZoom(7);
+        setTimeout(function() {
+          scene.setZoom(8);
+          setTimeout(function() {
+            scene.setZoom(9.806292879449915);
+
+          }, 200);
+        }, 200);
+      }, 200);
+    }, 200);
   });
 
   // 地图平移时触发事件
@@ -74,6 +88,7 @@ function loadBaseLayer() {
   });
   scene.addLayer(layer1);
   loadBoundaryLayer()
+  loadBoundaryTriLayer()
   loadRiverLayer()
   // const baseLayer = new RasterLayer().source(
   //   `https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=a4eab5a1b0d94268669e192b8799f626}`,
@@ -96,6 +111,14 @@ function loadBoundaryLayer() {
 
 }
 
+// 加载长三角示范区边界线
+function loadBoundaryTriLayer() {
+  const boundaryLayer = new PolygonLayer().source(boundaryTri).shape('fill').size(3).color('#213cef').style({
+    opacity: 0.6,
+  })
+  scene.addLayer(boundaryLayer);
+}
+
 // 添加河网数据
 function loadRiverLayer() {
   // const river2Layer=new PolygonLayer().source(river2Data).shape('line').size(1.5).color('#4b59b4')

src/views/IntellOper.vue

@@ -217,7 +217,7 @@ function handleDeviceClick(row) {
       <card01 style="height: 33%" title="维护情况">
         <chart ref="right3Ref"></chart>
       </card01>
-      <card01 style="height: 65%" title="故障报警列表">
+      <card01 style="height: 65%" title="故障报警">
         <stripe-table :columns="alarmColumns" :data="alarmData"></stripe-table>
       </card01>
     </template>