echarts展示市级地图2d和3d

• 安装echarts

npm i echarts -s

• 安装3d插件

npm i echarts-gl -s

• 获取json地图数据 （https://datav.aliyun.com/portal/school/atlas/area_selector） 这里我放在@/views/utils文件夹下

加载2D地图

<template>
  <div class="my-map-box">
    <div id="myMap" class="my-map-charts"></div>
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';
// 获取地图数据
let json = require('@/utils/hangzhou.json');
let myChartMap: any = null;//地图
let optionMap = {
  geo: {
    map: '浙江杭州',
    roam: false,
    zoom: 1.2,
    scaleLimit: {  //缩放级别限制
      min: 1,
      // max: 12
    },
    aspectScale: 1.1, //地图的长宽比
    itemStyle: {
      opacity: 1,
      borderWidth: 1,
      borderColor: '#a0cfff', //边框颜色
      areaColor: '#337ecc', //地图区域颜色
      shadowColor: '#000',
      // shadowOffsetX: 1,
      // shadowOffsetY: 1,
    },
    label: {
      color: '#fff',
      fontWeight: 'bold',
      show: true,
    },
    emphasis: {
      itemStyle: {
        show: 'true',
        borderWidth: 1,
        borderColor: '#a0cfff', //边框颜色
        areaColor: '#337ecc66', //鼠标移上去的颜色
      },
      label: {
        color: '#fff',
        fontWeight: 'bold',
        show: true,
      }
    },
  },
  series: {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    symbolSize: 5,
    rippleEffect: { //坐标点动画
      period: 3,
      scale: 5,
      brushType: 'fill'
    },
    label: {
      normal: {
        show: true,
        position: 'right',
        formatter: '{b}',
        color: 'orange',
        fontWeight: "bold",
        fontSize: 18
      }
    },
    data: [{
      name: "标注1",
      dataList: { describe: '标注1呀呀呀' },
      value: [119.315548, 29.670309]
    },
    {
      name: "标注2",
      dataList: { describe: '标注2呀呀呀' },
      value: [118.98148, 29.359218]
    },

    ],
    itemStyle: { //坐标点颜色
      normal: {
        show: true,
        color: 'orange',
        shadowBlur: 10,
        shadowColor: '#fff'
      },
    },
  },
}
// 初始化地图
const initMap = () => {
  myChartMap = echarts.init(document.getElementById('myMap'));
  echarts.registerMap('浙江杭州', json);
  myChartMap.setOption(optionMap);
  window.addEventListener("resize", () => {
    myChartMap.resize();
  });
}
onMounted(() => {
  initMap()
  myChartMap.on('click', (data: any) => {
    if (data.componentType == 'series') {
      console.log(data);
    }
  });
})

</script>
<style scoped lang='less'>
.my-map-box {
  width: 99vw;
  height: 800px;
  display: flex;
  justify-content: center;
  background-color: #000;

  .my-map-charts {
    width: 900px;
    height: 600px;
  }
}
</style>

• 结果

  
  image.png

加载3D地图

<template>
  <div class="my-module3" id="echarts_map">
  </div>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';

// 获取地图数据
let cityJson = require('@/utils/hangzhou.json');
// 地图
let chart: any = null;
// 图表配置
let options: any = {};
// geo3d + map3d公用图表配置
const setting: any = {
  top: '0%',
  left: '0%',
  right: '0%',
  bottom: '0%',
  distance: 90,
  alpha: 50,
  beta: 30,
  regionHeight: 6,
}
// 适配不同尺寸浏览器，避免地图上的字号过小或过大

const getSize = (res: any) => {
  const docEl = document.documentElement;
  const clientWidth = window.innerWidth || document.documentElement.clientWidth
    || document.body.clientWidth;
  if (!clientWidth) return;
  const fontSize = 100 * (clientWidth / 1920);
  return res * fontSize;
}
//标注点--标签名样式
const markerLable = {
  show: true,
  position: 'top',
  distance: 3,
  top: 10,
  formatter: (params: any) => {
    return `{sty1|${params.data.name}}`;
  },
  rich: {
    sty1: {
      padding: getSize(0.07),
      backgroundColor: ' rgb(14, 34, 72,0.9)',
      borderWidth: 1,
      borderColor: '#163470',
      borderRadius: 2,
      fontSize: getSize(0.14),
    },
  },
}
// 获取图表配置
const getOptions = () => {
  const options = {
    tooltip: {
      show: true,
      triggerOn: 'click',
      trigger: 'item',
      extraCssText: 'width:150px;height:auto;border-radius: 1px; background: rgb(14, 34, 72,0.9);border:1px solid #163470;color:#fff',
      formatter: (params: any) => {
        console.log('tip提示', params)
        return `
        <div style="text-align: left;">
          <div style="font-size: 16px;display:flex;align-items: center;margin-bottom:6px;">
          <div style="width:3px;height:14px;background-color: #0DD2E6; border-radius: 1.5px;margin-right: 5px;"></div>
          <div>${params.name}</div>
          </div>
          <div style="font-size: 14px;">
            <span style="color: #8299BF;">地址：</span>
            <span>莫干山路</span>
          </div>
           <div style="font-size: 14px;">
            <span style="color: #8299BF;">进行中项目：</span>
            <span>多仓联动</span>
          </div>
           <div style="font-size: 14px;">
            <span style="color: #8299BF;">项目完成度：</span>
            <span>80%</span>
          </div>
           <div style="font-size: 14px;">
            <span style="color: #8299BF;">备注：</span>
            <span>哈哈</span>
          </div>
        </div>`
      }
    },
    textStyle: {
      color: '#ffffff', // 高亮时标签颜色变为 白色
      fontSize: 26, // 高亮时标签字体 变大
    },
    // 地图主要配置
    geo3D: {
      show: true,
      map: 'map',
      boxHeight: 10,
      top: setting.top,
      right: setting.right,
      left: setting.left,
      bottom: setting.bottom,
      regionHeight: setting.regionHeight, // 三维高度
      shading: 'realistic',
      realisticMaterial: {
        textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
      },
      label: { // 标签的相关设置
        show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
        distance: 20,
        formatter(params: any) {
          return `{sty1|${params.name}}`
        },
        rich: {
          sty1: {
            color: '#ffffff',
            fontSize: getSize(0.16),
            align: 'center',
          },
        },
      },
      itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
        color: '#4282da', // 地图板块的颜色
        // color: '#00F6FF',
        opacity: 1, // 图形的不透明度 [ default: 1 ]
        borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
        borderColor: '#6be1f1', // 图形描边的颜色。[ default: #333 ]
      },
      emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
        label: { // label高亮时的配置
          show: true,
          formatter(params: any) {
            return `{sty1|${params.name}}`
          },
          rich: {
            sty1: {
              color: 'blue',
              fontSize: getSize(0.18),
              align: 'center',
            },
          },
        },
      },
      light: {
        // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
        main: {
          // 场景主光源的设置，在 globe 组件中就是太阳光。
          color: "#fff", //主光源的颜色。[ default: #fff ]
          intensity: 2.5, //主光源的强度。[ default: 1 ]
          shadow: true, //主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
          // shadowQuality: 'low',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
          alpha: 20, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
          beta: 100, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
        },
      },
      viewControl: {
        projection: 'perspective',
        distance: setting.distance,
        beta: setting.beta,
        alpha: setting.alpha,
        maxDistance: 100,
        minDistance: 10,
      },
    },
    series: [
      // 叠加地图上需要显示的数据，插牌
      {
        type: 'scatter3D',
        name: 'scatter3D',
        coordinateSystem: 'geo3D',
        symbol: 'path://M512 66.56c-175.31904 0-317.44 142.12096-317.44 317.44 0 175.31904 175.13984 361.22624 317.44 448.7936 164.19328-120.40704 317.44-273.47968 317.44-448.7936 0-175.31904-142.12096-317.44-317.44-317.44z m0 437.84704c-63.47776 0-114.93376-51.46112-114.93376-114.93376 0-63.47776 51.46112-114.93376 114.93376-114.93376 63.47776 0 114.93376 51.456 114.93376 114.93376S575.47776 504.40704 512 504.40704z',
        showAllSymbol: true,
        silent: false,
        symbolSize: [28, 33],
        // symbolRotate: 10,
        // symbolSize: 28,
        itemStyle: {
          color: '#da8c07',
          animationDuration: 0,
          opacity: 1,
        },
        data: [
          {
            name: "标注1",
            value: [119.315548, 29.670309, 50],
            label: markerLable,
            emphasis: {
              label: markerLable,
            }
          },
          {
            name: "标注2333",
            value: [118.98148, 29.359218, 50],
            label: markerLable,
            emphasis: {
              label: markerLable,
            }
          },
        ],
      },
    ],
  };
  return options;
}

// 初始化图标
const initMap = () => {
  if (chart) {
    chart.clear();
  }
  let mapDiv: any = document.getElementById('echarts_map')
  chart = echarts.init(mapDiv);
  chart.showLoading({
    maskColor: 'rgba(0, 0, 0, 0.2)',
  });
  echarts.registerMap('map', cityJson);
  chart.hideLoading();
  options = getOptions();
  chart.setOption(options);
}

onMounted(() => {
  initMap()
})

</script>
<style scoped lang='less'>
.my-module3 {
  box-sizing: border-box;
  height: 800px;

  .my-title {
    text-align: left;
    color: #fff;
    margin-bottom: 10px;
  }

  .my-content {
    width: 100%;
    height: 95%;
    text-align: left;
    // background-color: #00000055;
    // color:#fa4f04;
  }
}

// 标注弹窗
.marker-tip-box {
  width: 200px;
  height: 100px;
  background-color: transparent;
  text-align: left;
  border-radius: 1px;
  background-color: #00000088;

  .tip-name {
    font-size: 16px;
    color: rgb(14, 34, 72);
  }

  .tip-con-item {
    font-size: 14px;

    .item-title {
      color: #8299BF;
    }
  }
}
</style>

• 结果

  
  image.png