echarts加载地图

echarts加载地图

一、参考文档

1、官网地址：https://echarts.apache.org/zh/option.html#series-map

2、地图json下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

二、加载地图

2.1加载中国地图，并添加飞线

• 准备中国地图数据，

• 准备飞线数据

  //飞线格式数据如下 
  [{
            coords: [
              [startLongitude, startLatitude],
              [endLongitude, endLatitude],
            ],
            value:'',
          }]
  

2.2代码如下

<template>
  <div class="container">
    <div id="map" ref="chartRef"></div>
    </div>
</template>
<script lang="ts" setup>
    import { onMounted, ref, reactive, onUnmounted } from "vue";
import * as echarts from "echarts";
import chinaMapData from "chinaMap.json"; //本地中国地图数据
import dailyFlyData from "dailyFlyData.json";//本地飞线数据
    
    const chartRef = ref<HTMLDivElement | null>(null);

let chart: echarts.ECharts | null = null;
    
    // 初始化地图
function initChart() {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value);
    // 注册地图数据
    echarts.registerMap('china', chinaMapData);
    renderMap();
  }
}
    //加载地图
    function renderMap(mapName: string) {
  try {
    if (!chart) return;  
    chart.clear();
    chart.setOption(getChineConfig());
  } catch (error) {
    console.error("Error rendering map:", error);
  }
}
    
    //加载中国地图
function getChineConfig() {
  const chinaOption = {
    tooltip: {
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: "#fff",
        fontSize: 13,
      },
      backgroundColor: "rgba(15,33,70,0.7)",
      borderColor: "rgba(54,82,132,0.7)",
      borderWidth: 1,
      padding: [10, 14],
      extraCssText: "z-index:4",
      formatter: function (parma: any) {
        if (parma.seriesType === "effectScatter") {
          return parma.name;
        }
      },
    },
      //添加地图阴影，呈现立体效果
    geo: {
      zoom: 1, // 缩放比例
      show: true,
      aspectScale: 0.85,
      silent: true, // 鼠标事件是否开启
      animation: true,
      map: "china",
      label: {
        show: false,
      },
      roam: false, //是否可缩放
      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            opacity: 0, // 为 0 时不绘制该图形
          },
          label: {
            show: false, // 隐藏文字
          },
        },
      ],
      itemStyle: {
        borderColor: "#27e0fd",
        shadowColor: "#27e0fd",
        shadowOffsetX: 1,
        shadowOffsetY: 9,
      },
      emphasis: {
        itemStyle: {
          areaColor: "#4499d0",
          color: "#fff",
        },
        label: {
          show: true,
          color: "#fff", // 确保强调状态下省份名称为白色
        },
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        zoom: 1, // 缩放比例
        geoIndex: 1,
        aspectScale: 0.85, // 长宽比
        showLegendSymbol: true, // 存在legend时显示
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            color: "#fff", // 确保强调状态下省份名称为白色
          },
          itemStyle: {
            areaColor: "#1affa3",
            color: "#fff",
          },
        },
        roam: false,
        itemStyle: {
          color: "none",
          areaColor: "rgba(43,203,240,1)",
          borderColor: "#27e0fd",
          borderWidth: 1,
        },
        select: {
          label: {
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#34d1fc",
          },
        },
        animation: true,
        data: [],
      },
        //加载飞线
      {
        type: "lines",
        zlevel: 1,
        effect: {
          show: true,
          period: 6,
          trailLength: 0.02,
          symbol: "arrow",
          symbolSize: 6,
        },
        label: {
          show: true,
          position: "end",
          fontSize: 14,
          color: "#fff",
        },
        emphasis: {
          show: false,
        },
        lineStyle: {
          width: 1.5,
          color: "rgb(249, 252, 22)",
          opacity: 1,
          curveness: -0.3,
        },
          //将飞线数据处理成需要的数据格式
        data: dailyFlyData.map((item) => ({
          coords: [
            [item.startLongitude, item.startLatitude],
            [item.endLongitude, item.endLatitude],
          ],
          value: item.name,
        })),
      },
    ],
  };

  return chinaOption;
}
    onMounted(() => {
  initChart();
  if (chart) {
    chart.on("click", handleMapClick); // 监听点击事件
    //监听空白处点击事件
    chart.getZr().on('click', function(event) {
  // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  if (!event.target) {
    // 点击在了空白处，做些什么。
  }
});
  }
});
onUnmounted(() => {
  chart?.clear();
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
/* 设置地图容器的样式 */
#map {
  width: 100%;
  height: 100%;
}
</style>

三、效果图如下