antv/l7+高德地图+天气弹窗

L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
1、引入map

import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
import { Scene, Marker, MarkerLayer, Popup } from '@antv/l7'

2、实例化
使用地图申请地图 token
为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图

 mounted() {
    this.scene = new Scene({
      id: 'map',
      map: new GaodeMap({
        style: 'amap://styles/blue', // 样式URL
        features: ['bg', 'point', 'road'],
        center: [120.82128631427464, 31.48514809570474],
        pitch: 0,
        zoom: 10,
        token: '自己申请的token',
      }),
    })

3、准备容器

<template>
    <div style="position: relative;height: 580px;">
      <div id="map"> </div>
      </div>
</template>

4、data中准备数据

 data() {
    return {
      scene: null,
      markerLayer: new MarkerLayer(),
      data: [
        {
          stationname: '抬头名称',
          highway: 'xx高速',
          company: 'xxx有限公司',
          longitude: '经度',
          latitude: '纬度',
          roadname: 'xx高速',
          roadnum: 'G2',
          roadkm: '1184',
          evninfo: {
            tmwspeed: '0.1',
            rainfall: '0',
            dmwdir: '219',
            visibility: '7864',
            tmwdir: '209',
            wtime: '1',
            pwdir: '242',
            pavetcmtemp: '17.3',
            dmwspeed: '0.2',
            pwspeed: '2.1',
            pavetemp: '25.0',
            temperature: '19.8',
            humidity: '34.0',
          },
        },      
      ],
    }
  },

5、方法中定义

    initMarkerLayer() {
      this.data.forEach((value) => {
        var icon = document.createElement('img')
        icon.src = require('@/assets/.png')
        icon.setAttribute('width', '26px')
        icon.setAttribute('height', '26px')
        const marker = new Marker({
          element: icon,
        }).setLnglat({ lng: value.longitude, lat: value.latitude })
    

        const popHtml =
          "<div class='pop-title'>" +
          "<img style='vertical-align: baseline;margin-right: 10px;' src='" +
          require('@/assets/icons/weather/ic_clound.png') +
          "' alt/>" +
          value.stationname +
          '</div>' +
          "<div class='pop-content'>" +
          "<div class='left-wind'>" +
          '<p>' +
          value.stationname +
          ' 气象监测点 ' +
          value.evninfo.wtime +
          ' 分钟前</p>' +
          "<p class='wind-direction'><img style='transform: rotate(" +
          parseInt(value.evninfo.tmwdir) +
          "deg)' class='wind-pointer' src='" +
          require('@/assets/icons/weather/icon_wind_direction.png') +
          "'/></p>" +
          "<p style='color:#88888C;'>" +
          this.formatWindDirection(value.evninfo.tmwdir || 0) +
          '风' +
          this.formatWindSpeed(value.evninfo.tmwspeed) +
          '级' +
          value.evninfo.tmwspeed +
          'M/S</p>' +
          "<p style='color:#88888C;'>阵风" +
          this.formatWindSpeed(value.evninfo.pwspeed) +
          '级' +
          value.evninfo.pwspeed +
          'M/S</p>' +
          '</div>' +
          "<div class='right-rain'>" +
          "<p>能见度<span style='font-size: 20px;'>" +
          value.evninfo.visibility +
          'M</span></p>' +
          "<p><img src='" +
          require('@/assets/icons/weather/ic_rain.png') +
          "'/></p>" +
          "<p style='color:#88888C;'>总量：" +
          value.evninfo.rainfall +
          'mm</p>' +
          '</div>' +
          "<div class='bottom-rain'>" +
          "<p><span><img src='" +
          require('@/assets/icons/weather/ic_raindrops.png') +
          "'/>" +
          value.evninfo.humidity +
          "%</span><span style='float: right;font-size: 20px;'>" +
          value.evninfo.temperature +
          '℃</span></p>' +
          "<p><span>路面</span><span style='float: right;'>" +
          value.evninfo.pavetemp +
          '℃</span></p>' +
          "<p><span>路基</span><span style='float: right;'>" +
          value.evninfo.pavetcmtemp +
          '℃</span></p>' +
          '</div>' +
          '</div>'
        const popup = new Popup({
          offsets: [0, 30],
        }).setHTML(popHtml)
        marker.setPopup(popup)
        this.markerLayer.addMarker(marker)
      })
      this.scene.addMarkerLayer(this.markerLayer)
      this.scene.render()
    },

6、mounted中

 mounted() {
    this.$nextTick(() => {
      this.initMarkerLayer()
    })
  },

7、style

/deep/.extra {
  display: none;
}

#map {
  height: 100%;
  position: relative;

  .btn {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 13px;
    cursor: pointer;
    z-index: 10;
  }
}

/deep/.l7-bottom.l7-left {
  display: none;
}

/deep/ .l7-popup {
  max-width: 385px !important;
  width: 385px;

  .l7-popup-tip {
    border-top-color: rgba(32, 32, 44, 1);
  }

  .l7-popup-content {
    background: rgba(32, 32, 44, 1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
    padding: 0;
    color: white;

    .l7-popup-close-button {
      top: 12px;
      right: 12px;
    }

    .pop-title {
      background: #4abfd7;
      padding: 12px;
      font-size: 16px;
    }

    .pop-content {
      background: #36373f;
      font-size: 14px;
      padding: 15px;

      .left-wind {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        width: 65%;

        .wind-direction {
          width: 74px !important;
          height: 71px !important;
          margin: 0 auto;
          position: relative;
          background: url('.png') no-repeat;
        }

        .wind-pointer {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -2px;
          margin-top: -22px;
          transform-origin: bottom;
        }
      }

      .right-rain {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        width: 35%;
      }

      .bottom-rain {
        p {
          margin: 0;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;

          img {
            vertical-align: baseline;
          }

          &:first-child {
            height: 32px;
            border: 1px solid rgba(0, 0, 0, 1);
            color: #4abfd7;
          }

          &:nth-child(2) {
            background: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
}