vue 高德地图实现报警光圈效果

vue数据大屏项目开发中，我们会遇到需要渲染地图，并且在地图上添加报警的效果，今天我们来整理一些在开发中可能会需要的报警动效。

动态效果

演示地址

这里的动画我们使用的是lottie来实现的，通过lottie-web来渲染动态效果。

动画组件效果

这里我们使用lottie来渲染地图上动画效果，lottie动画效果，我们可以在这个平台自行查找下载：lottie动画效果

/**
* @Author: 858834013@qq.com
* @Name: lottie
* @Date: 2024年02月14日
* @Desc: lottie封装
*/
<template>
  <div ref="lottie" class="lottie">

  </div>
</template>

<script>
import lottie from 'lottie-web'
import alarmData from './data/data.json'

export default {
  props: {
    canvasId: {
      type: String,
      default: 'canvasId'
    },
    renderer: {
      type: String,
      value: 'svg'
    },
  },
  mounted() {
    this.intLottie();
  },
  data() {
    return {
      path: alarmData
    }
  },
  methods: {
    intLottie() {
      // 渲染主图按钮动画
      let lottieBox = lottie.loadAnimation({
        container: this.$refs.lottie, // 包含动画的dom元素
        renderer: this.renderer, // 渲染出来的是什么格式
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        animationData: this.path
      });
    },
    destory: function destory() {
      if (this.lottie) {
        this.lottie.destroy();
        this.lottie = null;
      }
    }
  },
  onUnload() {
    this.destory();
  }
}
</script>

<style>
.lottie {
  width: 100PX;
  height: 100PX;
  position: relative;
  left: 0;
}
</style>

vue3框架代码

<template>
  <div class="gdMap">
    <div class="container" ref="mapContainer" id="container"></div>
  </div>
</template>

<script>
import {createApp} from 'vue';
import alarm from "./alarm/index.vue";
import alarm2 from "./alarm2/index.vue";

export default {
  data() {
    return {
      map: null,
    }
  },
  components: {
    alarm,
    alarm2
  },
  mounted() {
    var that = this;
    that.map = new AMap.Map(this.$refs.mapContainer, {
      zoom: 10,
      center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/eebad0d61cdc83f8253e3fbcdf5cd2bc',
    })
    // 红色报警光圈效果渲染
    // 创建一个临时的DOM元素来挂载alarm组件
    const container = document.createElement('div');
    const app = createApp(alarm);
    app.mount(container);

    // 创建自定义覆盖物
    const customOverlay = new AMap.Marker({
      position: [116.397428, 39.90923], // 设置覆盖物位置
      map: this.map, // 设置覆盖物添加到哪个地图
      content: container, // 将alarm组件的DOM作为内容
      offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
    });
    // 红色报警光圈效果渲染结束
    // 红色报警光圈效果渲染
    // 创建一个临时的DOM元素来挂载alarm组件
    const container2 = document.createElement('div');
    const app2 = createApp(alarm2);
    app2.mount(container2);

    // 创建自定义覆盖物
    const customOverlay2 = new AMap.Marker({
      position: [116.397428, 39.72923], // 设置覆盖物位置
      map: this.map, // 设置覆盖物添加到哪个地图
      content: container2, // 将alarm组件的DOM作为内容
      offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
    });
    // 红色报警光圈效果渲染结束
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>

.gdMap {
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
}
</style>

vue2框架关键代码

vue2和vue3的写法略有差异。

mounted() {
    var that = this;
    that.map = new AMap.Map(this.$refs.mapContainer, {
      zoom: 10,
      center: [116.397428, 39.90923],
      mapStyle: 'amap://styles/eebad0d61cdc83f8253e3fbcdf5cd2bc',
    })
    // 红色报警光圈效果渲染
    // 创建一个临时的DOM元素来挂载alarm组件
    const AlarmComponent = Vue.extend(alarm); // 使用 Vue.extend 创建组件构造器
    const componentInstance = new AlarmComponent(); // 创建 alarm 组件实例
    componentInstance.$mount(); // 挂载组件
    const container = componentInstance.$el;

    // 创建自定义覆盖物
    const customOverlay = new AMap.Marker({
      position: [116.397428, 39.90923], // 设置覆盖物位置
      map: this.map, // 设置覆盖物添加到哪个地图
      content: container, // 将alarm组件的DOM作为内容
      offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
    });
    // 红色报警光圈效果渲染结束
    // 红色报警光圈效果渲染
    // 创建一个临时的DOM元素来挂载alarm组件
    const AlarmComponent2 = Vue.extend(alarm2); // 使用 Vue.extend 创建组件构造器
    const componentInstance2 = new AlarmComponent(); // 创建 alarm 组件实例
    componentInstance2.$mount(); // 挂载组件
    const container2 = componentInstance2.$el;
    // 创建自定义覆盖物
    const customOverlay2 = new AMap.Marker({
      position: [116.397428, 39.72923], // 设置覆盖物位置
      map: this.map, // 设置覆盖物添加到哪个地图
      content: container2, // 将alarm组件的DOM作为内容
      offset: new AMap.Pixel(-50, -50), // 设置覆盖物位置偏移值
    });
    // 红色报警光圈效果渲染结束
  },

项目应用

重要目标预警与智慧分析系统

实例代码下载

项目代码包含vue2和vue3两种框架下的实例代码