fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 src/components/PlanMap/Map.vue

@@ -1,69 +1,1505 @@
<template>

<div class="Map">

  <div style="margin-bottom: 20px">

    <el-radio-group v-model="radioSeven" size="medium">

      <el-radio-button label="PM2.5" ></el-radio-button>

      <el-radio-button label="PM10"></el-radio-button>

      <el-radio-button label="SO2"></el-radio-button>

      <el-radio-button label="NO2"></el-radio-button>

      <el-radio-button label="CO"></el-radio-button>

      <el-radio-button label="03"></el-radio-button>

      <el-radio-button label="TVOC"></el-radio-button>

    </el-radio-group>

  <div class="main_body">

    <el-container style="height: 100%">

      <el-container style="position: relative">

        <div class="carTop">

          <el-radio-group

            v-model="radioSeven"

            size="medium"

            @change="changeCode"

          >

            <el-radio-button label="PM2.5"></el-radio-button>

            <el-radio-button label="PM10"></el-radio-button>

            <el-radio-button label="SO2"></el-radio-button>

            <el-radio-button label="NO2"></el-radio-button>

            <el-radio-button label="CO"></el-radio-button>

            <el-radio-button label="03"></el-radio-button>

            <el-radio-button label="TVOC"></el-radio-button>

          </el-radio-group>

          <el-date-picker

            style="float: right; margin-right: 10px"

            @change="dateChange"

            v-model="dateValue"

            type="datetimerange"

            :picker-options="threeOptions"

            range-separator="至"

            start-placeholder="开始日期"

            end-placeholder="结束日期"

          >

          </el-date-picker>

          <el-select

            v-model="carMacItem"

            clearable

            placeholder="请选择无人机"

            style="width: 180px; display: inline-block"

            @change="changeCarData"

          >

            <el-option

              v-for="(item, index) in defaultData"

              :key="index"

              :label="item.name"

              :value="item.mac"

            >

            </el-option>

          </el-select>

        </div>

        <div v-if="noneData" class="noneData">当前时间没有飞行数据</div>

        <div id="map_container" v-loading="loading" />

        <!-- 百度地图 -->

      </el-container>

    </el-container>

  </div>

  <div style="height: 90%;border: 1px solid;">

    <div id="map_container" style="width:100%; height:100%;" />

  </div>

</div>

</template>



<script>

import $ from 'jquery'

import '@/assets/icon/iconfont.css'

import requestObj from '@/utils/request'

var GPS = {

  PI: 3.14159265358979324,

  x_pi: (3.14159265358979324 * 3000.0) / 180.0,

  delta: function (lat, lon) {

    var a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。

    var ee = 0.00669342162296594323 //  ee: 椭球的偏心率。

    var dLat = this.transformLat(lon - 105.0, lat - 35.0)

    var dLon = this.transformLon(lon - 105.0, lat - 35.0)

    var radLat = (lat / 180.0) * this.PI

    var magic = Math.sin(radLat)

    magic = 1 - ee * magic * magic

    var sqrtMagic = Math.sqrt(magic)

    dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * this.PI)

    dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * this.PI)

    return { lat: dLat, lon: dLon }

  },



  // WGS-84 to GCJ-02

  gcj_encrypt: function (wgsLat, wgsLon) {

    if (this.outOfChina(wgsLat, wgsLon)) {

      return { lat: wgsLat, lon: wgsLon }

    }



    var d = this.delta(wgsLat, wgsLon)

    return { lat: wgsLat + d.lat, lon: wgsLon + d.lon }

  },

  // GCJ-02 to WGS-84

  gcj_decrypt: function (gcjLat, gcjLon) {

    if (this.outOfChina(gcjLat, gcjLon)) {

      return { lat: gcjLat, lon: gcjLon }

    }



    var d = this.delta(gcjLat, gcjLon)

    return { lat: gcjLat - d.lat, lon: gcjLon - d.lon }

  },

  // GCJ-02 to WGS-84 exactly

  gcj_decrypt_exact: function (gcjLat, gcjLon) {

    var initDelta = 0.01

    var threshold = 0.000000001

    var dLat = initDelta

    var dLon = initDelta

    var mLat = gcjLat - dLat

    var mLon = gcjLon - dLon

    var pLat = gcjLat + dLat

    var pLon = gcjLon + dLon

    var wgsLat

    var wgsLon

    var i = 0

    while (1) {

      wgsLat = (mLat + pLat) / 2

      wgsLon = (mLon + pLon) / 2

      var tmp = this.gcj_encrypt(wgsLat, wgsLon)

      dLat = tmp.lat - gcjLat

      dLon = tmp.lon - gcjLon

      if (Math.abs(dLat) < threshold && Math.abs(dLon) < threshold) {

        break

      }



      if (dLat > 0) pLat = wgsLat

      else mLat = wgsLat

      if (dLon > 0) pLon = wgsLon

      else mLon = wgsLon



      if (++i > 10000) break

    }

    return { lat: wgsLat, lon: wgsLon }

  },

  // GCJ-02 to BD-09

  bd_encrypt: function (gcjLat, gcjLon) {

    var x = gcjLon

    var y = gcjLat

    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi)

    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi)

    this.bdLon = z * Math.cos(theta) + 0.0065

    this.bdLat = z * Math.sin(theta) + 0.006

    return { lat: this.bdLat, lon: this.bdLon }

  },

  // BD-09 to GCJ-02

  bd_decrypt: function (bdLat, bdLon) {

    var x = bdLon - 0.0065

    var y = bdLat - 0.006

    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi)

    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi)

    var gcjLon = z * Math.cos(theta)

    var gcjLat = z * Math.sin(theta)

    return { lat: gcjLat, lon: gcjLon }

  },

  // WGS-84 to Web mercator

  // mercatorLat -> y mercatorLon -> x

  mercator_encrypt: function (wgsLat, wgsLon) {

    var x = (wgsLon * 20037508.34) / 180.0

    var y =

      Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) /

      (this.PI / 180.0)

    y = (y * 20037508.34) / 180.0

    return { lat: y, lon: x }

  },

  // Web mercator to WGS-84

  // mercatorLat -> y mercatorLon -> x

  mercator_decrypt: function (mercatorLat, mercatorLon) {

    var x = (mercatorLon / 20037508.34) * 180.0

    var y = (mercatorLat / 20037508.34) * 180.0

    y =

      (180 / this.PI) *

      (2 * Math.atan(Math.exp((y * this.PI) / 180.0)) - this.PI / 2)

    return { lat: y, lon: x }

  },

  // two point's distance

  distance: function (latA, lonA, latB, lonB) {

    var earthR = 6371000.0

    var x =

      Math.cos((latA * this.PI) / 180.0) *

      Math.cos((latB * this.PI) / 180.0) *

      Math.cos(((lonA - lonB) * this.PI) / 180)

    var y =

      Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0)

    var s = x + y

    if (s > 1) s = 1

    if (s < -1) s = -1

    var alpha = Math.acos(s)

    var distance = alpha * earthR

    return distance

  },

  outOfChina: function (lat, lon) {

    if (lon < 72.004 || lon > 137.8347) {

      return true

    }

    if (lat < 0.8293 || lat > 55.8271) {

      return true

    }

    return false

  },

  transformLat: function (x, y) {

    var ret =

      -100.0 +

      2.0 * x +

      3.0 * y +

      0.2 * y * y +

      0.1 * x * y +

      0.2 * Math.sqrt(Math.abs(x))

    ret +=

      ((20.0 * Math.sin(6.0 * x * this.PI) +

        20.0 * Math.sin(2.0 * x * this.PI)) *

        2.0) /

      3.0

    ret +=

      ((20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin((y / 3.0) * this.PI)) *

        2.0) /

      3.0

    ret +=

      ((160.0 * Math.sin((y / 12.0) * this.PI) +

        320 * Math.sin((y * this.PI) / 30.0)) *

        2.0) /

      3.0

    return ret

  },

  transformLon: function (x, y) {

    var ret =

      300.0 +

      x +

      2.0 * y +

      0.1 * x * x +

      0.1 * x * y +

      0.1 * Math.sqrt(Math.abs(x))

    ret +=

      ((20.0 * Math.sin(6.0 * x * this.PI) +

        20.0 * Math.sin(2.0 * x * this.PI)) *

        2.0) /

      3.0

    ret +=

      ((20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin((x / 3.0) * this.PI)) *

        2.0) /

      3.0

    ret +=

      ((150.0 * Math.sin((x / 12.0) * this.PI) +

        300.0 * Math.sin((x / 30.0) * this.PI)) *

        2.0) /

      3.0

    return ret

  },

}

export default {

  name: 'Map',

  data() {

    return {

      carMacItem: null,

      radioSeven: 'PM2.5',

      mapCenterlon: 0,

      mapCenterlat: 0,

      planData: [], // 飞行数据

      map: null

      bdLon: null,

      bdLat: null,

      loading: true,

      snesorParams: [

        'PM2.5',

        'PM10',

        'SO2',

        'NO2',

        'CO',

        'O3',

        'TVOC',

        '尘负荷',

      ],

      changeColor: 0,

      changeColor1: 0,

      sensorKey: 'a34004',

      viewKey: '2D',

      dataType: 'history',

      responseJSON: null,

      radio1: null,

      viewOptions: ['平铺', '立体'],

      dateValue: [],

      pickerOptions: {

        disabledDate(time) {

          return time.getTime() > Date.now()

        },

        shortcuts: [

          {

            text: '今天',

            onClick(picker) {

              picker.$emit('pick', new Date())

            },

          },

          {

            text: '昨天',

            onClick(picker) {

              const date = new Date()

              date.setTime(date.getTime() - 3600 * 1000 * 24)

              picker.$emit('pick', date)

            },

          },

          {

            text: '一周前',

            onClick(picker) {

              const date = new Date()

              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)

              picker.$emit('pick', date)

            },

          },

        ],

      },

      timeOne: '',

      threeOptions: {

        onPick: ({ maxDate, minDate }) => {

          // 最大时间 最小时间

          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期

          // 如何你选择了两个日期了，就把那个变量置空

          if (maxDate) this.timeOne = ''

        },

        disabledDate: (time) => {

          if (this.timeOne) {

            const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内

            const minTime = this.timeOne // 三天之前

            const maxTime = this.timeOne + WEEK // 三天之后

            return (

              time.getTime() < minTime ||

              time.getTime() > maxTime ||

              time.getTime() > new Date()

            )

          } else {

            return time.getTime() > new Date()

          }

        },

      },

      sensorDate: null,

      noneData: false,

      defaultData: [],

      carMac: null,

      dialogFormVisible: false,

      sensorTableData: [

        {

          sensorName: 'PM2.5',

          unit: 'ug/m³',

          tab1: '35',

          tab2: '75',

          tab3: '115',

          tab4: '150',

          tab5: '250',

          tab6: '350',

        },

        {

          sensorName: 'PM10',

          unit: 'ug/m³',

          tab1: '50',

          tab2: '150',

          tab3: '250',

          tab4: '350',

          tab5: '420',

          tab6: '500',

        },

        {

          sensorName: 'SO2',

          unit: 'ug/m³',

          tab1: '50',

          tab2: '150',

          tab3: '475',

          tab4: '800',

          tab5: '1600',

          tab6: '2100',

        },

        {

          sensorName: 'NO2',

          unit: 'ug/m³',

          tab1: '40',

          tab2: '80',

          tab3: '180',

          tab4: '280',

          tab5: '565',

          tab6: '750',

        },

        {

          sensorName: 'CO',

          unit: 'mg/m³',

          tab1: '2',

          tab2: '4',

          tab3: '14',

          tab4: '24',

          tab5: '36',

          tab6: '48',

        },

        {

          sensorName: 'O3',

          unit: 'ug/m³',

          tab1: '160',

          tab2: '200',

          tab3: '300',

          tab4: '400',

          tab5: '800',

          tab6: '1000',

        },

        {

          sensorName: 'TVOC',

          unit: 'mg/m³',

          tab1: '0.1',

          tab2: '0.3',

          tab3: '0.5',

          tab4: '0.7',

          tab5: '0.9',

          tab6: '1',

        },

        {

          sensorName: '尘负荷',

          unit: 'ug/m³',

          tab1: '300',

          tab2: '500',

          tab3: '1000',

          tab4: '10000',

          tab5: '20000',

          tab6: '50000',

        },

      ],

      carWs: null,

      map: null,

      sensor: null,

      viewType: null,

      size: null,

      distance: null,

      showPoints: null,

      viewport: null,

      mapZoom: null,

      centerPoint: null,

      view: null,

      abc: 0,

      firstPlayFlag: true,

      firstWsFlag: true,

      msgTemp: [],

      dataTypeList: [

        {

          value: 'history',

          label: '历史数据',

        },

        {

          value: 'webSocket',

          label: '实时数据',

        },

      ],

      dataTypeValue: 'history',

      historyView: true,

      webSocketView: false,

      isDataList: [],

      shapeLayer: null,

      carData: [],

      timeDuan: 0,

      isDisTime: false,

      startTime: '',

      endTime: '',

      dataDate: '',

      sensorTime: [],

      timeValue: [

        new Date(2020, 1, 1, 0, 0, 0),

        new Date(2022, 12, 31, 23, 59, 59),

      ],

    }

  },

  watch: {

    dataTypeValue(n, o) {

      if (this.dataTypeValue === 'webSocket') {

        this.dateValue = []

        this.historyView = false

        this.webSocketView = true

      } else {

        this.dateValue = []

        this.historyView = true

        this.webSocketView = false

      }

    },

    dateValue(n, o) {

      if (n === null) {

        this.dateValue = []

      }

    },

    viewKey(n, o) {

      // console.log(n)

    },

    deep: true,

    immediate: true,

  },

  mounted() {

    this.getData() // 无人机轨迹数据

    this.getStart()

  },

  beforeDestroy() {},

  created() {

    this.newTime(this.timeValue)

    this.newDate()

    this.getCarData()

    // this.$watch('carMac', () => {

    // })

  },

  methods: {

    // 走航车轨迹数据

    async getData() {

      this.$request({

        url: '/cruiser/cruiserTrajectory',

        method: 'get',

        params: {

          mac: 'p5dnd7a0243622',

          time1: '2022-11-01 00:00:00',

          time2: '2022-11-02 00:00:00'

        }

      }).then(res => {

        // console.log(res)

        this.planData = res.data

        this.mapCenterlon = res.data[0].flylon

        this.mapCenterlat = res.data[0].flylat

        // console.log(this.mapCenterlon, this.mapCenterlat)

        this.map = new window.BMapGL.Map('map_container')

        this.map.centerAndZoom(new BMapGL.Point(this.mapCenterlon, this.mapCenterlat), 19) // 初始化地图，设置中心点坐标和地图级别

        this.map.enableScrollWheelZoom() // 开启鼠标滚轮缩放

        // 地球模式

        this.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式

        this.map.setTilt(0) // 设置地图的倾斜角度

    // 时间处理函数

    newTime2(timeArr) {

      var arr = []

      timeArr.map((v) => {

        var date = new Date(v)

        var y = date.getFullYear()

        var m = date.getMonth() + 1

        m = m < 10 ? '0' + m : m

        var d = date.getDate()

        d = d < 10 ? '0' + d : d

        var h = date.getHours()

        h = h < 10 ? '0' + h : h

        var minute = date.getMinutes()

        minute = minute < 10 ? '0' + minute : minute

        var s = date.getSeconds()

        s = s < 10 ? '0' + s : s

        arr.push(y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s)

      })

      return arr

    },

    // 点击列表切换走航车数据

    changeCarData(e) {

      this.carMac = e

      this.getStart()

    },

    // 请求走航车列表数据

    getCarData() {

      this.$request({

        url: '/cruiser/selectCruisers',

        method: 'get',

      })

        .then((res) => {

          this.defaultData = res.data

          this.carMac = res.data[0].mac

        })

        .catch((err) => {

          console.log(err)

        })

    },

    // 进行经纬度转换为距离的计算

    Rad(d) {

      return (d * Math.PI) / 180.0 // 经纬度转换成三角函数中度分表形式。

    },

    // 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度

    GetDistance(lat1, lng1, lat2, lng2) {

      var radLat1 = this.Rad(lat1)

      var radLat2 = this.Rad(lat2)

      var a = radLat1 - radLat2

      var b = this.Rad(lng1) - this.Rad(lng2)

      var s =

        2 *

        Math.asin(

          Math.sqrt(

            Math.pow(Math.sin(a / 2), 2) +

              Math.cos(radLat1) *

                Math.cos(radLat2) *

                Math.pow(Math.sin(b / 2), 2)

          )

        )

      s = s * 6378.137 // EARTH_RADIUS;

      s = Math.round(s * 10000) / 10000 // 输出为公里

      // s=s.toFixed(4);

      return s

    },

    // 日期格式化

    newDate() {

      var aData = new Date()

      var month =

        aData.getMonth() < 9

          ? '0' + (aData.getMonth() + 1)

          : aData.getMonth() + 1

      var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      this.sensorDate = aData.getFullYear() + '-' + month + '-' + date

    },

    // 时间格式化

    newTime(timeArr) {

      let str = ''

      let str2 = ''

      this.sensorTime = []

      timeArr.map((v) => {

        v = JSON.stringify(v)

        str2 = v.substr(12, 8).split(':')

        str2[0] =

          (str2[0] - 0 + 8) % 24 < 9

            ? '0' + ((str2[0] - 0 + 8) % 24)

            : (str2[0] - 0 + 8) % 24

        str = str2.join(':')

        this.sensorTime.push(str)

      })

    },

    // 修改时间

    dateChange(e) {

      if (e === null) {

        this.sensorDate = []

      } else {

        this.sensorDate = this.newTime2(e)

        if (this.view) {

          this.view.removeAllLayers()

          this.map.clearOverlays()

          // console.log('清除图层')

        }

        this.dataType = 'history'

        // this.map = null

        this.getStart()

      }

    },

    // 走航车轨迹数据

    getStart() {

      this.noneData = false

      if (this.ws) {

        this.ws.close()

      }

      if (this.view) {

        this.view.removeAllLayers()

        this.map.clearOverlays()

      }

      this.$request({

        // url: '/cruiser/cruiserTrajectory',

        url: '/uav/queryDataByBatch',

        method: 'get',

        // params: {

        //   mac: this.carMac,

        //   time1: this.sensorDate[0],

        //   time2: this.sensorDate[1],

        // },

        params: {

          batch: '2023-05-15 14:39:05',

        },

      }).then((res) => {

        if (!res.data.vos.length) {

          this.noneData = true

          this.loading = false

        }

        if (res.data.vos.length) {

          console.log(12)

          // this.carData = res

          // console.log(JSON.parse(this.carData), 'JSON.parse(this.carData)')

          // this.initStart(JSON.parse(this.carData))

          for (var i = 0; i < res.data.vos.length; i++) {

            console.log(res.data.vos[i].value)

            this.carData.push(JSON.parse(res.data.vos[i].value))

          }

          this.initStart(this.carData)

        }

      })

    },

    // 执行数据生成逻辑

    initStart(res) {

      console.log(res, 'res')

      this.abc += 1

      const that = this

      if (!res) {

        return

      }

      if (this.dataType === 'history') {

        this.responseJSON = res

      } else {

        this.responseJSON = res

      }

      // var sensorInfo = this.responseJSON

      // console.log('这是snesor获取得值')

      // console.log(this.responseJSON)

      var trackPoints = []

      this.loading = false

      if (this.responseJSON.length > 0) {

        this.noneData = false

        $.each(this.responseJSON, (item, value) => {

          if (typeof value.flylon === 'undefined') {

            showNoPoints()

          } else {

            var lng = parseFloat(

              value.flylon.substr(0, value.flylon.length - 1)

            )

            var lat = parseFloat(

              value.flylat.substr(0, value.flylat.length - 1)

            )

            if (lng < 70 || lng > 150 || lat > 60 || lat < 20) {

              return true

            }

            lng = GPS.gcj_encrypt(lat, lng).lon

            lat = GPS.gcj_encrypt(lat, lng).lat

            lng = GPS.bd_encrypt(lat, lng).lon

            lat = GPS.bd_encrypt(lat, lng).lat

            var point = new BMapGL.Point(lng, lat)

            point.a34004 = parseInt(value.a34004)

            point.a34002 = parseInt(value.a34002)

            point.a21026 = parseInt(value.a21026)

            point.a21004 = parseInt(value.a21004)

            point.a21005 = parseFloat(value.a21005).toFixed(3)

            point.a05024 = parseInt(value.a05024)

            point.a99054 = parseFloat(value.a99054).toFixed(3)

            if (

              value.dustld - 0 !== 0 &&

              value.dustld - 0 < 100 &&

              (that.carMac === 'p5dnd7a0243622' ||

                that.carMac === 'p5dnd7a0243625')

            ) {

              point.dustld = 100

            } else {

              point.dustld = value.dustld - 0

            }

            // point.dustld = value.dustld - 0

            trackPoints.push(point)

          }

        })

        that.sensor = this.sensorKey

        that.viewType = this.viewKey

        that.size = 5

        that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4)

        // 已有地图，避免再次请求

        if (!that.showPoints) {

          that.map = new BMapGL.Map('map_container')

        }

        that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮，地图可以进行放大、缩小

        that.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式

        that.map.setDisplayOptions({

          street: false, // 是否显示路网（只对卫星图和地球模式有效）

        })

        that.map.setHeading(20) // 设置旋转角度

        if (that.viewKey === '2D') {

          that.map.setTilt(0) // 地图倾斜

        } else {

          that.map.setTilt(52)

        }

        // that.map.setDisplayOptions({

        //   // 设置天空颜色

        //   skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)'], // 天空颜色

        //   building: false, // 不显示建筑物

        //   poiText: true, // 显示poi文字

        // })

        // that.map.addControl(new BMapGL.NavigationControl3D()) // 添加3d控件

        if (this.responseJSON.length === 0) {

          showNoPoints()

        }

        that.showPoints = getShowPoints(that.size)

        that.viewport = that.map.getViewport(eval(that.showPoints)) // 此方法仅返回视野信息(中心点坐标，缩放）,不会将新的中心点和级别做用到当前地图上

        that.mapZoom = that.viewport.zoom

        that.centerPoint = that.viewport.center

        if (that.firstPlayFlag) {

          that.map.centerAndZoom(that.centerPoint, that.mapZoom)

          that.view = new mapvgl.View({

            map: that.map,

          })

          that.firstPlayFlag = false

        } else {

          this.view.removeAllLayers()

          this.map.clearOverlays()

          // that.map.centerAndZoom(that.centerPoint, 18)

        }

      }

      drawPolygon(that.sensor) // 绘制多边形。

      // draw(that.sensor, that.viewType, that.carMac)

      // drawLine()// 轨迹(绘制带折线箭头)

      // drawStartAndEnd() // 起点和终点标注

      function draw(sensor, type, carMac) {

        var levels = getGrading(sensor, type, carMac)

        $.each(levels, function (index, value) {

          var color = value.color

          var data = value.data

          if (data.length > 0) {

            // 创建MapVGL图层管理器,需要使用插件mapvgl

            that.shapeLayer = new mapvgl.ShapeLayer({

              color: color, // 柱状图颜色

              enablePicked: true, // 是否可以拾取

              selectedIndex: -1, // 选中项

              selectedColor: '#ee1111', // 选中项颜色

              autoSelect: true, // 根据鼠标位置来自动设置选中项

              riseTime: 1800, // 楼块初始化升起时间

            })

            that.shapeLayer.setData(data)

            that.view.addLayer(that.shapeLayer)

          }

        })

        that.map.setDefaultCursor('default')

        if (type === '2D') {

          $.each(that.showPoints, function (item, point) {

            setLabelStyle(point[sensor], point)

          })

        }

      }



      // 画方块，上色，添加文字

      function drawPolygon(sensor) {

        $.each(that.showPoints, function (item, point) {

          var sw = getPoint(225, point.lng, point.lat, that.distance)

          var ne = getPoint(45, point.lng, point.lat, that.distance)

          var data = point[sensor]

          // 根据因子浓度变换方块颜色

          var color = getColorAndLevel(sensor, data).color

          var polygon = new BMapGL.Polygon(

            [

              new BMapGL.Point(sw.lng, sw.lat), // 左下角

              new BMapGL.Point(ne.lng, sw.lat), // 左上角

              new BMapGL.Point(ne.lng, ne.lat), // 右上角

              new BMapGL.Point(sw.lng, ne.lat), // 右下角

            ],

            {

              strokeWeight: 0.5,

              strokeOpacity: 0.0,

              fillColor: color,

              fillOpacity: 1,

            }

          )

          that.map.addOverlay(polygon)

          // 方块内添加label文本

          setLabelStyle(data, point)

        })

      }



      // 起点和终点标注

      function drawStartAndEnd() {

        var startIcon = new BMapGL.Icon(

          require('@/assets/images/start.png'),

          new BMapGL.Size(48, 48)

        )

        var startMark = new BMapGL.Marker(that.showPoints[0], {

          icon: startIcon,

          offset: new BMapGL.Size(0, -20),

        })

        that.map.addOverlay(startMark)

        var endIcon = new BMapGL.Icon(

          require('@/assets/images/end.png'),

          new BMapGL.Size(48, 48)

        )

        var endMark = new BMapGL.Marker(

          that.showPoints[that.showPoints.length - 1],

          {

            icon: endIcon,

            offset: new BMapGL.Size(0, -20),

          }

        )

        that.map.addOverlay(endMark)

      }



      // 绘制带箭头折线

      function drawLine() {

        var data = []

        var points = []

        $.each(trackPoints, function (index, value) {

          var point = []

          point.push(value['lng'], value['lat'])

          points.push(point)

        })

        data.push({

          geometry: {

            type: '"LineString"',

            coordinates: [points],

          },

        })

        var lineLayer = new mapvgl.LineLayer({

          color: 'red',

          width: 3,

          animation: true,

          duration: 10, // 循环时间2s

          trailLength: 0.1, // 拖尾长度占间隔的0.4

          interval: 0.3, // 粒子长度占线整体长度的0.2

        })

        that.view.addLayer(lineLayer)

        lineLayer.setData(data)

      }



      // 格子间隔>=size的放进points

      function getShowPoints(size) {

        var points = []

        points.push(trackPoints[0])

        for (var i = 1; i < trackPoints.length; i++) {

          var flag = true

          var point1 = trackPoints[i]

          for (var j = 0; j < points.length; j++) {

            var point2 = points[j]

            var dis = that.map.getDistance(point1, point2) // 返回两点之间的直线距离，单位是米

            if (dis < size) {

              flag = false

            }

          }

          if (flag) {

            points.push(point1)

            console.log(points, 'points')

          }

        }

        return points

      }



      // 根据中心，角度，距离，找点

      function getPoint(angle, lng, lat, distance) {

        var EARTH_RADIUS = 6378137 // 地球的半径，m

        // 将距离转换成经度的计算公式

        var ra = distance / EARTH_RADIUS

        // 转换为radian，否则结果会不正确

        angle = (angle / 180) * Math.PI

        lng = (lng / 180) * Math.PI

        lat = (lat / 180) * Math.PI

        lng =

          lng +

          Math.atan2(

            Math.sin(angle) * Math.sin(ra) * Math.cos(lat),

            Math.cos(ra) - Math.sin(lat) * Math.sin(lat)

          ) // Math.atan2()方法计算二维坐标系中任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小

        lat = Math.asin(

          Math.sin(lat) * Math.cos(ra) +

            Math.cos(lat) * Math.sin(ra) * Math.cos(angle)

        )

        // 转为正常的10进制经纬度

        lng = (lng * 180) / Math.PI

        lat = (lat * 180) / Math.PI

        // console.log(lng, lat)

        return new BMapGL.Point(lng, lat)

      }



      function getGrading(sensor, type, carMac) {

        var levels = []

        var level0 = {}

        var level1 = {}

        var level2 = {}

        var level3 = {}

        var level4 = {}

        var level5 = {}

        var level6 = {}



        var data0 = []

        var data1 = []

        var data2 = []

        var data3 = []

        var data4 = []

        var data5 = []

        var data6 = []



        level0.color = '#38D9D3'

        level1.color = '#00e400'

        level2.color = '#ffff00'

        level3.color = '#ff7e00'

        level4.color = '#ff0000'

        level5.color = '#99004c'

        level6.color = '#7e0023'



        $.each(that.showPoints, function (index, value) {

          var sw = getPoint(225, value.lng, value.lat, that.distance)

          var ne = getPoint(45, value.lng, value.lat, that.distance)

          var polygon = []

          var point1 = []

          var point2 = []

          var point3 = []

          var point4 = []

          point1.push(sw.lng, sw.lat)

          point2.push(ne.lng, sw.lat)

          point3.push(ne.lng, ne.lat)

          point4.push(sw.lng, ne.lat)

          polygon.push(point1)

          polygon.push(point2)

          polygon.push(point3)

          polygon.push(point4)

          var valueElement = value[sensor]

          var colorAndLevel = getColorAndLevel(sensor, value[sensor])

          var level = colorAndLevel['level']

          var height

          if (type === '2D') {

            height = 0

          } else {

            height = value[sensor]

            // if (sensor === 'a99054') {

            //   height = value[sensor] * 500

            // }

            // console.log(carMac, 'carMac')

            // if (sensor === 'dustld' && (value[sensor] - 0) < 100 && (value[sensor] - 0) !== 0 && carMac === 'p5dnd7a0243622') {

            //   height = 100 * 10

            // }

          }

          switch (level) {

            case 0:

              data0.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 1:

              data1.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 2:

              data2.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 3:

              data3.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 4:

              data4.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 5:

              data5.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

            case 6:

              data6.push({

                geometry: {

                  type: 'Polygon',

                  coordinates: [polygon],

                },

                properties: {

                  height: height,

                },

              })

              break

          }

        })

        level0.data = data0

        level1.data = data1

        level2.data = data2

        level3.data = data3

        level4.data = data4

        level5.data = data5

        level6.data = data6

        levels.push(level0, level1, level2, level3, level4, level5, level6)

        return levels

      }

      function getColorAndLevel(senosor, data) {

        var levelData = that.sensorTableData

        var colorAndLevel = {}

        var color

        var level

        switch (that.sensor) {

          case 'a34004':

            if (data < levelData[0].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[0].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[0].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[0].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[0].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a34002':

            if (data < levelData[1].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[1].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[1].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[1].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[1].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21026':

            if (data < levelData[2].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[2].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[2].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[2].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[2].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21004':

            if (data < levelData[3].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[3].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[3].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[3].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[3].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a21005':

            if (data < levelData[4].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[4].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[4].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[4].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[4].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a05024':

            if (data < levelData[5].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[5].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[5].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[5].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[5].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'a99054':

            if (data < levelData[6].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[6].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[6].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[6].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[6].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

          case 'dustld':

            if (data < levelData[7].tab1) {

              color = '#00e400'

              level = 1

            } else if (data < levelData[7].tab2) {

              color = '#ffff00'

              level = 2

            } else if (data < levelData[7].tab3) {

              color = '#ff7e00'

              level = 3

            } else if (data < levelData[7].tab4) {

              color = '#ff0000'

              level = 4

            } else if (data < levelData[7].tab5) {

              color = '#99004c'

              level = 5

            } else {

              color = '#7e0023'

              level = 6

            }

            break

        }

        colorAndLevel['color'] = color

        colorAndLevel['level'] = level

        return colorAndLevel

      }



      // point上添加label文本

      function setLabelStyle(content, point) {

        var label = new BMapGL.Label(

          "<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容

          {

            offset: new BMapGL.Size(-8, -10), // label的偏移量，为了让label的中心显示在点上

            position: point,

          } // label的位置

        )

        var offsetSize = new BMapGL.Size(0, 0)

        var size = '10px'

        if (that.map.getZoom() <= 15.5) {

          size = '0px'

        }

        var labelStyle = {

          border: '0',

          fontSize: size,

          height: '20px',

          lineHeight: '20px',

          fontFamily: '微软雅黑',

          backgroundColor: '0.05',

          fontWeight: 'bold',

        }

        label.setStyle(labelStyle)

        that.map.addOverlay(label)

      }



      // 无数据时,缩放至该中心

      function showNoPoints() {

        that.map.centerAndZoom('苏州市', 17)

        setTimeout(function () {

          document.getElementById('cpm').style.display = 'block'

          document.getElementById('data').style.display = 'none'

        }, 250)

      }



      // 地图缩放级别监控

      that.map.addEventListener('zoomend', function () {

        // 这里根据缩放显示和隐藏文本

        var zoom = that.map.getZoom()

        $('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']()

        $('span.my-maptip')

          .parent()

          .css('font-size', 30 - zoom)

      })



      // var that = this

      function clickChange() {

        $('.carTop').on('click', () => {

          // console.log('点击了')

          that.view.removeAllLayers()

          that.map.clearOverlays()

          that.sensor = that.sensorKey

          that.viewType = that.viewKey

          // draw(that.sensor, that.viewType)

          drawPolygon(that.sensor)

          if (that.viewType === '2D') {

            that.map.setTilt(0)

            // drawLine()

            // drawStartAndEnd()

            $('.sensorLevel').attr('src', '/img/pollutionlevel.png')

          } else if (that.viewType === '3D') {

            that.map.setTilt(52)

            if (that.sensor === 'a34004') {

              $('.sensorLevel').attr('src', '/img/pm25.png')

            } else if (that.sensor === 'a34002') {

              $('.sensorLevel').attr('src', '/img/pm10.png')

            } else if (that.sensor === 'a99054') {

              $('.sensorLevel').attr('src', '/img/tvoc.png')

            }

          }

        })

      }

      if (that.firstPlayFlag) {

        clickChange()

      }

    },

    changeCode(value) {

      switch (value) {

        case 'PM2.5':

          this.sensorKey = 'a34004'

          break

        case 'PM10':

          this.sensorKey = 'a34002'

          break

        case 'SO2':

          this.sensorKey = 'a21026'

          break

        case 'NO2':

          this.sensorKey = 'a21004'

          break

        case 'CO':

          this.sensorKey = 'a21005'

          break

        case '03':

          this.sensorKey = 'a05024'

          break

        case 'TVOC':

          this.sensorKey = 'a99054'

          break

        case 'dustld':

          this.sensorKey = 'dustld'

          break

      }

      this.initStart(this.carData)

    },

    changeCode1(index) {

      this.changeColor1 = index

      if (index === 0) {

        this.viewKey = '2D'

      } else {

        this.viewKey = '3D'

      }

      this.getStart()

    },

  },

}

</script>

<style lang="less" scoped>

body,

html,

#map_container {

  width: 100%;

  height: 100%;

  overflow: hidden;

  margin: 0;

  z-index: 0;

  font-size: 14px;

  font-family: '微软雅黑';

}



.main_body {

  border: 0;

  margin: 0;

  width: 100%;

  height: 100%;

  position: relative;

}



#cpm {

  width: 300px;

  height: 100px;

  position: absolute;

  background-color: #ffffff;

  display: none;

  left: 50%;

  top: 50%;

  margin-left: -150px;

  margin-top: -50px;

  z-index: 11;

  color: #000000;

  border: 2px solid #ff7f50;

  font-size: 28px;

  line-height: 100px;

  text-align: center;

}



.BMap_pop > img {

  top: 42px !important;

  margin-left: -10px;

}



.BMap_pop div:nth-child(1) div {

  display: none;

}



.BMap_pop div:nth-child(3) {

  display: none;

}



.BMap_pop div:nth-child(5) {

  display: none;

}



.BMap_pop div:nth-child(7) {

  display: none;

}



.BMap_pop div:nth-child(9) {

  top: 35px !important;

  border-radius: 5px;

}



#selectSenor {

  position: absolute;

  z-index: 1;

  left: 30px;

  top: 20px;

  font-size: 20px;

  background: lightgrey;

}



#type {

  position: absolute;

  z-index: 1;

  left: 30px;

  top: 50px;

  font-size: 20px;

  background: lightgrey;

}



button {

  font-size: 15px;

}



.sensorLevel {

  position: absolute;

  z-index: 1;

  bottom: 50px;

  left: 10px;

  width: 100px;

  height: 200px;

}

.carTop {

  position: absolute;

  top: 0;

  width: 100%;

  padding: 5px 10px;

  z-index: 999;

  background: rgba(204, 204, 204, 0.5);

  box-shadow: 1px 1px 5px #666;

}

.carTop > .left,

.right {

  padding: 5px 10px;

  border: 1px solid #aaa;

  border-right: none;

  background: #fff;

  cursor: pointer;

  font-size: 16px;

  float: left;

  margin-top: 4px;

  -webkit-transform-origin-x: 0;

}

.carTop .left:nth-child(1),

.carTop .right:nth-child(1) {

  border-radius: 5px 0 0 5px;

}

.carTop .left:nth-last-child(2),

.carTop .right:nth-child(2) {

  border-radius: 0 5px 5px 0;

  border-right: 1px solid #aaa;

}



.carTop {

  & > .left:nth-child(1) {

    border-radius: 5px 0 0 5px;

  }

}

.carTop {

  .left {

    &:nth-last-child(2) {

      margin-left: -12px !important;

    }

  }

}

</script>



<style scoped>

.Map{

  width: 100%;

  height: 100%;

.carTop > .left:hover,

.right:hover {

  background: rgb(64, 158, 255);

  color: #fff;

}

.carTop > .right {

  float: right;

}

.click {

  color: #fff;

  background-color: rgb(64, 158, 255) !important;

}

.noneData {

  position: absolute;

  color: #000;

  background: #fff;

  z-index: 999;

  left: 50%;

  top: 50%;

  transform: translate(-50%);

  padding: 20px 50px;

  font-size: 28px;

  border: 2px solid #ff7f50;

}

.main_body .el-date-editor .el-range-input {

  width: 30%;

}

.main_body /deep/ .el-date-editor .el-range-separator {

  width: 15%;

}

</style>