feat： 地图样式调整

nezha-fronted/src/components/chart/chart/chartMap.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="overview">
     <div class="content-col-content" style="padding:0">
-      <div :id="'map' + (isFullscreen ? '-screen-' : '' ) + chartInfo.id " style="height: 100%; width: 100%" :style="theme=='dark'? 'filter: invert(1) hue-rotate(0.5turn);opacity: 0.75;': ''"></div>
+      <div :id="'map' + (isFullscreen ? '-screen-' : '' ) + chartInfo.id " style="height: 100%; width: 100%"></div>
     </div>
     <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
     <div :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" class="my-pane" :class="'my-pane-' + chartId" v-if="tooltip.show">
@@ -64,12 +64,13 @@ import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
 import maplibregl from 'maplibre-gl'
-import mapStyle from './mapStyle'
+import mapAllStyle from './mapStyle'
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
   name: 'chartMap',
   mixins: [chartMixin, chartFormat],
   data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
     return {
       map: null,
       tooltip: {
@@ -78,7 +79,7 @@ export default {
         show: false
       },
       dcStat: {},
-      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`),
+      theme,
       timer: null,
       requestAnimationFrame: '',
       pbfUrl: {
@@ -118,6 +119,7 @@ export default {
         const param = { paramKey: 'map_center_config' }
         this.$get('sysConfig', param).then(response => {
           if (response.code == 200) {
+            const mapStyle = mapAllStyle[this.theme]
             const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
             mapStyle.center = [Number(mapConfig.longitude), Number(mapConfig.latitude)]
             mapStyle.zoom = Number(mapConfig.zoom)

nezha-fronted/src/components/common/latlngPicker.vue

@@ -23,7 +23,7 @@
 // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 import 'leaflet/dist/leaflet.css'
 import maplibregl from 'maplibre-gl'
-import mapStyle from '@/components/chart/chart/mapStyle'
+import mapAllStyle from '@/components/chart/chart/mapStyle'
 export default {
   name: 'latlngPicker',
   props: {
@@ -33,7 +33,7 @@ export default {
   },
   data () {
     return {
-      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`),
+      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
       lnglat: '',
       oldlnglat: '',
       mapParam: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 7 },
@@ -55,16 +55,6 @@ export default {
     }
   },
   mounted () {
-    const arr = []
-    mapStyle.layers.forEach(item => {
-      if (item.layout['text-font']) {
-        const font = item.layout['text-font'].join(',')
-        if (arr.indexOf(font) === -1) {
-          arr.push(font)
-        }
-      }
-    })
-    console.log(arr)
   },
   methods: {
     initMap () {
@@ -73,6 +63,7 @@ export default {
         this.map = null
       }
       this.setLatlng()
+      let mapStyle = mapAllStyle[this.theme]
       mapStyle.center = [Number(this.mapParam.longitude), Number(this.mapParam.latitude)]
       mapStyle.zoom = Number(this.zoom)
       const mapId = document.getElementById('map')

nezha-fronted/src/components/common/login.vue

@@ -426,7 +426,7 @@ export default {
         const group = SVG().addTo(box).attr('id', key).size('255', '305')
         group.attr('width', '265')
         group.attr('height', '305')
-        group.attr('style', `left: ${coordinatePoint[key].offsetX};top:${coordinatePoint[key].offsetY};transform:scale(${this.zoom}) translate(0, -50px)`)
+        group.attr('style', `left: ${coordinatePoint[key].offsetX};top:${coordinatePoint[key].offsetY};transform:scale(${this.zoom}) translate(0, -50px);animation-delay:${r(-12,-1)}s`)
         group.attr('class', 'constellation')
         const polyline = group.polyline(coordinatePoint[key].point.map(item => [item.x, item.y])) // 先将所有点 用直线链接
         polyline.fill('none')
@@ -536,6 +536,8 @@ export default {
   }
   .constellation{
     position: absolute;
+    /*-webkit-animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;*/
+    /*animation: constellationAnimat var(--twinkle-duration) ease-in-out infinite;*/
   }
   :root {
     --twinkle-duration: 4s;
@@ -584,6 +586,25 @@ export default {
       opacity: 0;
     }
   }
+  @-webkit-keyframes constellationAnimat {
+    25% {
+      opacity: 0.5;
+    }
+  }
+  @keyframes constellationAnimat {
+    25%{
+      opacity: 0.7;
+    }
+    /*50%{*/
+    /*  opacity: 1;*/
+    /*}*/
+    /*75%{*/
+    /*  opacity: 0.5;*/
+    /*}*/
+    /*100%{*/
+    /*  opacity: 1;*/
+    /*}*/
+  }
   .star {
     fill: white;
   }