feat: 优化地图基础样式

src/components/Map/Mapbox/index.ts

@@ -21,16 +21,10 @@ export function buildTdtTileUrl(id: string, tk: string) {
 /**
  * 地图样式
  */
-export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number; maxBounds?: number[][] } = {
+export const defaultStyle: mapboxgl.Style = {
     version: 8,
     zoom: 5.5,
-    center: [111.6, 27.070844],
-    minzoom: 5,
-    maxzoom: 18,
-    maxBounds: [
-        [99.94, 20.89],
-        [125.03, 33.52],
-    ],
+    center: [111.6, 27.170844],
     sprite: `${host}/api/sprites/hntq/sprite`,
     glyphs: `${host}/api/fonts/{fontstack}/{range}.pbf`,
     sources: {
@@ -200,6 +194,32 @@ export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number
             },
         },
 
+        // 城市边界
+        {
+            id: `430000.city-line`,
+            source: '430000.city',
+            'source-layer': '430000.city',
+            type: 'line',
+            paint: {
+                'line-width': 1,
+                'line-color': '#ccc',
+            },
+            minzoom: 5,
+        },
+
+        // 县城边界
+        {
+            id: `430000.area-line`,
+            source: '430000.area',
+            'source-layer': '430000.area',
+            type: 'line',
+            paint: {
+                'line-width': 1,
+                'line-color': '#ccc',
+            },
+            minzoom: 8,
+        },
+
         // ============ 省市县边界图层 ============
         {
             id: '430000-mask',
@@ -225,9 +245,10 @@ export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number
                 'line-cap': 'round',
             },
             paint: {
-                'line-width': 8,
+                'line-width': 4,
                 'line-blur': 92.7,
                 'line-offset': -4,
+                'line-color': '#444',
             },
             minzoom: 5,
         },
@@ -238,20 +259,10 @@ export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number
             type: 'line',
             paint: {
                 'line-width': 2,
+                'line-color': '#444',
             },
         },
 
-        // 城市边界
-        {
-            id: `430000.city-line`,
-            source: '430000.city',
-            'source-layer': '430000.city',
-            type: 'line',
-            paint: {
-                'line-width': 1,
-            },
-            minzoom: 5,
-        },
         // 城市名称
         {
             id: `430000.city-label`,
@@ -273,24 +284,12 @@ export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number
             paint: {
                 'text-color': '#000',
                 'text-halo-color': '#fff',
-                'text-halo-width': 1,
+                'text-halo-width': 2,
                 'text-halo-blur': 1,
             },
             minzoom: 5,
             maxzoom: 8,
         },
-
-        // 县城边界
-        {
-            id: `430000.area-line`,
-            source: '430000.area',
-            'source-layer': '430000.area',
-            type: 'line',
-            paint: {
-                'line-width': 1,
-            },
-            minzoom: 8,
-        },
         // 县城名称
         {
             id: `430000.area-label`,
@@ -312,7 +311,7 @@ export const defaultStyle: mapboxgl.Style & { minzoom?: number; maxzoom?: number
             paint: {
                 'text-color': '#000',
                 'text-halo-color': '#fff',
-                'text-halo-width': 1,
+                'text-halo-width': 2,
                 'text-halo-blur': 1,
             },
             minzoom: 8,

src/components/Map/Mapbox/index.vue

@@ -13,7 +13,7 @@
 
     export default {
         props: {
-            style: {
+            config: {
                 type: Object,
                 default: () => ({}),
             },
@@ -30,7 +30,8 @@
         mounted() {
             this.options = {
                 container: this.id,
-                style: this.style,
+                style: this.config?.style,
+                options: this.config?.options,
             }
         },
         methods: {

src/components/Map/Mapbox/mapbox.module.js

@@ -25,6 +25,13 @@ export default {
                     ...defaultStyle,
                     ...options?.style,
                 }),
+                ...merge(
+                    {
+                        minZoom: 5,
+                        maxZoom: 18,
+                    },
+                    options?.options,
+                ),
             })
 
             // 绑定作用域
@@ -70,6 +77,7 @@ export default {
                 return
             }
 
+            console.log(options)
             if (typeof window.mapboxgl === 'object') {
                 this.initMap(options)
             } else {

src/pages.json

@@ -2,7 +2,7 @@
     "globalStyle": {
         "navigationBarTextStyle": "white",
         "navigationBarBackgroundColor": "#F8F8F8",
-        "backgroundColor": "#F8F8F8",
+        "backgroundColor": "#FFFFFF",
         "pageOrientation": "portrait" //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
     },
     "pages": [

src/pages/business/monitor/rain/index.vue

@@ -7,7 +7,7 @@
 </script>
 
 <template>
-    <view class="bg h-100vh">
+    <view class="bg-white h-100vh">
         <!-- 地图组件 -->
         <Mapbox style="height: 100%" />
 

types/components.d.ts

@@ -136,7 +136,6 @@ declare module 'vue' {
     Grid: typeof import('./../src/components/Layout/Grid.vue')['default']
     Header: typeof import('./../src/components/Layout/Header.vue')['default']
     Icon: typeof import('./../src/components/Icon/index.vue')['default']
-    Map: typeof import('./../src/components/Map/Mapbox/Map.vue')['default']
     Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
     MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']