【vue-baidu-map + mapv】结合实现动态水流动画

目录

实现技术

引用

---

此方案对于电脑要求有点高，GPU直接就占满了，没想到好的解决方案 ，但功能实现了

实现技术

•  mapv
• vue-baidu-map
• 百度地图
• 引用固定弹框封装插件

引用

index.html

<script src="https://api.map.baidu.com/api?v=3.0&ak=***"></script>
<script src="https://unpkg.com/vue-baidu-map"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>

 main.js

Vue.use(VueBaiduMap.default, {
  ak: '***'
})

MyOverlay.vue

<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw">
    <div><div class="text">{{text}}</div><img v-if="img1!=''" :src="img1" height="13vh" width="13vh" alt="图像" />
    <img v-if="img2!=''" :src="img2" height="13vh" width="13vh" alt="图像" /></div> 
  </bm-overlay>
</template>

<script>
export default { 
  props: ['text','img1','img2', 'position', 'active'],
  watch: {
    position: { 
      handler () { 
        this.$refs.customOverlay.reload() 
      },
      deep: true 
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x +20 + 'px'
      el.style.top = pixel.y - 30 + 'px'
    }
  }
}
</script>

<style>
.text{
  padding: 2px;
  /* text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; */
}
.sample {
  width: 80px;
  /* height: 30px; */
  background: rgba(255,255,255,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #fff;
  color: #323232;
  padding: 5px;
  position: absolute;
  font-size: 10px;
  
}
</style>

使用

<template>
  <div>
    <div class="table-all-body">
      <!-- <div id="allmap" style="position:absolute;width: 100%;height: 100%;z-index:0;">
      </div> -->
      <baidu-map style="width: 100%;height: 100%;z-index:0;" :center="center" :zoom="zoom" @ready="handler"
        :scroll-wheel-zoom="true" :mapClick="false" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
        <!-- 图标+默认跳动+点击跳动 -->
        <bm-marker v-for="item in maps" :key="item.id" :position="{lng: item.longitude, lat: item.latitude}"
          :icon="{url: (item.qualityLevel==1?'static/img/stationAlarm.png':item.qualityLevel==2?'static/img/outLine.png':'static/img/stationNormal.png'), size: {width: 48, height: 48}}"
          :animation="nowStationId==item.id?'BMAP_ANIMATION_BOUNCE':''" @click="clickStation(item)">
        </bm-marker>
        <!-- 固定弹框内容 -->
        <MyOverlay v-if="nameShow" v-for="item in maps" :key="item.id"
          :position="{lng: item.longitude, lat: item.latitude}" :text="item.name"
          :img1="item.deviceWarn?'static/img/alarm2.png':''" :img2="item.qualityWarn?'static/img/alarm1.png':''">
        </MyOverlay>
      </baidu-map>
  </div>
</template>
<script>
  import selectStation from "./children/selectStation"
  import RealTimeData from "./children/RealTimeData";
  import MyOverlay from '@/components/common/MyOverlay.vue'
  export default {
    components: {
      selectStation,
      RealTimeData,
      MyOverlay,
    },
    data() {
      return {
        map: "", // 地图
        bigOrSmall1: 0, //扩大的状态
        maps: [], // 站点信息数组
        nowStationId: '',
        timeId: "", //循环
        center: {
          lng: 0,
          lat: 0
        },
        zoom: 3,
        qianxiData: [],
        contentShow: false,
        nameShow: true,
      };
    },
    computed: {},
    //取消循环
    beforeDestroy() {
      clearTimeout(this.timeId);
    },
    mounted() {},
    methods: {
      handler({
        BMap,
        map
      }) {
        this.map = map
        this.getTreePath()
        this.getMapData()
        this.zoom = 15
      },
      draw({
        el,
        BMap,
        map
      }) {
        const pixel = map.pointToOverlayPixel(new BMap.Point(map.re.lng, map.re.lat))
        el.style.left = pixel.x - 60 + 'px'
        el.style.top = pixel.y - 20 + 'px'
      },
      //设置当前点+移动坐标
      clickStation(item) {
        this.nowStationId = item.id
        this.center.lng = item.longitude
        this.center.lat = item.latitude
      },
      //移动或缩放时
      syncCenterAndZoom(e) {
      let Zoom =  e.target.getZoom()
        if (this.contentShow) {
          this.mapvLine()
        }
        if (Zoom < 13) {
          this.nameShow = false
        } else {
          this.nameShow = true
        }
      },
      //获取路径
      getTreePath() {
        this.center.lng = 114.52785300795644
        this.center.lat = 38.14758574827796
        this.nowStationId = '1'
      },
      //获取数据
      getMapData() {
        this.maps = [{
            "id": "1",
            "name": "站点名称站点名称站点名称站点名称站点名称",
            "longitude": 114.52785300795644,
            "latitude": 38.14758574827796,
            "qualityLevel": 1,
            "deviceWarn": true,
            "qualityWarn": true,
            "upSiste": []
          },
          {
            "id": "2",
            "name": "站点名称2",
            "longitude": 114.54050114953694,
            "latitude": 38.13759635572114,
            "qualityLevel": 2,
            "deviceWarn": true,
            "qualityWarn": false,
            "upSiste": [ //上游站点信息
              {
                "id": "2-1", //上游站点id
                "name": "上游站点2-1", //上游站点名称
                "longitude": 114.52785300795644, //上游经度
                "latitude": 38.14758574827796 //上游维度
              }
            ]
          },
          {
            "id": "3",
            "name": "站点名称3",
            "longitude": 114.56579743269792,
            "latitude": 38.12419932394176,
            "qualityLevel": 3,
            "deviceWarn": false,
            "qualityWarn": false,
            "upSiste": [ //上游站点信息
              {
                "id": "3-1", //上游站点id
                "name": "上游站点3-1", //上游站点名称
                "longitude": 114.54050114953694, //上游经度
                "latitude": 38.13759635572114 //上游维度
              }
            ]
          },
          {
            "id": "4",
            "name": "站点名称4",
            "longitude": 114.5908781225365,
            "latitude": 38.12056580319661,
            "qualityLevel": 3,
            "deviceWarn": false,
            "qualityWarn": false,
            "upSiste": [ //上游站点信息
              {
                "id": "3-1", //上游站点id
                "name": "上游站点3-1", //上游站点名称
                "longitude": 114.56579743269792, //上游经度
                "latitude": 38.12419932394176 //上游维度
              }
            ]
          },
          {
            "id": "5",
            "name": "站点名称5",
            "longitude": 114.6115750814864,
            "latitude": 38.11613720325717,
            "qualityLevel": 3,
            "deviceWarn": true,
            "qualityWarn": true,
            "upSiste": [ //上游站点信息
              {
                "id": "3-1", //上游站点id
                "name": "上游站点3-1", //上游站点名称
                "longitude": 114.5908781225365, //上游经度
                "latitude": 38.12056580319661 //上游维度
              }
            ]
          },
          {
            "id": "6",
            "name": "站点名称6",
            "longitude": 114.63838051790414,
            "latitude": 38.11556941444744,
            "qualityLevel": 2,
            "deviceWarn": true,
            "qualityWarn": false,
            "upSiste": [ //上游站点信息
              {
                "id": "3-1", //上游站点id
                "name": "上游站点3-1", //上游站点名称
                "longitude": 114.6115750814864, //上游经度
                "latitude": 38.11613720325717 //上游维度
              }
            ]
          },
          {
            "id": "6",
            "name": "站点名称6",
            "longitude": 114.68336765784383,
            "latitude": 38.10284977850926,
            "qualityLevel": 1,
            "deviceWarn": true,
            "qualityWarn": true,
            "upSiste": [ //上游站点信息
              {
                "id": "3-1", //上游站点id
                "name": "上游站点3-1", //上游站点名称
                "longitude": 114.63838051790414, //上游经度
                "latitude": 38.11556941444744 //上游维度
              }
            ]
          }
        ]
         this.timeData = []
         this.qianxiData = [] //弧线
         for (var i in this.maps) {
           for(var j in this.maps[i].upSiste){
             if(this.maps[i].upSiste.length!=0){
               this.curive({lng: this.maps[i].upSiste[j].longitude, lat: this.maps[i].upSiste[j].latitude}, {lng: this.maps[i].longitude, lat: this.maps[i].latitude}, 50)   
           var item = {
             geometry: {
             type: 'LineString',
             coordinates:[[this.maps[i].upSiste[j].longitude,this.maps[i].upSiste[j].latitude],[this.maps[i].longitude,this.maps[i].latitude]]
             },
             count: 100 * Math.random()
           } 
           this.qianxiData.push(item)
              }  
           }
         }
         this.mapvLine()
      },
      curive(fromPoint, endPoint, n) {
        var delLng = (endPoint.lng - fromPoint.lng) / n;
        var delLat = (endPoint.lat - fromPoint.lat) / n;

        for (var i = 0; i < n; i++) {
          var pointNLng = fromPoint.lng + delLng * i;
          var pointNLat = fromPoint.lat + delLat * i;
          this.timeData.push({
            geometry: {
              type: 'Point',
              coordinates: [pointNLng, pointNLat]
            },
            count: 1,
            time: i
          });
        }
      },
      //动态河流
      mapvLine() {
        var datas = new mapv.DataSet(this.qianxiData)
        var options1 = {
          globalCompositeOperation: 'lighter',
          strokeStyle: 'rgba(64,158,255, 1)',
          shadowColor: 'rgba(64,158,255, 0.5)',
          gradient: {
            0: 'rgba(64,158,255, 1)',
            1: 'rgba(64,158,255, 1)'
          },
          lineWidth: 7,
          draw: 'intensity'
        }
        var mapvLineLayer = new mapv.baiduMapLayer(this.map, datas, options1);
        var dataSet = new mapv.DataSet(this.timeData);
        var options = {
          fillStyle: 'rgba(255, 250, 250, 1)',
          size: 2,
          animation: {
            type: 'time',
            stepsRange: {
              start: 0,
              end: 50
            },
            trails: 1,
            duration: 5,
          },
          draw: 'simple'
        }
        var mapvTimeLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
        this.contentShow = true
      },
    }
  }

</script>

<style scoped>
  .history-img-left {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
  }

  .Map {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
    box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
    padding-left: 1%;
    margin-bottom: 1em;
    position: fixed;
    top: 15%;
    margin-left: 1%;
    width: 55%;
    height: 45%;
    background-color: white;
  }

  .enlarge {
    float: right;
    font-size: 20px;
    margin-top: -2.5vh;
    cursor: pointer;
  }

  .RadioParam {
    position: absolute;
    z-index: 1;
    right: 10px;
    margin-top: 10px;
  }

  .AroundTheFactory {
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    right: 10px;
    margin-top: 10px;
  }

</style>