高德地图海量点标记图片（智慧交通道路事件情况）

1.先建个js 文件

import AMapLoader from "@amap/amap-jsapi-loader";

2.文件中代码

const initMap = async (config) =&gt; {

    return new Promise((resolve, reject) =&gt; {

        AMapLoader.load({

            key: "0650fbe85c708dc3388fe803d0e5d861",

            // key: config.key,

            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

            plugins: [],

            Loca: {

                // 是否加载 Loca， 缺省不加载

                version: "2.0.0", // Loca 版本，缺省 1.3.2

            },

        }).then((AMap) =&gt; {

            resolve(AMap)

        }).catch(err =&gt; {

            reject(err)

        })

    })

}

export default initMap

3. vue 组件

<template>
  <div class="box" :style="{ height: height, width: width }">
    <div :id="id" class="container" ref="container"></div>
  </div>
</template>

<script>
import initMap from "../../utils/initMap";
export default {
  data() {
    return {
      markerList: [],
      aMap: null,
      url1: require("../../assets/img/background_img/bg_nav.png"),
      url2: require("../../assets/img/background_img/bg_header.png")
    };
  },
  /* 必传
    id
    center
  */
  props: {
    id: {
      type: String,
      default: "map"
    },
    // 宽
    width: {
      type: String,
      default: "100%"
    },
    // 高
    height: {
      type: String,
      default: "100%"
    },
    //地图显示的缩放级别
    zoom: {
      type: Number,
      default: 5.29
    },
    viewMode: {
      type: String,
      default: "3D"
    },
    // 地图的倾角，0-83
    pitch: {
      type: Number,
      default: 48
    },
    center: {
      type: Array,
      default: () => []
    },
    mapStyle: {
      type: String,
      // default: "amap://styles/ebfa0ae6f5c3e8c2f7c1b31f3912c232",
      default: "amap://styles/835378d49c95f3bb1522a957afdad78c"
    },
    // 拖拽
    dragEnable: {
      type: Boolean,
      default: false
    },
    // 缩放
    zoomEnable: {
      type: Boolean,
      default: false
    },
    // 双击变大
    doubleClickZoom: {
      type: Boolean,
      default: false
    },
    // ctrl
    keyboardEnable: {
      type: Boolean,
      default: false
    },
    circularList: {
      type: Array,
      default: () => []
    },
    lineList: {
      type: Array,
      default: () => []
    },

    // 散点图
    scatterMap: {
      type: Boolean,
      default: false
    },

    // 热力图
    heatMap: {
      type: Boolean,
      default: false
    },
    heatDate: {
      type: Object,
      default: () => {}
    },

    flyingLineObj: {
      type: Object,
      default: () => {}
    },
    breathObj: {
      type: Object,
      default: () => {}
    },
    // 飞线颜色
    flyingLineColors: {
      type: Array,
      // default: () => ["#8d48e3", "#dd79ff"],
      default: () => ["#dd79ff", "#d764fe", "#8d48e3"]
    },
    maxHeightScale: {
      type: Number,
      default: 0.3
    },
    // 飞点颜色
    headColor: {
      type: String,
      default: "rgba(255, 255, 0, 1)"
    },
    trailColor: {
      type: String,
      default: "rgba(255, 255,0,0)"
    }
  },
  watch: {
    flyingLineObj: {
      handler(newName, oldName) {
        setTimeout(() => {
          this.init();
        }, 1000);
      },
      deep: true
    }
  },
  methods: {
    async init() {
      if (this.aMap) {
        this.aMap.destroy();
        this.aMap = null;
      }
      let that = this;
      initMap()
        .then(AMap => {
          this.aMap = new AMap.Map(this.id, {
            zoom: this.zoom,
            viewMode: this.viewMode,
            pitch: this.pitch,
            center: this.center,
            mapStyle: this.mapStyle,
            dragEnable: this.dragEnable,
            zoomEnable: this.zoomEnable,
            doubleClickZoom: this.doubleClickZoom,
            keyboardEnable: this.keyboardEnable
            // layers:[disCountry],
          });

          // 创建 Loca 实例
          var loca = new Loca.Container({
            map: this.aMap
          });
          // 数据
          let events = [
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            },
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            },
            {
              type: "Feature",
              properties: {},
              geometry: {
                type: "Point",
                coordinates: [lon, lat]
              }
            }
          ];
          // 图层的数据源
          var dataSource = new Loca.GeoJSONSource({
            data: {
              type: "FeatureCollection",
              features: events
            }
          });
          // 图标图层
          var layer = new Loca.IconLayer({
            zIndex: 10,
            opacity: 1,
            visible: false
          });
          layer.setSource(dataSource);
          layer.setStyle({
            unit: "px",
            iconSize: [30, 44],
            icon: (index, feature) => {
              console.log("feature", feature);
              let url = "";
              if (feature.flag == 1) {
                url = require("../../assets/img/icons/map_icon3.png");
              } else if (feature.flag == 3) {
                url = require("../../assets/img/icons/map_icon2.png");
              } else if (feature.flag == 5) {
                url = require("../../assets/img/icons/menci_map_2.png");
              } else {
                url = require("../../assets/img/icons/map_icon1.png");
              }
              return url;
            },
            offset: [0, -40],
            rotation: 0
          });
          loca.add(layer);
          // 添加图层， 千万不能忘
          this.aMap.on("complete", function() {
            setTimeout(function() {
              layer.show();
              layer.addAnimate({
                key: "offset",
                value: [0, 1],
                easing: "Linear",
                transform: 500,
                random: true,
                delay: 9000
              });
              layer.addAnimate({
                key: "iconSize",
                value: [0, 1],
                easing: "Linear",
                transform: 500,
                random: true,
                delay: 9000
              });
            }, 800);
          });
          loca.animate.start();
          // 拾取测试
          this.aMap.on("click", e => {});
           
        // 打开图层调试工具
          var dat = new Loca.Dat();
          dat.addLayer(layer);
        })
        .catch(e => {
          console.log(e);
        });
    },
  },
  components: {},
  beforeDestroy() {
    // 销毁地图
    this.aMap.destroy();
    this.aMap = null;
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 1000px;
  border-radius: 12px;
  background: rgb(8, 34, 97);
}
.container {
  width: 100%;
  height: 100%;
  background: rgb(8, 34, 97);
}
::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}
::v-deep .amap-copyright {
  opacity: 0;
}
</style>