在 echarts中实现地图加载，按照以下步骤操作：

首页下载echarts 依赖：

npm install echarts --save

引入 ECharts

import * as echarts from 'echarts';

在gjson网站下载地图所需要的JSON文件

https://geojson.cn/data/atlas/china

// 基于准备好的dom，初始化echarts实例

 var myChart = echarts.init(this.$refs.container);
// 绘制图表
axios.get("/china2.json").then((res) => {
console.log(res.data);
echarts.registerMap("china", res.data);
const buildingsGeoJSON = res.data;
})
myChart.setOption({
  tooltip: {},
  geo: {
    map: "buildings",
    roam: false,
    label: {
      show: true,
      position: "left",
      distance: 100,
      offset: [-3000, -100],
      color: "#f1e3e3",
      align: "left",
    },
    zoom: 0.96,
    itemStyle: {
      borderWidth: 1.5,
      borderColor: "rgba(121, 213, 243, 1)", //地图边界颜色
      areaColor: "rgba(255, 255, 255, 0.1)",
      // opacity: 1,
      // shadowBlur: 20, // 阴影大小
      shadowColor: "rgba(131, 221, 247, 1)", // 阴影颜色，与区域颜色一致
      opacity: 1,
      // shadowColor: 'rgba(255, 255, 255, 1)',
      // shadowBlur: 1,
      // shadowOffsetX: 1,
      // shadowOffsetY: 1,
      // areaColor: '#eee'
    },
    label: {
      show: true,
      color: "#fff", // 文字颜色
      // textBorderType: [5, 10],
      textBorderColor: "#000",
      fontSize: 12,
      fontWeight: "bolder",
      textBorderDashOffset: 4,
      textShadowColor: "#000", // 文字阴影颜色
      textShadowBlur: 1, // 文字阴影模糊度
      textShadowOffsetX: 2, // 文字阴影水平偏移
      textShadowOffsetY: 2, // 文字阴影垂直偏移
    },
    emphasis: {
      label: {
        show: true,
        color: "#fff",
      },
    },
    select: {
      label: {
        show: true,
        color: "#fff",
      },
    },
  },
  series: [
    {
      type: "map3D",
      map: "buildings",
      shading: "realistic",
      top: "middle",
      left: "center",
      regionHeight: 6,
      realisticMaterial: {
        detailTexture: "WX20241211-133911@2x.png",
        textureTiling: 1.01,
        roughness: 1,
        // metalness: 1
      },
      // lambertMaterial : {
      //   detailTexture: "3041733898209_.pic_hd.jpg",
      //   // textureTiling: 1.01,
      // },
      postEffect: {
        enable: true,
        SSAO: {
          enable: true,
          intensity: 2,
          radius: 20,
        },
        screenSpaceReflection: {
          enable: false,
        },
        depthOfField: {
          enable: true,
          blurRadius: 0.1,
          focalDistance: 0,
        },
      },
      light: {
        main: {
          color: "#fff", //地图边缘颜色
          intensity: 10, //主光源的强度。[ default: 1 ]
          shadow: true, //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
          shadowQuality: "high", // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
          alpha: 4, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
          beta: 4, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
          // intensity: 1,
          // alpha: 50,
          // shadow: true,
          // shadowQuality: "high",
        },
        ambient: {
          intensity: 0.9,
        },
        ambientCubemap: {
          exposure: 1,
          diffuseIntensity: 0.9,
          specularIntensity: 1,
        },
      },
      groundPlane: {
        // show: true,
        color: "#333",
      },
      viewControl: {
        // projection:orthographic
        autoRotateDirection: "ccw",
        // minBeta: -360,
        // maxBeta: 20,
        alpha: 100,
        // beta: 10,
        // center: [50, 0, -10],
        distance: 360,
        minDistance: 350,
        maxDistance: 350,
        // alpha: -100,
        panMouseButton: "left",
        rotateMouseButton: "middle",
        zoomSensitivity: 0.5,
      },
      itemStyle: {
        areaColor: "#ccc",
        borderColor: "rgba(0, 0, 0, 0.8)",
        borderWidth: 3,
      },
      // label: {
      //   color: "white",
      //   show: true,
      // },
      // silent: true,
      // instancing: false,
      boxWidth: 325,
      // boxHeight: 1000,
      // data: regions,
    },
    {
      name: "严重告警",
      type: "scatter", // 设置系列类型为带有涟漪特效的散点图
      coordinateSystem: "geo", // 使用地理坐标系统
      rippleEffect: {
        // 涟漪特效设置
        scale: 5, // 涟漪效果的放大倍数
      },
      symbol: "image://db.png",
      symbolSize: [40, 50],
      data: [
        // 散点数据设置
        { name: "安徽", value: [117.226884, 31.849254] },
        { name: "江苏", value: [119.486506, 32.983991] },
      ],
    },
    {
      type: "lines",
      //   zlevel: 2,
      coordinateSystem: "geo",
      polyline: true,
      effect: {
        show: false,
        period: 4, // 箭头指向速度，值越小速度越快
        trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: "none", // 箭头图标
        symbolSize: 5, // 图标大小
      },
      lineStyle: {
        width: 2,
        opacity: 1,
        color: "rgba(255, 49, 65, 1)",
        type: "dashed",
        curveness: -0.2,
      },
      data: [
        {
          //   fromName: "安徽",
          //   toName: "河南",
          coords: [
            [117.226884, 31.849254],
            [113.619717, 33.902648],
            [112.271301, 30.987527],
          ],
        },
      ],
    },
  ],
})
 

在Vue mounted 生命周期初始化echarts实例