echarts结合高德api(amap)做散点和迁徙图Vue

こ雲淡風輕ζ 提交于 2020-04-22 16:25:45

p.s.网上高德结合echarts资源太少了,一整还得交学费下载-。-,本着前人栽树后人乘凉的高尚品德,把我实现的免费版放出来,希望我的这篇文章可以满足广大伸手党(我也是)复制即用的心态,毕竟这也不涉及啥高深原理,满足工作所需就足够了。

效果图

步骤

  1. 首先你得有高德api的key 传送门:lbs.amap.com/api/android…
  2. 现在vue里引入高德地图 这里我要絮叨几句,网上引入高德有很多方法,有npm下vue-amap包的还有别的,我觉得挺费劲的还得去main.js里面配置,我用的直接在index.html里面引入script脚本的方式(方便复制粘贴)。
    <script src="//webapi.amap.com/maps?v=1.4.15&key=这里面填你申请的key&plugin=AMap.CustomLayer"></script>
    使用方法:复制上面这段script标签,双击这里面填你申请的key选中删除,换成你自己申请的key。然后将标签粘贴到你vue项目中public文件夹下有个index.html中第九行(如果你没有引入其他东西的话)

3. 下载echarts 下载完别忘记在 main.js中引入 import echarts from 'echarts' ,同时全局注册一下 Vue.prototype.$echarts = echarts;

完成以上几步你以为就完事了嘛?不不不这只是开始(狗头)

重点:npm i echarts-extension-amap 然后在main.js中引入一下import 'echarts-extension-amap'

下载这个包 不要相信网上什么echarts-amap或者amap-echarts或者什么要你花钱买amap.js这个文件的,都是骗子!骗子!老子画这么多年页面都是白嫖,竟然想让老子花钱?门都没有。

完成以上上面的步骤实际上就成功了一半了,接下来开始封装组件吧。

<template>
  <div id="111" style="width:100%;height:100%"></div>
</template>
<script>
export default {
  props: {
  //这个是地图中心点的坐标哈 写props里方便改,写data里也行。不用非得跟我一样。
    center: {
      type: Array,
      default: () => {
        return [113.74947682142859, 22.835607857142858];
      }
    }
  },
    mounted() {
        this.initMap()
    },
  methods: {
    initMap() {
      const option = {
        //amap地图配置
        amap: {
          center: this.center,
          resizeEnable: true,
          mapStyle: "amap://styles/whitesmoke",//地图样式白色
          rotation: 10,
          zoom: 10,//缩放
          viewMode: "3D",//是否启用3d地图
          pitch: 35, //视角高度
          skyColor: "#33216a"
        },
        animation: true,
        series: [
          //散点图层
          {
            type: "scatter",
            zlevel: 2,
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            // 数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]
            data:[] , //数据格式[y,x,name]
            symbolSize: 5, //小点的大小
            encode: {
              //维度
              value: 2
            },
            label: {
              normal: {
                formatter: "{@[2]}", //title提示的文字@后为索引
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#00c1de" //颜色
              }
            }
          },
          //攻击线图层
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return `从${data.fromName}${data.endName}`;
                },
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: //数据格式[
        {
          fromName: "111",
          endName: "222",
          coords: [
            [坐标, 坐标, 名称],
            [坐标, 坐标, 名称]
          ]
        },
          },
          //攻击线图层2
          {
            type: "lines",
            zlevel: 1,
            coordinateSystem: "amap",
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 5,
              trailLength: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                  let data = params.data;
                  return `从${data.fromName}${data.endName}`;
                },
                position: "right", //显示位置
                show: false
              },
              emphasis: {
                //重点显示
                show: true
              }
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: //和攻击线图层1的数据格式一样
          }
        ]
      };
      var chart = this.$echarts.init(document.getElementById('111'));
      chart.setOption(option);
      // get amap instance
      var amap = chart
        .getModel()
        .getComponent("amap")
        .getAMap();
      // operations below are the same as amap
      //   amap.addControl(new AMap.Scale());
      //   amap.addControl(new AMap.ToolBar());
      // add layers
      //   var satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层
      //   var roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层
      //   amap.add([satelliteLayer, roadNetLayer]);
    }
  }
};
</script>
复制代码

每一个图层的数据自己模拟一下,格式都写在注释里了。你要是复制粘贴跑不起来报错了也可以评论问我一下。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!