优化大屏页面的地图样式

gyj-iot-web/src/utils/map.js

@@ -21,7 +21,7 @@ export function loadBMap() {
         let script = document.createElement('script')
         script.type = 'text/javascript'
         script.src =
-            'http://api.map.baidu.com/api?v=2.0&ak=ltynSnfcyzPms4s2h6x0OhXT78aTXIFW&s=1&__ec_v__=20190126&callback=onBMapCallback'
+            'http://api.map.baidu.com/api?v=3.0&ak=ltynSnfcyzPms4s2h6x0OhXT78aTXIFW&s=1&__ec_v__=20190126&callback=onBMapCallback'
         script.onerror = reject
         document.head.appendChild(script)
     })

gyj-iot-web/src/views/bigScreen/indexs/center-map.vue

@@ -107,129 +107,27 @@ function getmap() {
             zoom: 5,
             // 大屏用zomm缩放，导致地图缩放中心点会偏移
             roam: 'move',
-            mapStyle: {
+            mapOptions: {
+              // 禁用百度地图自带的底图可点功能
+              enableMapClick: false
+            },
+            // 百度地图3.0之后的新版自定义样式
+            mapStyleV2: {
                 styleJson: [{
-                    featureType: 'water',
-                    elementType: 'all',
-                    stylers: {
-                        color: '#3863db'
-                    }
-                },
-                    {
-                        featureType: 'land',
-                        elementType: 'all',
-                        stylers: {
-                            color: '#0e2e87'
-                        }
-                    },
-                    {
-                        featureType: 'railway',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'highway',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#fdfdfd'
-                        }
-                    },
-                    {
-                        featureType: 'highway',
-                        elementType: 'labels',
-                        stylers: {
-                            visibility: 'off',
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'arterial',
-                        elementType: 'geometry',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#fefefe'
-                        }
-                    },
-                    {
-                        featureType: 'arterial',
-                        elementType: 'geometry.fill',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#fefefe'
-                        }
-                    },
-                    {
-                        featureType: 'poi',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off',
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'green',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'subway',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'manmade',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#d1d1d1'
-                        }
-                    },
-                    {
-                        featureType: 'local',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#d1d1d1'
-                        }
-                    },
-                    {
-                        featureType: 'arterial',
-                        elementType: 'labels',
-                        stylers: {
-                            visibility: 'off'
-                        }
-                    },
-                    {
-                        featureType: 'boundary',
-                        elementType: 'all',
-                        stylers: {
-                            color: '#23cdd8'
-                        }
-                    },
-                    {
-                        featureType: 'building',
-                        elementType: 'all',
-                        stylers: {
-                            visibility: 'off',
-                            color: '#d1d1d1'
-                        }
-                    },
-                    {
-                        featureType: 'label',
-                        elementType: 'labels.text.fill',
-                        stylers: {
-                            color: '#264194',
-                            visibility: 'off'
-                        }
-                    }
-                ]
+                  "featureType": "background",
+                  "elementType": "geometry",
+                  "stylers": {
+                    "color": "#0e2e87ff"
+                  },
+                  "styleType": "background"
+                }, {
+                  "featureType": "districtlabel",
+                  "elementType": "labels",
+                  "stylers": {
+                    "visibility": "off"
+                  },
+                  "styleType": "districtlabel"
+                }]
             }
         },
         series: [{
@@ -282,7 +180,6 @@ function getmap() {
         ]
     };
     option && myChart.setOption(option, true);
-
 }
 
 // 格式化数据
@@ -302,7 +199,6 @@ function convertData(data, status) {
                 productName: data[i].productName,
                 activeTime: data[i].activeTime == null ? '' : data[i].activeTime,
                 deviceId: data[i].deviceId,
-                serialNumber: data[i].serialNumber,
                 locationWay: data[i].locationWay,
             });
         }