测试

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

@@ -49,7 +49,9 @@ export default {
       mTime: null,
       code: 230000,
       mapData: {},// 传过来的值
-      href: window.location.href
+      href: window.location.href,
+      level: '',
+      center: [],
     }
   },
   mounted() {
@@ -60,12 +62,20 @@ export default {
       let _self = this
       bigemap.then(() => {
         // window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
-        window.BM.Config.HTTP_URL = 'http://localhost:9000';
+        window.BM.Config.HTTP_URL = 'http://192.168.1.181:9000';
         // arcgis-satellite
         // amap-satellite
         // zhongkexingtu
         // let map = window.BM.map('map', 'bigemap.arcgis-satellite', {
-        let map = window.BM.map('map', 'bigemap.6914xxtx', {
+        // let map = window.BM.map('map', 'bigemap.6914xxtx', {
+        //   center: [30, 104],
+        //   minZoom: 6,
+        //   zoom: 11,
+        //   zoomControl: true,
+        //   attributionControl: false,
+        //   preferCanvas: true, //适用于数据量大时 地图反应速度加快
+        // });
+        let map = window.BM.map('map', null, {
           center: [30, 104],
           minZoom: 6,
           zoom: 11,
@@ -74,19 +84,25 @@ export default {
           preferCanvas: true, //适用于数据量大时 地图反应速度加快
         });
         window.Bmap = map;
-
-
-        // 没透明
-        // var offline=window.BM.tileLayer('bigemap.a58a3rnz');
-        // 透明
-        // var offline=window.BM.tileLayer('bigemap.0utmz6qt');
-        // offline.addTo(map)
+        var layer1=window.BM.tileLayer('bigemap.6914xxtx')
+        var layer2=window.BM.tileLayer('bigemap.0utmz6qt');
+        map.setMaxZoom(12);
+        layer1.addTo(map);
+        setTimeout(()=>{
+          Object.assign(layer1.options,{
+            maxNativeZoom:8,
+            maxZoom:12
+          })
+          map.zoomOut();
+          map.zoomIn();
+        },500)
+        layer2.addTo(map)
         // 热力图是有8级需合并两个图层
-        var layer = window.BM.tileLayer('bigemap.0utmz6qt',{opacity:0.7}).addTo(map).on('load',function (){
-          layer.options.maxNativeZoom=8;
-          layer.options.maxZoom=12;
-          map.setMaxZoom(12);
-        })
+        // var layer = window.BM.tileLayer('bigemap.0utmz6qt', {opacity: 0.7}).addTo(map).on('load', function () {
+        //   layer.options.maxNativeZoom = 8;
+        //   layer.options.maxZoom = 12;
+        //   map.setMaxZoom(12);
+        // })
         this.bMap = map;
         //首尾需要一致
         let mask = window.BMturf.polygon([[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
@@ -144,18 +160,25 @@ export default {
           // this.setHeatMap(this.bMap);
           //绑定事件
           this.bindEvents(this.bMap);
-          if(this.mapData.level !== null){
-            this.bMap.setZoom(this.mapData.level)
-            this.bMap.panTo(this.mapData.center)
+          if (this.mapData.level !== null) {
+            // if (this.mapData.level > 8) {
+            //   this.bMap.setView(this.mapData.center, 8)
+            // }
+            _self.level = this.mapData.level
+            _self.center = this.mapData.center
+            this.bMap.setView(this.mapData.center, this.mapData.level)
+
+            // this.bMap.setZoom(this.mapData.level)
+            // this.bMap.panTo(this.mapData.center)
           }
         })
-        let sIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/station.png'
-        let hfSIconurl = 'http://'+_self.href.split("//")[1].split("/")[0]+'/largeScreenImg/huafuStation.png'
+        let sIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/station.png'
+        let hfSIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/huafuStation.png'
         let pIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/project.png'
         let fjIconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji.png'
 
         // 所有场站标记点位
-        if(this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined){
+        if (this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined) {
           let data = this.mapData.allStationInfo
           let station_icon = window.BM.icon({
             iconUrl: sIconurl,
@@ -167,29 +190,29 @@ export default {
             iconSize: [35, 55],
             iconAnchor: [35, 55]
           })
-          for(let item of data.otherStation){
-            let coordinate = [Number(item.latitude),Number(item.longitude)]
-            let marker = window.BM.marker(coordinate,{
+          for (let item of data.otherStation) {
+            let coordinate = [Number(item.latitude), Number(item.longitude)]
+            let marker = window.BM.marker(coordinate, {
               icon: station_icon,
               riseOnHover: true
             }).addTo(this.bMap);
             marker.on('mouseover', function (e) {
               marker.bindTooltip('<div>场站名称：' + item.stationName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+                {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
             })
             marker.on('mouseout', function () {
               marker.bindTooltip().closeTooltip();
             })
           }
-          for(let item of data.HDStation){
-            let coordinate = [Number(item.latitude),Number(item.longitude)]
-            let marker = window.BM.marker(coordinate,{
+          for (let item of data.HDStation) {
+            let coordinate = [Number(item.latitude), Number(item.longitude)]
+            let marker = window.BM.marker(coordinate, {
               icon: hf_station_icon,
               riseOnHover: true
             }).addTo(this.bMap);
             marker.on('mouseover', function (e) {
               marker.bindTooltip('<div>场站名称：' + item.stationName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+                {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
             })
             marker.on('mouseout', function () {
               marker.bindTooltip().closeTooltip();
@@ -214,14 +237,14 @@ export default {
             // 悬浮动作
             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();
+                {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}
+              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"})
@@ -235,7 +258,7 @@ export default {
             iconUrl: sIconurl,
             iconSize: [30, 50],
             iconAnchor: [30, 50],
-            className:'stationIcon',
+            className: 'stationIcon',
           })
           for (let item of data) {
             let coordinate = [Number(item.latitude), Number(item.longitude)]
@@ -246,16 +269,16 @@ export default {
             // 悬浮动作
             marker.on('mouseover', function (e) {
               marker.bindTooltip('<div>场站名称：' + item.stationName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+                {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
             })
             marker.on('mouseout', function () {
               marker.bindTooltip().closeTooltip();
             })
             // 点击动作
             marker.on('click', function (e) {
-              let station = {id: item.id,stationName: item.stationName}
-              sessionStorage.setItem("stationInfo",JSON.stringify(station))
-              _self.$store.dispatch('equipmentInfo/stationInfo',JSON.stringify(station))
+              let station = {id: item.id, stationName: item.stationName}
+              sessionStorage.setItem("stationInfo", JSON.stringify(station))
+              _self.$store.dispatch('equipmentInfo/stationInfo', JSON.stringify(station))
               _self.$router.push({path: "/homepage/stationInfo"})
             })
           }
@@ -267,27 +290,27 @@ export default {
             iconUrl: pIconurl,
             iconSize: [35, 55],
             iconAnchor: [35, 55],
-            className:'stationIcon',
+            className: 'stationIcon',
           })
           let fj_icon = window.BM.icon({
             iconUrl: fjIconurl,
             iconSize: [30, 30],
             iconAnchor: [30, 30],
-            className:'stationIcon',
+            className: 'stationIcon',
           })
-          for(let item of data.fan){
-            let coordinate = [Number(item.latitudeFan),Number(item.longitudeFan)]
-            let marker = window.BM.marker(coordinate,{
+          for (let item of data.fan) {
+            let coordinate = [Number(item.latitudeFan), Number(item.longitudeFan)]
+            let marker = window.BM.marker(coordinate, {
               icon: fj_icon,
               riseOnHover: true
             }).addTo(this.bMap);
           }
-          for(let item of data.coordinatesList){
-            if(item.length>0){
+          for (let item of data.coordinatesList) {
+            if (item.length > 0) {
               let latlngs = []
-              for (let coor of item){
-                latlngs.push([Number(coor.latitude),Number(coor.longitude)])
-                window.BM.marker([Number(coor.latitude),Number(coor.longitude)]).addTo(this.bMap);
+              for (let coor of item) {
+                latlngs.push([Number(coor.latitude), Number(coor.longitude)])
+                window.BM.marker([Number(coor.latitude), Number(coor.longitude)]).addTo(this.bMap);
               }
               var polygon = BM.polygon(latlngs).addTo(this.bMap);
               // 让地图适配当前的线段
@@ -303,12 +326,12 @@ export default {
             // 悬浮动作
             marker.on('mouseover', function (e) {
               // console.log(item)
-              if(item.type === 'project'){
-                marker.bindTooltip('<div>项目名称：' + item.projectName + '</div>'+ '<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                  {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
-              }else{
-                marker.bindTooltip('<div>场站名称：' + item.stationName + '</div>'+ '<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
-                  {permanent:true,className:'infoToolTip',offset:[0,-30]}).openTooltip();
+              if (item.type === 'project') {
+                marker.bindTooltip('<div>项目名称：' + item.projectName + '</div>' + '<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+                  {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
+              } else {
+                marker.bindTooltip('<div>场站名称：' + item.stationName + '</div>' + '<div>测风塔名称：' + item.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
+                  {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
               }
 
             })
@@ -317,13 +340,13 @@ export default {
             })
             // 点击动作
             marker.on('click', function (e) {
-              if(item.type === 'project'){
-                let project = {projectId:item.projectId,equipmentNo:item.towerNo}
+              if (item.type === 'project') {
+                let project = {projectId: item.projectId, equipmentNo: item.towerNo}
                 sessionStorage.setItem("emailWindTowerInfo", JSON.stringify(project))
                 _self.$store.dispatch('equipmentInfo/emailWindTowerInfo', JSON.stringify(project))
                 _self.$router.push({path: "/homepage/emailResourcesInfo"})
-              }else {
-                let station = {stationId:item.stationId,equipmentNo:item.towerNo}
+              } else {
+                let station = {stationId: item.stationId, equipmentNo: item.towerNo}
                 sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
                 _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
                 _self.$router.push({path: "/homepage/realResourcesInfo"})
@@ -380,12 +403,15 @@ export default {
     },
     //绑定事件-监听地图级别和拖动
     bindEvents(map) {
+      let _self = this
       map.on('moveend', function (e) {
         const c = this.getCenter();
+        _self.center = this.getCenter()
         document.getElementById('move').innerHTML = '当前中心点: 纬度:' + c.lat.toFixed(5) + ',经度:' + c.lng.toFixed(5);
       });
       //添加一个缩放事件
       map.on('zoomend', function (e) {
+        _self.level = this.getZoom()
         document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
       });
     },
@@ -485,19 +511,20 @@ export default {
 }
 </script>
 <style>
-.infoToolTip{
+.infoToolTip {
   color: white;
   background: rgba(0, 133, 212, 0.75);
   border: .5px solid #0085d4;
 }
 
-.my_tooltip{
+.my_tooltip {
   color: #0085d4;
   background: transparent;
   border: none;
   /*font-size: 18px;*/
 }
-.my_tooltip::before{
+
+.my_tooltip::before {
   display: none;
 }
 </style>