高德地图+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文件夹  路径自己修改下 就好了 这是散点图