RuoYi vue-element-admin 增加原生高德地图并显示海量点

1、在public/index.html中增加js引用

记得放到head中

2、vue.config.js 增加配置内容

    externals: {
      'AMap': 'AMap',
      'AMapUI': 'AMapUI'
    }

3、要引用地图的页面

要显示地图的div

    
    

      loading...
    

 引用AMap

import AMap from 'AMap'

初始化地图 

 // 初始化地图
    initMap() {
      const map = new AMap.Map('mapDiv', {
        center: [120.56587, 36.20366],
        resizeEnable: true,
        zoom: 12
        // lang: 'en'
      })
      this.map = map

      // 地图添加各种控件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar())
        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        map.addControl(new AMap.MapType())

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        // map.addControl(new AMap.Geolocation())

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale())
      })

      // 海量点的样式
      var style = [{
        // 必填参数,图标的地址
        url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
        // 必填参数，图标显示位置偏移量，以图标的左上角为基准点（0,0）点，例如：anchor:new AMap.Pixel(5,5)
        anchor: new AMap.Pixel(6, 6),
        // 必填参数，图标的尺寸；例如：size:new AMap.Size(11,11)
        size: new AMap.Size(11, 11)
      },
      // 红色 未除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IPiAEO2hAAAEJdf9ZKs794.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 绿色  已经除治
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IriAQ7-IAAAEJWeQRis039.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      },
      // 灰色以前的数据
      {
        url: this.baseURL + '/storage/dfs/display?path=group1/M00/00/0E/wKgABV-2IyGAS1xQAAAEJeELcZs238.png',
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(11, 11)
      }]

      this.mass = new AMap.MassMarks(null, {
        // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明
        opacity: 0.6,
        // 图层叠加的顺序值，0表示最底层。默认zIndex：5
        zIndex: 111,
        // 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
        cursor: 'pointer',
        style: style,
        // 表示是否在拖拽缩放过程中实时重绘，默认true，建议超过10000的时候设置false
        alwaysRender: false
      })

      // 鼠标悬浮 弹出窗口
      var marker = new AMap.Marker({ content: ' ', map: map })

      this.mass.on('mouseover', function(e) {
        marker.setPosition(e.data.lnglat)
        marker.setLabel({ content: e.data.name })
      })

      // 海量点绑定到地图上
      this.mass.setMap(map)
    },

附：整个vue代码 

最终显示效果