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

<template>
  <div>
    <div id='map'></div>
    <div id="position">
      <div id="zoom">
        当前级别 : 6
      </div>
      <div id="move">
        当前中心点: 纬度:0.00000,经度:0.00000
      </div>
    </div>
    <div style="position: fixed;bottom: 8%;left:.5%;z-index: 1000;box-shadow: rgb(56 76 85) 0px 1px 9px 4px inset">
      <img src="../../../../public/largeScreenImg/80mWs1.png">
    </div>
    <!--    <el-radio-group v-model="leavel" @change="setData">-->
    <!--      <el-radio class="radio" label="100">100Mb</el-radio>-->
    <!--      <el-radio class="radio" label="250">250Mb</el-radio>-->
    <!--      <el-radio class="radio" label="500">500Mb</el-radio>-->
    <!--      <el-radio class="radio" label="1000">1000Mb</el-radio>-->
    <!--    </el-radio-group>-->
  </div>
</template>

<script>
import bigemap from '@/utils/bigemap/map'
import Tiff from "tiff.js";
import axios from "axios";

let map;
export default {
  name: "bigeMap",
  props: {mapValue: Object},
  watch: {
    mapValue: {
      immediate: true,
      handler(value) {
        if (value.params !== undefined) {
          console.log("热力图：" + value)
          this.mapData = value
          this.initBigeMap()
        }
      }
    }
  },
  data() {
    return {
      bMap: null,
      velocityLayer: null,
      leavel: {},
      latlngs: [[[0.0, 0.0], [0.0, 0.0]]],
      cone: {},
      mTime: null,
      code: 230000,
      mapData: {},// 传过来的值
      href: window.location.href,
      level: 6,
      center: [],
    }
  },
  mounted() {

  },
  methods: {
    initBigeMap() {
      let _self = this
      bigemap.then(() => {
        // window.BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
        //window.BM.Config.HTTP_URL = 'http://10.124.252.243:9000';

        window.BM.Config.HTTP_URL = process.env.VUE_APP_GIS_API;
        let ip1 = process.env.VUE_APP_GIS_API;
        let ip2 = 'http://49.4.78.194:17143';
        // window.BM.Config.HTTP_URL = 'http://localhost:9000';
        // let ip1 = 'http://localhost:9000';
        // let ip2 = 'http://localhost:9000';
        let mapid = 'bigemap.re-huafu'
        // window.BM.Config.HTTP_URL = 'http://192.168.1.181:9000';
        // arcgis-satellite
        // amap-satellite
        // zhongkexingtu
        let map = window.BM.map('map', null, {
          center: [30, 104],
          minZoom: 6,
          maxZoom: 12,
          zoom: 11,
          zoomControl: true,
          attributionControl: false,
          preferCanvas: true, //适用于数据量大时 地图反应速度加快
        });
        var promise = fetch(`${ip1}/tokens/v1?access_token=none`).then(function (response) {
          return response.json();
        }).then(function (body) {
          return body.token
        }).then(
          (token) => {
            var CanvasLayer = BM.GridLayer.extend({
              createTile: function (coords, done) {
                let error;
                let {
                  x,
                  y,
                  z
                } = coords;
                let tile = new Image;
                tile.style.backgroundColor = 'inherit';
                tile.src = `${ip2}/${mapid}/tiles/${z}/${x}/${y}.png?access_token=${token}`
                setTimeout(function () {
                  done(error, tile);
                  return null
                }, 1000);
                return tile;
              }
            });
            new CanvasLayer({maxZoom: 12}).addTo(map);
          }
        )
        window.Bmap = map;
        // 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';
        fetch(`${ip1}/tokens/v1?access_token=none`).then(function (response) {
          return response.json();
        }).then(function (body) {
          return body.token
        }).then(
          (token) => {
            var CanvasLayer = BM.GridLayer.extend({
              createTile: function (coords, done) {
                let error;
                let {
                  x,
                  y,
                  z
                } = coords;
                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
                }, 1000);
                return tile;
              }
            });
            new CanvasLayer({
              maxNativeZoom: 8,
              maxZoom: 12,
              opacity: 0.7
            }).addTo(map);

          }
        )

        // map.setMaxZoom(12);
        // layer1.addTo(map);
        this.bMap = map;
        setTimeout(() => {
          // Object.assign(layer2.options,{
          //   maxNativeZoom:8,
          //   maxZoom:12
          // })
          if (this.mapData.center.length !== 0) {
            _self.level = this.mapData.level
            _self.center = this.mapData.center
            this.bMap.setView(this.mapData.center, this.mapData.level)
          } else {
            this.bMap.setView([46.69090, 128.13354], 7)
          }
        }, 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);
        // })

        //首尾需要一致
        let mask = window.BMturf.polygon([[[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
        let geo2;
        fetch('/js/geojson/230000/' + this.code + '.geojson').then(res => res.json()).then(data => {
          // fetch('/js/geojson/' + this.code + '.geojson').then(res => res.json()).then(data => {
          geo2 = window.BM.geoJSON(data, {
            style: function () {
              return {
                color: '#ffffff',
                weight: 3,
                fillColor: '#ffffff',
                fillOpacity: 0.1
              };
            },
            onEachFeature: function (feature, layer) {
              feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, {
                direction: 'bottom',
                className: 'my_tooltip',
                permanent: true
              });
            }
          }).on('mouseover', function (e) {
            e.layer.setStyle({
              color: '#ffffff',
              weight: 1,
              fillColor: 'transparent',
              fillOpacity: 0.9
            });
          }).on('mouseout', function (e) {
            e.layer.setStyle({
              color: '#ffffff',
              weight: 3,
              fillColor: '#ffffff',
              fillOpacity: 0.2
            });
          }).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]]);

          const layers = geo2.getLayers();
          for (const item of layers) {
            const layer = item.feature;
            mask = window.BMturf.mask(layer, mask);
          }
          window.BM.geoJSON(mask, {
            color: 'orange',
            fillColor: '#0A163A',
            fillOpacity: 0.7
          }).addTo(this.bMap);

          //初始化热力图
          // this.setHeatMap(this.bMap);
          //绑定事件
          this.bindEvents(this.bMap);

        })
        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'
        let gfbconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/guangfuban.png'
        let gfsconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/guang.png'
        let gfhfconurl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/huafuguangfu.png'
        let fengjiblue = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji/fengjiblue.png'
        let fengjigreen = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji/fengjigreen.png'
        let fengjiyellow = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji/fengjiyellow.png'
        let fengjired = 'http://' + _self.href.split("//")[1].split("/")[0] + '/img/fengji/fengjired.png'
        let iconUrl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/huanjingjianceyi.png'
        let nIconUrl = 'http://' + _self.href.split("//")[1].split("/")[0] + '/largeScreenImg/nibianqi.png'
        // 所有场站标记点位
        if (this.mapData.allStationInfo !== null && this.mapData.allStationInfo !== undefined) {
          let data = this.mapData.allStationInfo
          let station_icon = window.BM.icon({
            iconUrl: sIconurl,
            iconSize: [25, 43],
            iconAnchor: [25, 43]
          })
          let hf_station_icon = window.BM.icon({
            iconUrl: hfSIconurl,
            iconSize: [33, 55],
            iconAnchor: [33, 55]
          })
          let gfstation_icon = window.BM.icon({
            iconUrl: iconUrl,
            iconSize: [25, 43],
            iconAnchor: [25, 43]
          })
          let hf_gfstation_icon = window.BM.icon({
            iconUrl: gfhfconurl,
            iconSize: [33, 55],
            iconAnchor: [33, 55]
          })
          for (let item of data.otherStation) {
            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: gfstation_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();
            })
            marker.on('mouseout', function () {
              marker.bindTooltip().closeTooltip();
            })
          }
          for (let item of data.HDStation) {
            let coordinate = [Number(item.latitude), Number(item.longitude)]
            let marker = '';
            if (item.type === '风') {
              marker = window.BM.marker(coordinate, {
                icon: hf_station_icon,
                riseOnHover: true
              }).addTo(this.bMap);
            } else {
              marker = window.BM.marker(coordinate, {
                icon: hf_gfstation_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();
            })
            marker.on('mouseout', function () {
              marker.bindTooltip().closeTooltip();
            })
          }
        }

        // 项目标记点位
        if (this.mapData.projectInfo !== null && this.mapData.projectInfo !== undefined) {
          let data = this.mapData.projectInfo
          let station_icon = window.BM.icon({
            iconUrl: pIconurl,
            iconSize: [30, 50],
            iconAnchor: [30, 50]
          })
          let gf_icon = window.BM.icon({
            iconUrl: gfbconurl,
            iconSize: [30, 50],
            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 (this.mapData.staionInfo !== null && this.mapData.staionInfo !== undefined) {
          let data = this.mapData.staionInfo
          let station_icon = window.BM.icon({
            iconUrl: sIconurl,
            iconSize: [30, 50],
            iconAnchor: [30, 50],
            className: 'stationIcon',
          })
          let hf_gfstation_icon = window.BM.icon({
            iconUrl: gfhfconurl,
            iconSize: [30, 50],
            iconAnchor: [30, 50],
          })
          for (let item of data) {
            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: hf_gfstation_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();
            })
            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))
              _self.$router.push({path: "/homepage/stationInfo"})
            })
          }
        }
        // 所有风机、塔、拐点标记点位
        // console.log(this.mapData.allPointInfo)
        if (this.mapData.allPointInfo !== null && this.mapData.allPointInfo !== undefined) {
          let data = this.mapData.allPointInfo
          let station_icon = window.BM.icon({
            iconUrl: pIconurl,
            iconSize: [35, 55],
            iconAnchor: [35, 55],
            className: 'stationIcon',
          })
          let huanjingjianceyi = window.BM.icon({
            iconUrl: iconUrl,
            iconSize: [35, 55],
            iconAnchor: [35, 55],
            className: 'stationIcon',
          })
          let nibianqi = window.BM.icon({
            iconUrl: nIconUrl,
            iconSize: [35, 55],
            iconAnchor: [35, 55],
            className: 'stationIcon',
          })
          let redFengji = window.BM.icon({
            iconUrl: fengjired,
            iconSize: [30, 30],
            iconAnchor: [30, 30],
            className: 'stationIcon',
          })
          let bluefengji = window.BM.icon({
            iconUrl: fengjiblue,
            iconSize: [30, 30],
            iconAnchor: [30, 30],
            className: 'stationIcon',
          })
          let defaultFengji = window.BM.icon({
            iconUrl: fjIconurl,
            iconSize: [30, 30],
            iconAnchor: [30, 30],
            className: 'stationIcon',
          })
          let fj_icon = [{
            icon: window.BM.icon({
              iconUrl: fengjigreen,
              iconSize: [30, 30],
              iconAnchor: [30, 30],
              className: 'stationIcon',
            })
          }, {
            icon: window.BM.icon({
              iconUrl: fengjiyellow,
              iconSize: [30, 30],
              iconAnchor: [30, 30],
              className: 'stationIcon',
            })
          }]
          /*环境监测仪*/
          for (let item of data.weather) {
            let coordinate = [Number(item.latitude), Number(item.longitude)]
            let marker = window.BM.marker(coordinate, {
              icon: huanjingjianceyi,
              riseOnHover: true
            }).addTo(this.bMap);
            marker.on('mouseover', function (e) {
              // console.log(item)
              marker.bindTooltip('<div>环境监测仪名称：' + item.name + '</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 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"})
            })
          }
          /*逆变器*/

          for (let inverter of data.inverter) {
            for (let item of inverter.data) {
              let coordinate = [Number(item.latitude), Number(item.longitude)]
              let marker = window.BM.marker(coordinate, {
                icon: nibianqi,
                riseOnHover: true
              }).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>',
                  {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
              })
              marker.on('mouseout', function () {
                marker.bindTooltip().closeTooltip();
              })
            }
          }

          let i = 0
          for (let fan of data.fan) {
            if (i > 1) i = 0

            for (let item of fan.data) {
              let coordinate = [Number(item.latitudeFan), Number(item.longitudeFan)]
              let marker = ''
              if (fan.type === 'project') {
                marker = window.BM.marker(coordinate, {
                  icon: redFengji,
                  riseOnHover: true
                }).addTo(this.bMap);
              } else {
                if (item.type !== null) {
                  if (item.type === '新') {
                    marker = window.BM.marker(coordinate, {
                      icon: defaultFengji,
                      riseOnHover: true
                    }).addTo(this.bMap);
                  } else {
                    marker = window.BM.marker(coordinate, {
                      icon: bluefengji,
                      riseOnHover: true
                    }).addTo(this.bMap);
                  }
                } else {
                  // console.log(i)
                  marker = window.BM.marker(coordinate, {
                    icon: fj_icon[i].icon,
                    riseOnHover: true
                  }).addTo(this.bMap);
                }
              }
              marker.on('mouseover', function (e) {
                // console.log(item)
                if (fan.type === 'project') {
                  marker.bindTooltip('<div>项目预设风机点位：</div>' + '<div>所属项目名称：' + fan.name + '</div>' + '<div>经度：' + item.longitudeFan + '</div>' + '<div>纬度：' + item.latitudeFan + '</div>',
                    {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
                } else {
                  marker.bindTooltip('<div>所属场站名称：' + fan.name + '</div>' + '<div>经度：' + item.longitudeFan + '</div>' + '<div>纬度：' + item.latitudeFan + '</div>' + '<div>机型：' + item.fanModel + '</div>',
                    {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
                }

              })
              marker.on('mouseout', function () {
                marker.bindTooltip().closeTooltip();
              })
            }
            i++
          }
          for (let coordinatesList of data.coordinatesList) {
            for (let key in coordinatesList) {
              let coordinates = coordinatesList[key]
              if (coordinates !== null) {
                for (let item of coordinates) {
                  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);
                    }
                    var polygon = BM.polygon(latlngs).addTo(this.bMap);
                    polygon.bindTooltip(key, {permanent: true, className: 'infoToolTip', offset: [0, 0]}).openTooltip();
                    // 让地图适配当前的线段
                    this.bMap.fitBounds(polygon.getBounds());
                  }
                }
              }


            }
          }
          // 项目或者场站id
          let id = this.mapData.id
          for (let item of data.towerList) {
            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) {
              // console.log(item)
              if (item.type === 'project') {
                marker.bindTooltip('<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.towerName + '</div>' + '<div>经度：' + item.longitude + '</div>' + '<div>纬度：' + item.latitude + '</div>',
                  {permanent: true, className: 'infoToolTip', offset: [0, -30]}).openTooltip();
              }

            })
            marker.on('mouseout', function () {
              marker.bindTooltip().closeTooltip();
            })
            // console.log(item.projectId)
            let projectId = item.projectId.find(w => w.id === id)
            // 点击动作
            marker.on('click', function (e) {
              if (projectId !== undefined && projectId !== null) {
                if (projectId.type === 'project') {
                  let project = {projectId: id, 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: id, equipmentNo: item.towerNo}
                  sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
                  _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
                  _self.$router.push({path: "/homepage/realResourcesInfo"})
                }
              } else {
                if (item.projectId[0].type === 'project') {
                  let project = {projectId: item.projectId[0].id, 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.projectId[0].id, equipmentNo: item.towerNo}
                  sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
                  _self.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
                  _self.$router.push({path: "/homepage/realResourcesInfo"})
                }
              }
            })
          }
        }
        /**
         * 加载实时气象源动画效果
         fetch("/js/json/wind_data/20230403_00_atmoslev_1000_mb.json")
         .then((res) => {
            return res.json();
          })
         .then((data) => {
            this.velocityLayer = window.BM.velocityLayer({
              displayValues: true,
              displayOptions: {
                velocityType: "windy",
                displayPosition: "topright",
                displayEmptyString: "没有数据",
                directionString: "风向",
                speedString: "速度",
              },
              data: data,
              minVelocity: 0.05,
              maxVelocity: 10,
              colorScale: ["red", "green", "yellow", "pink"],
              velocityScale: 0.02, //  default 0.005,
            });
            this.velocityLayer.addTo(this.bMmap);
          });
         */
      })
    },
    //设置热力图效果
    setHeatMap(map) {
      axios.get("/img/heapmap/mean-wind-speed_rendering.tiff", {
        responseType: "arraybuffer",
      }).then((res) => {
        const fr = new FileReader();
        fr.onloadend = function (e) {
          var image = new Tiff({buffer: e.target.result});
          var imageUrl = image.toDataURL(),
            imageBounds = [
              [43.422993, 121.183134],
              [53.564656, 135.091461],
            ];
          window.imgOverlay = window.BM.imageOverlay(imageUrl, imageBounds).addTo(map);
          map.fitBounds(imageBounds);
        };
        fr.readAsArrayBuffer(new Blob([res.data]));
      });
    },
    //绑定事件-监听地图级别和拖动
    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()
        _self.$emit('changeZoom', this.getZoom())
        document.getElementById('zoom').innerHTML = '当前级别 : ' + this.getZoom();
      });
    },
    setData(params) {
      fetch(`/js/json/wind_data/20230403_00_atmoslev_` + params + `_mb.json`)
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.velocityLayer.options.displayOptions.velocityType = params + `Mb`;
          this.velocityLayer.setData(data);
        });
    },
    initRegion(code) {
      sessionStorage.clear();
      sessionStorage.setItem('latlngs', JSON.stringify(this.latlngs));
      this.chons(code)
    },
    //加载地图方法
    chons(code) {
      fetch('/js/geojson/230000/' + code + '.geojson')
        .then((res) => {
          return res.json();
        })
        .then((data) => {
          this.cone = this.BM.geoJSON(data, {
            style: function () {
              return {
                color: '#ffffff',
                fillColor: 'transparent',
                weight: 1,
                fillOpacity: 0.9
              };
            },
          }).on('mouseover', function (e) {
            const rel = e.layer.feature.properties;
            e.layer.setStyle({
              color: '#ffffff',
              fillColor: 'transparent',
              weight: 3,
              fillOpacity: 1
            });

            //显示弹窗信息坐标
            let x = rel.center['1'];
            let y = rel.center['0'];
            let coordinate = [[x, y]];

            //组装参数
            let adcode = rel.adcode;
            let name = rel.name;
            let level = rel.level;
            let cont =
              "<div>acode ：" + adcode + "</div>" +
              "<div>name <span style='margin-left: 2px'>：</span>" + name + "</div>" +
              "<div>level <span style='margin-left: 7px'>：</span>" + level + "</div>";
            //显示弹窗
            if (!e.layer.getPopup()) {
              e.layer.bindPopup(cont);
            }
            e.layer.openPopup();
          }).on('mouseout', function (e) {
            e.layer.setStyle({
              color: '#ffffff',
              fillColor: 'transparent',
              weight: 1,
              fillOpacity: 0.9
            });
            // 点击地图区域向下钻取
            // }).on('click', (e) => {
            //   const rel = e.layer.feature.properties;
            //   const zb = e.layer._bounds;
            //   if (code === rel.adcode) {
            //     return false;
            //   } else {
            //     //定时器
            //     clearTimeout(this.mTime);
            //     this.mTime = setTimeout(() => {
            //       //重新加载
            //       this.chons(rel.adcode);
            //       this.cone.remove();
            //       //临时缓存
            //       sessionStorage.setItem('diqu', JSON.stringify(rel.acroutes));
            //       const latadd = sessionStorage.getItem('latlngs');
            //       const lataddp = JSON.parse(latadd);
            //       lataddp.push([[zb._northEast.lat, zb._northEast.lng], [zb._southWest.lat, zb._southWest.lng]]);
            //       sessionStorage.setItem('latlngs', JSON.stringify(lataddp));
            //       if (lataddp.slice(-1).length !== 0) {
            //         this.bMap.fitBounds(lataddp.slice(-1));
            //       }
            //     }, 300);
            //   }
          }).addTo(this.bMap);
        })
    }
  }
}
</script>
<style>
.infoToolTip {
  color: white !important;
  background: rgba(0, 133, 212, 0.75) !important;
  border: .5px solid #0085d4;
}

.my_tooltip {
  color: #0085d4 !important;
  background: transparent !important;
  border: none !important;
  /*font-size: 18px;*/
}

.my_tooltip::before {
  display: none;
}
</style>
<style scoped>
#map {
  width: 100%;
  height: calc(90vh);
}

.bigemap-popup-content-wrapper, .map-legends, .map-tooltip {
  border-radius: 8px;
  box-shadow: 5px 5px 5px rgb(0 0 0);
}
</style>