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

<template>
  <div>
    <div id='map'></div>
    <div id="position">
      <div id="zoom">
        当前级别 : 6
      </div>
      <div id="move">
        当前中心点: 纬度:0.00000,经度:0.00000
      </div>
    </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.244/webgis-api';
        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';
        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', 'bigemap.arcgis-satellite', {
        let map = window.BM.map('map', null, {
          center: [30, 104],
          minZoom: 6,
          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;
        this.bMap=map;
        //首尾需要一致
        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
              };
            },
            onEachFeature: function (feature, layer) {
              feature.properties && feature.properties.name && layer.bindTooltip(feature.properties.name, {
                direction: 'bottom',
                className: 'my_default_tooltip',
                permanent: true
              });
            }
          }).on('mouseover', function (e) {
            e.layer.setStyle({
              color: '#ffffff',
              weight: 1,
              fillColor: 'transparent',
              fillOpacity: 0
            });
          }).on('mouseout', function (e) {
            e.layer.setStyle({
              color: '#ffffff',
              weight: 3,
              fillColor: '#ffffff',
              fillOpacity: 0
            });
          }).addTo(this.bMap);
          window.geo2=geo2;
          //限制拖动
          this.bMap.setMaxBounds(geo2.getBounds());
          this.bMap.fitBounds(geo2.getBounds());

          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);
          if(this.mapData.level !== null){
            _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 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){
          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: [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,{
              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();
            })
            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,{
              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();
            })
            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]
          })
          for (let item of data) {
            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.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',
          })
          for (let item of data) {
            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();
            })
            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"})
            })
          }
        }
        // 所有风机、塔、拐点标记点位
        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 fj_icon = window.BM.icon({
            iconUrl: fjIconurl,
            iconSize: [30, 30],
            iconAnchor: [30, 30],
            className:'stationIcon',
          })
          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){
              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);
              // 让地图适配当前的线段
              this.bMap.fitBounds(polygon.getBounds());
            }
          }
          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.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();
              }

            })
            marker.on('mouseout', function () {
              marker.bindTooltip().closeTooltip();
            })
            // 点击动作
            marker.on('click', function (e) {
              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}
                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()
        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: 1
              };
            },
          }).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: 1
            });
            // 点击地图区域向下钻取
            // }).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;
  background: rgba(0, 133, 212, 0.75);
  border: .5px solid #0085d4;
}

.my_default_tooltip{
  color: transparent;
  background: transparent;
  border: none;
  /*font-size: 18px;*/
}
.my_default_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>