高德地图结合echarts实现飞线

大家好，我是秃头蛙蛙🐸

前段时间有个需求需要在地图上显示两点的连线，发现高德地图自带api的不支持弧线，在探索中发现可以echarts 结合高德地图实现更多的选择。

效果如下：

怎么实现的呢，那我们进入详细步骤：

最关键的步骤是我们可以通过echarts实例获取地图组件

map.value = myChart.value.getModel().getComponent("amap").getAMap();
//相当于 map.value = new AMap.Map("container", {});

提前准备工作

1.在项目中安装 echarts和echarts-extension-amap echarts官网

2.在高德开放平台申请自己的key 高德开放平台

项目步骤

1.在public/index.html 中引入高德js

// 注意你需要的版本号和plugin，详情可看高德开放平台
<script
  type="text/javascript"
  src="//webapi.amap.com/maps?v=1.4.15&key='你申请的key'&plugin=AMap.ControlBar,AMap.Scale,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Heatmap,AMap.Geocoder"
></script>

2.html部分

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

3.javascript部分 最主要知道可以通过echarts实例获取地图组件，其他的就很简单了，对照高德和echarts一步一步就可以实现了

<script setup>
import * as echarts from "echarts";
import "echarts-extension-amap";
import { ref, shallowRef, onMounted } from "vue";
const AMap = window.AMap;
let container = ref();
let map = shallowRef("null");
let myChart = shallowRef("null");

onMounted(() => {
  Object.defineProperty(container.value, 'clientWidth', { get: function() { return 1000 } })
  Object.defineProperty(container.value, 'clientHeight', { get: function() { return 800 } })

  newCharts();
});
const newCharts = () => {
  myChart.value = echarts.init(container.value);
  const option = {
    // 高德地图的配置
    amap: {
      maxPitch: 60,
      pitch: 0, //45 俯仰角
      viewMode: "2D",
      zoom: 14,
      zooms: [4, 22],
      mapStyle: "amap://styles/dark", //地图主题
      center: [120.38, 36.08],
    },
    animation: true,
    series: [
      {
        type: "lines",
        coordinateSystem: "amap",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5, //图标大小
          color: "#fff",
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
            color: "red",
          },
        },
        data: [
        {
            odCount: '3',
            coords: [
              [120.311771,36.064771],
              [120.432771,36.106771],
            ],
          },
          {
            odCount: '4',
            coords: [
              [120.311771,36.064771],
              [120.417716,36.198771],
            ],
          },
        ],
      },
      {
        type: "effectScatter",
        coordinateSystem: "amap",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        symbol: "circle",
        symbolSize: 4,
        itemStyle: {
          normal: {
            show: false,
            color: "yellow",
          },
        },
        data: [
          {
            name: "青岛站",
            value: [120.311771, 36.064771],
          },
          {
            name: "远洋风景",
            value: [120.432771, 36.106771],
          },
          {
            name: "十梅庵公园",
            value: [120.417716, 36.198771],
          },
        ],
      },
    ],
  };
  myChart.value.setOption(option);
  // 需要注意的是amap，这里的配置就是针对 高德地图的配置了，而支持哪些配置可以在高德地图api查看
  // 通过echarts实例获取地图组件 高德getAmap() 百度getBmap()
  map.value = myChart.value.getModel().getComponent("amap").getAMap();
  // map.value = new AMap.Map("container", {});
  tools()
  // map.value.on("complete", () => {
  //   // console.log("complete");
  //   // 确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
  //   // myChart.value.setOption(option);
  // });
};
// 高德工具
const tools = ()=>{
   let toolBar = new AMap.ToolBar({
        visible: true,
        position: {
          top: '110px',
          right: '40px'
        }
    })
    map.value.addControl(toolBar);
}
</script>

高德地图结合echarts 可以让我们地图定制化更多选择，这次的两点飞线实现也算是遇到了一些坑，一步一步的解决，这个过程我觉得还是很不错的。