vue+leaflet示例:结合Echarts4实现迁徙图效果(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

• 核心源码

<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:结合Echarts4实现迁徙图效果</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "./leaflet-echarts";
import { useRouter } from "vue-router";
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView([37.550339, 104.114129], 4);
  //创建底图数据源
  L.tileLayer(
    "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
  ).addTo(map);
  //Echarts相关options配置
  const geoCoordMap = {
    海门: [121.15, 31.89],
    ……
  };

  const BJData = [
    [{ name: "北京" }, { name: "上海", value: 95 }],
    [{ name: "北京" }, { name: "广州", value: 90 }],
    [{ name: "北京" }, { name: "大连", value: 80 }],
    [{ name: "北京" }, { name: "南宁", value: 70 }],
    [{ name: "北京" }, { name: "南昌", value: 60 }],
    [{ name: "北京" }, { name: "拉萨", value: 50 }],
    [{ name: "北京" }, { name: "长春", value: 40 }],
    [{ name: "北京" }, { name: "包头", value: 30 }],
    [{ name: "北京" }, { name: "重庆", value: 20 }],
    [{ name: "北京" }, { name: "常州", value: 10 }],
  ];

  const SHData = [
    [{ name: "上海" }, { name: "包头", value: 95 }],
    [{ name: "上海" }, { name: "昆明", value: 90 }],
    [{ name: "上海" }, { name: "广州", value: 80 }],
    [{ name: "上海" }, { name: "郑州", value: 70 }],
    [{ name: "上海" }, { name: "长春", value: 60 }],
    [{ name: "上海" }, { name: "重庆", value: 50 }],
    [{ name: "上海" }, { name: "长沙", value: 40 }],
    [{ name: "上海" }, { name: "北京", value: 30 }],
    [{ name: "上海" }, { name: "丹东", value: 20 }],
    [{ name: "上海" }, { name: "大连", value: 10 }],
  ];

  const GZData = [
    [{ name: "广州" }, { name: "福州", value: 95 }],
    [{ name: "广州" }, { name: "太原", value: 90 }],
    [{ name: "广州" }, { name: "长春", value: 80 }],
    [{ name: "广州" }, { name: "重庆", value: 70 }],
    [{ name: "广州" }, { name: "西安", value: 60 }],
    [{ name: "广州" }, { name: "成都", value: 50 }],
    [{ name: "广州" }, { name: "常州", value: 40 }],
    [{ name: "广州" }, { name: "北京", value: 30 }],
    [{ name: "广州" }, { name: "北海", value: 20 }],
    [{ name: "广州" }, { name: "海口", value: 10 }],
  ];

  const planePath =
    "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

  const convertData = function (data) {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const dataItem = data[i];
      const fromCoord = geoCoordMap[dataItem[0].name];
      const toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].name,
          toName: dataItem[1].name,
          coords: [fromCoord, toCoord],
          value: dataItem[1].value,
        });
      }
    }
    return res;
  };

  const color = ["#a6c84c", "#ffa022", "#46bee9"];
  let series = [];
  [
    ["北京", BJData],
    ["上海", SHData],
    ["广州", GZData],
  ].forEach(function (item, i) {
    series.push(
      {
        name: item[0] + " Top10",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: "#fff",
          symbolSize: 3,
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 0,
            curveness: 0.2,
          },
        },
        data: convertData(item[1]),
      },
      {
        name: item[0] + " Top10",
        type: "lines",
        coordinateSystem: "geo",
        zlevel: 2,
        symbol: ["none", "arrow"],
        symbolSize: 10,
        effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 15,
        },
        lineStyle: {
          normal: {
            color: color[i],
            width: 1,
            opacity: 0.6,
            curveness: 0.2,
          },
        },
        data: convertData(item[1]),
      },
      {
        name: item[0] + " Top10",
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          normal: {
            show: true,
            position: "right",
            formatter: "{b}",
          },
        },
        symbolSize: function (val) {
          return val[2] / 8;
        },
        itemStyle: {
          normal: {
            color: color[i],
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[1].name,
            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
          };
        }),
      }
    );
  });
……
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

下载源码：GIS之家的学习交流圈