高德地图+echarts 地图数据可视化

使用高德地图+echarts开发散点图和流线图 实现自定义图标

安装npm install echarts-extension-amap --save

在main.js引入// 高德离线地图

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

  // 高德key

  key: 'f697ef3360d0ffad74bf17d5e183082c', // 自己到官网申请，我随便写的

  // 插件集合 （插件按需引入）

  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],

  v: '1.4.15', // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了

  uiVersion: '1.0.11' // ui版本号，也是需要写，不配置不加载,

})

require('echarts-extension-amap');

完整代码

//容器 使用ref

<template>

  <div class="map" ref="map"></div>

</template>



<script>

export default {

  data() {

return {

//飞线数组

      flyLine: [

        {

          coords: [

            [116.496437, 39.913523],

            [123.499706, 41.857793],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [86.113232, 43.684254],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [87.343701, 35.720308],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [101.406201, 24.177443],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [111.249951, 24.976714],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [107.206982, 33.843608],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [115.468701, 43.557002],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [107.031201, 37.134586],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [99.648388, 38.522914],

          ],

        },

        {

          coords: [

            [116.496437, 39.913523],

            [124.081982, 49.361353],

          ],

        },

      ],

//散点数组

      goals: [

        [123.499706, 41.857793],

        [86.113232, 43.684254],

        [87.343701, 35.720308],

        [101.406201, 24.177443],

        [111.249951, 24.976714],

        [107.206982, 33.843608],

        [115.468701, 43.557002],

        [107.031201, 37.134586],

        [107.031201, 37.134586],

        [99.648388, 38.522914],

        [124.081982, 49.361353],

      ],

    };

  },

  updated() {},

//初始化界面

  mounted() {

    this.mapInit();

  },

  created() {},

  methods: {

mapInit() {

//散点数组

      const points = [

        [120.33333, 36.06667],

        [(118.1, 24.46667)],

        [(119.3, 26.08333)],

        [103.73333, 36.03333],

        [106.71667, 26.56667],

        [113.0, 28.21667],

        [118.78333, 32.05],

        [115.9, 28.68333],

      ];

//散点数组



      const pointdata = [

        [116.33333, 36.06667],

        [(118.1, 24.46667)],

        [(109.3, 24.08333)],

        [103.73333, 26.03333],

        [106.71667, 28.56667],

        [120.0, 27.21667],

        [118.78333, 25.05],

        [105.9, 38.68333],

      ];

//散点数组



      const pointdata1 = [

        [110.33, 38.06667],

        [108.1, 29.46667],

      ];

      let _this = this;

//echarts

      let option = {

        // 加载 amap 组件

        amap: {

          // 高德地图中心经纬度

          center: [105.397428, 38.90923], //中心点

          // 高德地图缩放

          zoom: 4.5,

          // 启用resize

          resizeEnable: true,

          // 自定义地图样式主题

          mapStyle: "amap://styles/darkblue", //地图主题

          // viewMode:'3D',//开启3D视图,默认为关闭

          // expandZoomRange:true,

          // zooms:[3,20],

          // pitch: 40

        },



        // 图例

        legend: {

          data: [

            {

              name: "5G基站设备",

              icon: "image://" + require("../../../public/map/jzl.png"),

            },

            {

              name: "边缘云",

              icon: "image://" + require("../../../public/map/byyl.png"),

            },



            {

              name: "核心网",

              icon: "image://" + require("../../../public/map/hxwl.png"),

            },

          ],

         

          // 图例大小

          // 宽

          itemWidth: 40,

          // 高

          itemHeight: 40,

          orient: "vertical", // 竖向排列 horizontal横向

          // 位置

          right: 50,

          bottom: 100,

          y: "bottom",

          x: "left",

          // 文字样式

          textStyle: {

            color: "blue",

            fontSize: 16,

          },

          selected: {

            jzl: true,

            byyl: true,

            // 不想显示的都设置成false

          },

          padding: [0, 10, 20, 20],

        },

        tooltip: {

          trigger: "item",

          show: true,

        },

        animation: false,

        series: [

          // 流线

          {

            coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系

            type: "lines", // 该类型用于地图上路线的绘制

            zlevel: 1, // 相当于z-index

            effect: {

              // 线特效的配置

              show: true, // 是否显示特效

              period: 5, // 特效动画的时间

              trailLength: 0.05, // 特效尾迹的长度 0-1

              color: "#3437ff", // 特效的颜色

              symbolSize: 5, // 特效的大小

            },

            lineStyle: {

              // 线的颜色

              normal: {

                color: "rgba(47,68,200,0.1)",

                width: 2,

                curveness: 0.2,

              },

            },

            data: _this.flyLine,

          },

       

          {

            name: "5G基站设备",

            type: "scatter",

            // 使用高德地图坐标系

            coordinateSystem: "amap",

            symbol: `image://map/jzl.png`,

            //自定义图片的 大小

            symbolSize: [20, 20],

            data: _this.goals,

            zlevel: 1,

          },

          {

            type: "scatter",

            name: "边缘云",

            // 使用高德地图坐标系

            coordinateSystem: "amap",

            symbol: `image://map/byyl.png`,

            //自定义图片的 大小

            symbolSize: [40, 40],

            data: points,

            zlevel: 1,

          },

          {

            type: "scatter",

            name: "核心网",

            // 使用高德地图坐标系

            coordinateSystem: "amap",

            symbol: `image://map/hxwl.png`,

            //自定义图片的 大小

            symbolSize: [40, 40],

            data: pointdata,

            zlevel: 1,

          },

          {

            type: "scatter",

            name: "核心网",

            // 使用高德地图坐标系

            coordinateSystem: "amap",

            symbol: `image://map/hxwh.png`,

            //自定义图片的 大小

            symbolSize: [40, 40],

            data: pointdata1,

            zlevel: 1,

          },

        ],

      };

      var map = new AMap.Map('container', {

    zoom: 4,

    mapStyle: 'amap://styles/darkblue', //设置地图的显示样式

});

      let chart = this.$echarts.init(_this.$refs.map);

      chart.setOption(option);



    },

  },

};

</script>

<style lang="scss" scoped>

.map {

  width: 100%;

  height: 100%;

}

</style>

代码中使用的自定义图标可以使用下自己的图片 放在public下自己创建一个文件夹 我是叫做map文件夹  路径自己修改下 就好了 这是散点图