给热力图图层加上错误处理事件

neim-ui/src/views/largeScreenPage/components/bigeHeatMap.vue

@@ -81,7 +81,7 @@ export default {
         let map = window.BM.map('map', null, {
           center: [30, 104],
           minZoom: 6,
-          maxZoom:12,
+          maxZoom: 12,
           zoom: 11,
           zoomControl: true,
           attributionControl: false,
@@ -111,11 +111,11 @@ export default {
                 return tile;
               }
             });
-            new CanvasLayer({maxZoom:12}).addTo(map);
+            new CanvasLayer({maxZoom: 12}).addTo(map);
           }
         )
         window.Bmap = map;
-       // var layer1=window.BM.tileLayer('bigemap.re-huafu')
+        // var layer1=window.BM.tileLayer('bigemap.re-huafu')
         //var layer2=window.BM.tileLayer('bigemap.heatMapWs',{opacity:0.7});
         let heatmapid = 'bigemap.heatMapWs';
         // let heatmapid = 'bigemap.900gyz4b';
@@ -136,6 +136,13 @@ export default {
                 let tile = new Image;
                 tile.style.backgroundColor = 'inherit';
                 tile.src = `${ip2}/${heatmapid}/tiles/${z}/${x}/${y}.png?access_token=${token}`
+                // 给热力图图层加上错误处理事件
+                // offline.on('tileerror',(e)=>{
+                //   e.tile.remove()
+                // })
+                tile.onerror = function () {
+                  tile.remove()
+                }
                 setTimeout(function () {
                   done(error, tile);
                   return null
@@ -144,16 +151,18 @@ export default {
               }
             });
             new CanvasLayer({
-              maxNativeZoom:8,
-              maxZoom:12,
-              opacity:0.7
+              maxNativeZoom: 8,
+              maxZoom: 12,
+              opacity: 0.7
             }).addTo(map);
+
           }
         )
+
         // map.setMaxZoom(12);
         // layer1.addTo(map);
         this.bMap = map;
-        setTimeout(()=>{
+        setTimeout(() => {
           // Object.assign(layer2.options,{
           //   maxNativeZoom:8,
           //   maxZoom:12
@@ -165,7 +174,7 @@ export default {
           } else {
             this.bMap.setView([46.69090, 128.13354], 7)
           }
-        },500)
+        }, 500)
         // layer2.addTo(map);
         // 热力图是有8级需合并两个图层
         // var layer = window.BM.tileLayer('bigemap.0utmz6qt', {opacity: 0.7}).addTo(map).on('load', function () {
@@ -212,8 +221,8 @@ export default {
           }).addTo(this.bMap);
           window.geo2 = geo2;
           //限制拖动
-          this.bMap.setMaxBounds([[43.42301,122.574976],[53.561657,135.086264]]);
-          this.bMap.fitBounds([[43.42301,122.574976],[53.561657,135.086264]]);
+          this.bMap.setMaxBounds([[43.42301, 122.574976], [53.561657, 135.086264]]);
+          this.bMap.fitBounds([[43.42301, 122.574976], [53.561657, 135.086264]]);
 
           const layers = geo2.getLayers();
           for (const item of layers) {
@@ -271,13 +280,13 @@ export default {
           for (let item of data.otherStation) {
             let coordinate = [Number(item.latitude), Number(item.longitude)]
             let marker = '';
-            if(item.type === '风'){
+            if (item.type === '风') {
               marker = window.BM.marker(coordinate, {
                 icon: station_icon,
                 riseOnHover: true
               }).addTo(this.bMap);
-            }else {
-              marker =window.BM.marker(coordinate, {
+            } else {
+              marker = window.BM.marker(coordinate, {
                 icon: gfstation_icon,
                 riseOnHover: true
               }).addTo(this.bMap);
@@ -294,12 +303,12 @@ export default {
           for (let item of data.HDStation) {
             let coordinate = [Number(item.latitude), Number(item.longitude)]
             let marker = '';
-            if(item.type === '风'){
+            if (item.type === '风') {
               marker = window.BM.marker(coordinate, {
                 icon: hf_station_icon,
                 riseOnHover: true
               }).addTo(this.bMap);
-            }else {
+            } else {
               marker = window.BM.marker(coordinate, {
                 icon: hf_gfstation_icon,
                 riseOnHover: true
@@ -329,36 +338,36 @@ export default {
             iconAnchor: [30, 50]
           })
           for (let item of data) {
-           if(item.latitude !== undefined){
-             let coordinate = [Number(item.latitude), Number(item.longitude)]
-             let marker = '';
-             if(item.type === '风'){
-               marker = window.BM.marker(coordinate, {
-                 icon: station_icon,
-                 riseOnHover: true
-               }).addTo(this.bMap);
-             }else {
-               marker = window.BM.marker(coordinate, {
-                 icon: gf_icon,
-                 riseOnHover: true
-               }).addTo(this.bMap);
-             }
-             // 悬浮动作
-             marker.on('mouseover', function (e) {
-               marker.bindTooltip('<div>项目名称：' + item.projectNameEasy + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                 {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
-             })
-             marker.on('mouseout', function () {
-               marker.bindTooltip().closeTooltip();
-             })
-             // 点击动作
-             marker.on('click', function (e) {
-               let project = {id: item.id, projectSort: item.projectName}
-               sessionStorage.setItem("projectInfo", JSON.stringify(project))
-               _self.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
-               _self.$router.push({path: "/homepage/projectInfo"})
-             })
-           }
+            if (item.latitude !== undefined) {
+              let coordinate = [Number(item.latitude), Number(item.longitude)]
+              let marker = '';
+              if (item.type === '风') {
+                marker = window.BM.marker(coordinate, {
+                  icon: station_icon,
+                  riseOnHover: true
+                }).addTo(this.bMap);
+              } else {
+                marker = window.BM.marker(coordinate, {
+                  icon: gf_icon,
+                  riseOnHover: true
+                }).addTo(this.bMap);
+              }
+              // 悬浮动作
+              marker.on('mouseover', function (e) {
+                marker.bindTooltip('<div>项目名称：' + item.projectNameEasy + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+                  {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
+              })
+              marker.on('mouseout', function () {
+                marker.bindTooltip().closeTooltip();
+              })
+              // 点击动作
+              marker.on('click', function (e) {
+                let project = {id: item.id, projectSort: item.projectName}
+                sessionStorage.setItem("projectInfo", JSON.stringify(project))
+                _self.$store.dispatch('equipmentInfo/projectInfo', JSON.stringify(project))
+                _self.$router.push({path: "/homepage/projectInfo"})
+              })
+            }
           }
         }
         // 华富场站标记点位
@@ -479,7 +488,7 @@ export default {
             })
             // 点击动作
             marker.on('click', function (e) {
-              let station = {stationId:item.stationId,equipmentNo:item.id}
+              let station = {stationId: item.stationId, equipmentNo: item.id}
               sessionStorage.setItem("realPvWindTowerInfo", JSON.stringify(station))
               _self.$store.dispatch('equipmentInfo/realPvWindTowerInfo', JSON.stringify(station))
               _self.$router.push({path: "/homepage/realPvResourcesInfo"})
@@ -496,7 +505,7 @@ export default {
               }).addTo(this.bMap);
               marker.on('mouseover', function (e) {
                 // console.log(item)
-                marker.bindTooltip('<div>所属场站名称：' + inverter.name + '</div>'+'<div>逆变器名称：' + item.name + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+                marker.bindTooltip('<div>所属场站名称：' + inverter.name + '</div>' + '<div>逆变器名称：' + item.name + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
                   {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
               })
               marker.on('mouseout', function () {
@@ -512,12 +521,12 @@ export default {
             for (let item of fan.data) {
               let coordinate = [Number(item.latitudeFan), Number(item.longitudeFan)]
               let marker = ''
-              if(fan.type === 'project'){
+              if (fan.type === 'project') {
                 marker = window.BM.marker(coordinate, {
                   icon: redFengji,
                   riseOnHover: true
                 }).addTo(this.bMap);
-              }else {
+              } else {
                 if (item.type !== null) {
                   if (item.type === '新') {
                     marker = window.BM.marker(coordinate, {
@@ -558,7 +567,7 @@ export default {
           for (let coordinatesList of data.coordinatesList) {
             for (let key in coordinatesList) {
               let coordinates = coordinatesList[key]
-              if(coordinates !== null){
+              if (coordinates !== null) {
                 for (let item of coordinates) {
                   if (item.length > 0) {
                     let latlngs = []
@@ -791,13 +800,13 @@ export default {
 <style>
 .infoToolTip {
   color: white !important;
-  background: rgba(0, 133, 212, 0.75)  !important;
+  background: rgba(0, 133, 212, 0.75) !important;
   border: .5px solid #0085d4;
 }
 
 .my_tooltip {
-  color: #0085d4  !important;
-  background: transparent  !important;
+  color: #0085d4 !important;
+  background: transparent !important;
   border: none !important;
   /*font-size: 18px;*/
 }

neim-ui/src/views/largeScreenPage/components/bigeHeatSunMap.vue

@@ -138,6 +138,10 @@ export default {
                 let tile = new Image;
                 tile.style.backgroundColor = 'inherit';
                 tile.src = `${ip2}/${heatmapid}/tiles/${z}/${x}/${y}.png?access_token=${token}`
+                // 给热力图图层加上错误处理事件
+                tile.onerror=function(){
+                  tile.remove()
+                }
                 setTimeout(function () {
                   done(error, tile);
                   return null