使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)

准备工作
要绘制带有立体感的中国地图，我们需要使用Vue3和Echarts 5进行开发。因此，在开始开发之前，需要确保已经安装了Vue3和Echarts 5。
导入Echarts并绘制简单的地图

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

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartsMap',
  mounted() {
    // 初始化echarts
    const chart = echarts.init(this.$refs.chart);

    // 定义地图数据
    const geoData = {
      // ...
    };
    echarts.registerMap('china', geoData);

    // 配置echarts的option参数
    const option = {
      // ...
      series: [
        {
          type: 'map',
          map: 'china',
        },
      ],
    };

    // 将配置好的参数传入echarts进行渲染
    chart.setOption(option);
  },
};
</script>

以上代码演示了如何使用Echarts 5绘制简单的中国地图。我们在mounted生命周期中初始化了Echarts实例 chart，完成了地图的注册和渲染。

使用高德地图API获取城市坐标

async getCityCoordMap() {
  const cityCoordMap = {};
  const response = await this.$http.get(
    'https://restapi.amap.com/v3/config/district',
    {
      params: {
        key: 'your_amap_api_key',
        keywords: 'China',
        subdistrict: 1,
      },
    },
  );
  const result = response.data?.districts[0];
  const cities = result?.districts;

  for (const province of cities) {
    const provinceName = province.name;
    const citiesInProvince = province.districts;
    for (const city of citiesInProvince) {
      const cityName = city.name;
      const center = city.center.split(',');
      cityCoordMap[cityName] = [center[0], center[1]];
    }
  }
  return cityCoordMap;
},

由于Echarts 5无法直接使用高德地图API提供的城市坐标数据，我们需要使用getCityCoordMap函数获取该数据。

上述代码示例使用了axios发送GET请求到高德地图API，获取所有行政区域的信息，并将每个城市的名称和坐标放入cityCoordMap对象中。

使用Mapbox gl JS绘制地球仪和流线

mounted() {
  // ...

  // 初始化mapboxgl地球仪
  mapboxgl.accessToken = 'your_mapbox_access_token';
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    zoom: 2,
    center: [110, 30],
  });

  // 加载echarts-gl插件
  echarts.gl.registerMap('world', worldJson);

  // 配置echarts的gl option参数
  const option = {
    globe: {
      globeRadius: 85,
      globeOuterRadius: 100,
      orbOpacity: 0.05,
      baseColor: 'rgba(0,0,0,0)',
      environment: {
        // ...
      },
    },
    series: [
      {
        type: 'lines3D',
        coordinateSystem: 'globe',
        effect: {
          show: true,
          period: 8,
          trailLength: 0,
          color: '#fff',
          opacity: 1,
          width: 0.6,
        },
        blendMode: 'lighter',
        lineStyle: {
          width: 1,
          color: '#00ffff',
          opacity: 0.2,
        },
        data: this.convertData(data),
      },
    ],
  };

  // 给echarts实例设置option并渲染
  chart.setOption(option);

  // 使用Mapbox gl JS绑定Echarts和地球仪
  chart.connect(map);
}

在mounted生命周期中，我们使用Mapbox gl JS初始化了一个地球仪，并加载了echarts-gl插件。该插件可以在Mapbox gl JS上运行Echarts。

在Echarts的option参数中，我们使用了globe和series等配置项来完善地球仪的外观和流线的展示效果。最后，我们调用了chart.connect(map)函数来将echarts实例和Mapbox gl JS地球仪绑定起来。

示例一：随机生成流线数据

convertData(data) {
  const res = [];
  for (let i = 0; i < data.length; i += 1) {
    const fromCity = data[i].fromCity;
    const toCity = data[i].toCity;
    const fromCoord = this.cityCoordMap[fromCity];
    const toCoord = this.cityCoordMap[toCity];
    if (fromCoord && toCoord) {
      res.push({
        coords: [fromCoord, toCoord],
      });
    }
  }
  return res;
},
generateRandomData() {
  const cityList = Object.keys(this.cityCoordMap);
  const res = [];
  for (let i = 0; i < 200; i += 1) {
    const fromCity = cityList[Math.floor(Math.random() * cityList.length)];
    let toCity = cityList[Math.floor(Math.random() * cityList.length)];
    while (toCity === fromCity) {
      toCity = cityList[Math.floor(Math.random() * cityList.length)];
    }
    res.push({
      fromCity,
      toCity,
    });
  }
  return res;
},
async drawRandomLines() {
  const data = this.generateRandomData();
  const option = this.$refs.chart.getOption();
  option.series[0].data = this.convertData(data);
  this.$refs.chart.setOption(option);
},

该示例中，我们使用generateRandomData函数生成200组随机的流线飞行数据，使用convertData将数据转换为Echarts需要的格式并更新Echarts实例中的数据。最后，我们定义了drawRandomLines函数，在点击随机绘制按钮时调用，即可随机绘制200条流线。

示例二：和高德地图交互

mounted() {
  // ...
  map.on('click', 'city-layer', this.onCityClick);
},
data() {
  return {
    popup: new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: true,
    }),
  };
},
methods: {
  onCityClick(event) {
    const cityName = event.features[0].properties.name;
    const coord = event.lngLat.toArray();
    this.popup.setLngLat(coord)
      .setHTML(cityName)
      .addTo(this.$refs.map)
      .setMaxWidth('10vw');
  },
},

在该示例中，我们使用Mapbox gl JS在地图上绘制了一个名为city-layer的图层，并监听了其click事件。当用户点击城市时，我们根据用户的点击位置弹出一个显示城市名称的气泡。