全网独家基于vue-amap 做轨迹点动画精心整理

搞不动的前端

已于 2024-04-10 10:07:26 修改

阅读量1.6k

点赞数 5

分类专栏： vue-amap 高德地图文章标签： vue.js javascript ecmascript

于 2023-03-10 17:32:58 首次发布

本文链接：https://blog.csdn.net/weixin_43929450/article/details/129444412

版权

vue-amap 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

高德地图

3 篇文章 0 订阅

订阅专栏

最近收到了一个需求，需要在vue-amap上做轨迹，之前是想着连成线，但由于固件提供的数据无法支持连成线，所以就只能做成动画的轨迹点。
我们先来看一下效果图：
在这里插入图片描述
视频动态效果地址如下：链接: 动画视频

一：引入vue-amap 组件

<el-amap
      :center="center"
      :amap-manager="amapManager"
      :zoom="zoom"
      :plugins="plugins"
      :events="events"
      :resize-enable="true"
      :map-style="mapStyle"
      class="map"
    >
      <el-amap-marker
        v-for="(marker,index) in markers"
        :key="'marker'+index"
        :position="marker.position"
        :events="marker.events"
        :content="marker.icon"
      />
    </el-amap>

其实动画中的点动起来其实是markers 的改变和添加这种思路。

二：模拟数据

在这里插入图片描述

    startMove() {
      let markers = []
      for (let i = 0; i < 20; i++) {
        markers.push({
          position: [121.621 + Math.random() * 0.001, 31.2444 + 0.001 * Math.random()],
          events: {},
          //   <div style='color:#fff;position: absolute;top: -20px;font-size: 10px;left: -25px;width:85px'>停留:${
          //   Number(item.duration) <= 60
          //     ? item.duration + '秒'
          //     : item.duration / 3600 >= 1
          //     ? (item.duration / 3600).toFixed(2) + '小时'
          //     : (item.duration / 60).toFixed(2) + '分钟'
          // }</div>
          icon: `<div style='display: inline-block;text-align: center;position: relative;' class='animate__animated animate__pulse animate__infinite'>
            <div style='position: absolute;top: -25px;font-size: 10px;left: -110px;width: 275px;color:#fff'>日期:${this.changeTime(
              1678273262229 + i * 10000
            )}</div>
            <div style='color:#fff;position: absolute;top:2px;left:5px;font-size: 10px;'>${i + 1}</div>
            <div class="animate__animated animate__pulse animate__infinite"  style="background:url(https://images.hicling.com:9443/weixin/normalBg.png) no-repeat;background-size:contain ;width:40px;height:50px;text-align:center;padding-top: 5px;"><img style="width:30px;height:30px;border-radius:50%" src=${
              this.avatar
            }
               ></div>
          </div>`
        })
      }
      this.$refs.trajectory.copyMarkersList = markers
      setTimeout(() => {
        this.$refs.trajectory.zoom = 20
        this.$refs.trajectory.markers = []
        this.$refs.trajectory.controlFlag = true
        this.$refs.trajectory.copyMarkersList = markers
        this.$refs.trajectory.againDonghua()
      }, 500)
    }

这里的 copyMarkersList 是所有的轨迹点。