ECharts绘制地图怎么做?3D地球如何配置?

wowwwai GIS研习社 · 工具流程与项目排障

很多 WebGIS 初学者会问：ECharts绘制地图怎么做?3D地球如何配置? 如果你已经会用 ECharts 画柱状图、折线图，但一到中国地图、省市地图、迁徙线或者 3D 地球就不知道从哪里开始，通常问题不在图表本身，而在地图数据、坐标格式、组件依赖和配置项没有理清。

本文以 GIS 读者常见的业务场景为主线，讲清楚 ECharts 绘制地图的基本流程，并给出 3D 地球配置的可复用示例。你可以把它当作一个入门模板，用于行政区专题图、点位分布图、飞线图、全球态势展示和 WebGIS 可视化大屏。

引言：ECharts 绘制地图先分清二维地图和 3D 地球

在 ECharts 里做地图可视化，常见有两类需求：

• 二维地图：使用 GeoJSON 行政区边界，绘制中国地图、省市地图、区县地图、分级设色图、点位图、飞线图。
• 3D 地球：使用 echarts-gl 扩展，通过 globe 组件展示全球背景、三维飞线、散点和轨迹。

这两类看起来都叫“地图”，但底层配置不一样。二维地图通常依赖 geo 或 series-map，而 3D 地球依赖 echarts-gl 的 globe、lines3D、scatter3D 等组件。

背景：为什么 ECharts 地图经常显示不出来

很多人复制了一段 ECharts 地图代码，页面却一片空白，常见原因有以下几类：

• 没有引入正确版本的 echarts。
• 使用 3D 地球时没有额外引入 echarts-gl。
• 地图 GeoJSON 数据没有加载成功，浏览器控制台出现 404 或跨域错误。
• 调用 echarts.registerMap() 的时机早于 GeoJSON 加载完成。
• 容器 div 没有宽高，导致图表初始化后不可见。
• 数据中的行政区名称和 GeoJSON 中的 properties.name 对不上。
• 经纬度坐标顺序写反，把 [经度, 纬度] 写成了 [纬度, 经度]。

从 GIS 角度看，ECharts 地图显示失败并不只是前端问题，也和地图数据格式、行政区名称匹配、坐标顺序、投影理解有关。ECharts 常用的地理坐标数组是 [longitude, latitude]，也就是先经度、后纬度。

原理：ECharts 地图配置的核心结构

ECharts 绘制地图的核心可以理解为三层：

1. 地图底图：GeoJSON 行政边界，或者 3D 地球的纹理背景。
2. 空间定位：二维地图用行政区名称或经纬度坐标定位，3D 地球用经纬度定位。
3. 专题表达：通过颜色、大小、线条、动画、标签表达数值或流向。

二维行政区专题图一般使用 series.type = 'map'。如果要叠加点、线，可以再配合 geo 组件和 scatter、effectScatter、lines 系列。

3D 地球不使用 registerMap 注册行政区边界，而是通过 globe 配置地球表面，再使用 scatter3D、lines3D 等系列叠加数据。它更适合全球尺度展示，不适合精确行政区制图。

步骤：ECharts 绘制二维地图怎么做

步骤 1：准备页面容器

地图容器必须有明确宽高，否则 ECharts 初始化后无法显示。

<div id="map" style="width: 100%; height: 600px;"></div>

步骤 2：引入 ECharts

可以使用本地文件，也可以使用 CDN。生产环境建议下载到本地并固定版本，避免外部 CDN 变动影响页面。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

步骤 3：加载 GeoJSON 地图数据

二维行政区地图需要 GeoJSON 边界数据。下面示例假设你已经有一个 china.json 文件。

const chart = echarts.init(document.getElementById('map'));

fetch('/data/china.json')
  .then(response => response.json())
  .then(chinaJson => {
    echarts.registerMap('china', chinaJson);

    const option = {
      tooltip: {
        trigger: 'item'
      },
      visualMap: {
        min: 0,
        max: 100,
        left: 20,
        bottom: 20,
        text: ['高', '低'],
        calculable: true
      },
      series: [
        {
          name: '示例指标',
          type: 'map',
          map: 'china',
          roam: true,
          label: {
            show: true,
            fontSize: 10
          },
          data: [
            { name: '北京市', value: 80 },
            { name: '上海市', value: 70 },
            { name: '广东省', value: 95 },
            { name: '四川省', value: 60 }
          ]
        }
      ]
    };

    chart.setOption(option);
  });

这里最关键的是 echarts.registerMap('china', chinaJson)。注册名 china 要和 series.map 保持一致。

步骤 4：检查行政区名称是否匹配

如果地图有边界但没有颜色，通常是数据名称对不上。例如 GeoJSON 中是“北京市”，你的数据却写成“北京”，就无法匹配。

可以打开 GeoJSON 文件，查看每个要素的属性字段：

{
  "type": "Feature",
  "properties": {
    "name": "北京市"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": []
  }
}

如果你的 GeoJSON 名称字段不是 name，需要在数据处理阶段统一字段，或者检查所用地图数据是否符合 ECharts 的常规要求。

步骤 5：叠加经纬度点位

如果要在地图上显示站点、门店、监测点，可以使用 geo 加 scatter。注意坐标顺序必须是 [经度, 纬度]。

const option = {
  geo: {
    map: 'china',
    roam: true,
    label: {
      show: false
    },
    itemStyle: {
      areaColor: '#e8f3ff',
      borderColor: '#3388ff'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '监测点',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbolSize: 10,
      data: [
        { name: '北京站', value: [116.4074, 39.9042, 88] },
        { name: '上海站', value: [121.4737, 31.2304, 75] },
        { name: '广州站', value: [113.2644, 23.1291, 92] }
      ]
    }
  ]
};

这里 value 的前两位是经纬度，第三位可以作为业务指标，例如空气质量指数、人口数量、销售额或事件数量。

步骤：ECharts 3D 地球如何配置

步骤 1：额外引入 echarts-gl

3D 地球不是 ECharts 核心包自带功能，需要引入 echarts-gl。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

如果只引入 echarts，配置 globe 时会没有效果，控制台也可能出现组件不存在的相关错误。

步骤 2：准备 3D 容器

<div id="globe" style="width: 100%; height: 700px;"></div>

步骤 3：配置基础 3D 地球

下面是一个可运行的 3D 地球基础配置。纹理图片可以替换为你自己的地球底图、夜光图或专题栅格图。

const globeChart = echarts.init(document.getElementById('globe'));

const option = {
  backgroundColor: '#020b1c',
  globe: {
    baseTexture: '/data/world.topo.bathy.200401.jpg',
    heightTexture: '/data/world.topo.bathy.200401.jpg',
    displacementScale: 0.04,
    shading: 'realistic',
    environment: '#020b1c',
    realisticMaterial: {
      roughness: 0.8,
      metalness: 0
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.4
      }
    },
    viewControl: {
      autoRotate: true,
      autoRotateSpeed: 3,
      distance: 180
    }
  }
};

globeChart.setOption(option);

baseTexture 是地球表面的基础纹理，heightTexture 可以提供地形起伏效果。对于普通 WebGIS 大屏，如果不强调地形，完全可以只使用一张较轻量的地球纹理图，以减少加载压力。

步骤 4：在 3D 地球上添加点位

在 3D 地球上显示城市点位，可以使用 scatter3D。坐标仍然是 [经度, 纬度, 高度或数值]。

const option = {
  backgroundColor: '#020b1c',
  globe: {
    baseTexture: '/data/world.topo.bathy.200401.jpg',
    shading: 'realistic',
    viewControl: {
      autoRotate: true,
      distance: 180
    }
  },
  series: [
    {
      type: 'scatter3D',
      coordinateSystem: 'globe',
      symbolSize: 8,
      itemStyle: {
        color: '#ffcc00'
      },
      data: [
        [116.4074, 39.9042, 10],
        [121.4737, 31.2304, 10],
        [-74.0060, 40.7128, 10],
        [2.3522, 48.8566, 10]
      ]
    }
  ]
};

globeChart.setOption(option);

步骤 5：在 3D 地球上添加飞线

全球航线、物流路线、网络访问来源等场景，可以用 lines3D 表达。

const option = {
  backgroundColor: '#020b1c',
  globe: {
    baseTexture: '/data/world.topo.bathy.200401.jpg',
    shading: 'realistic',
    viewControl: {
      autoRotate: true,
      distance: 180
    }
  },
  series: [
    {
      type: 'lines3D',
      coordinateSystem: 'globe',
      effect: {
        show: true,
        trailWidth: 2,
        trailLength: 0.2,
        trailOpacity: 0.8,
        trailColor: '#00ffff'
      },
      lineStyle: {
        width: 1,
        color: '#00ffff',
        opacity: 0.5
      },
      data: [
        {
          coords: [
            [116.4074, 39.9042],
            [-74.0060, 40.7128]
          ]
        },
        {
          coords: [
            [121.4737, 31.2304],
            [2.3522, 48.8566]
          ]
        }
      ]
    }
  ]
};

globeChart.setOption(option);

如果飞线位置明显跑偏，优先检查经纬度顺序、坐标是否为 WGS84 经纬度，以及是否误用了投影坐标。ECharts 的地理可视化通常需要经纬度坐标，不适合直接传入 Web Mercator 米制坐标。

常见坑：ECharts 地图和 3D 地球最容易出错的地方

1. 容器没有高度

这是最常见问题。地图容器如果高度为 0，即使配置完全正确，也看不到任何图形。

<div id="map" style="width: 100%; height: 600px;"></div>

2. registerMap 的名称不一致

注册地图时写的是 echarts.registerMap('china', data)，那么 series.map 或 geo.map 也必须写 china。

echarts.registerMap('china', chinaJson);

series: [
  {
    type: 'map',
    map: 'china'
  }
]

3. 行政区名称不一致

专题图数据中的 name 必须和 GeoJSON 属性中的名称一致。省市区县数据尤其容易出现简称、全称混用的问题。

• GeoJSON：内蒙古自治区，数据写成 内蒙古，可能无法匹配。
• GeoJSON：广西壮族自治区，数据写成 广西，可能无法匹配。
• GeoJSON：北京市，数据写成 北京，可能无法匹配。

4. 经纬度顺序写反

GIS 软件里常说纬度、经度，但 ECharts 坐标数组通常写作 [经度, 纬度]。例如北京应写为：

[116.4074, 39.9042]

不要写成：

[39.9042, 116.4074]

5. 3D 地球忘记引入 echarts-gl

globe、scatter3D、lines3D 依赖 echarts-gl。如果没有引入，3D 地球配置不会正常工作。

6. 图片纹理路径错误或太大

3D 地球常用纹理图。如果路径 404，地球可能显示异常。如果图片太大，首屏加载会明显变慢。建议根据展示屏幕分辨率合理压缩纹理图。

7. 把 ECharts 当作专业 GIS 引擎

ECharts 很适合数据可视化和大屏展示，但它不是完整的 GIS 平台。如果你需要复杂空间查询、瓦片地图、矢量切片、坐标转换、要素编辑，应该考虑 Leaflet、OpenLayers、MapLibre GL JS 或 Cesium。

方法比较：二维地图、3D 地球和专业 WebGIS 框架怎么选

方案	适合场景	优点	限制
ECharts 二维地图	行政区专题图、点位分布、简单飞线、大屏展示	配置简单，图表能力强，适合统计指标表达	不适合复杂 GIS 编辑、瓦片底图和空间分析
ECharts 3D 地球	全球态势、航线展示、网络流向、视觉大屏	视觉效果好，配置比 Cesium 简单	精确三维 GIS 能力有限，不适合严肃地理分析
Leaflet	轻量 WebGIS 地图、点线面展示、瓦片底图	生态成熟，上手快，插件多	三维能力弱，复杂矢量渲染性能有限
OpenLayers	专业二维 WebGIS、投影、图层管理、空间交互	GIS 能力较强，支持多种数据源	配置复杂度高于 ECharts 和 Leaflet
Cesium	三维地球、倾斜摄影、地形、3D Tiles	真正面向三维地理空间场景	学习成本和资源消耗较高

简单判断：如果你的目标是“把统计数据好看地放到地图上”，优先用 ECharts。如果你的目标是“做一个真正可交互的 GIS 地图系统”，应优先考虑 OpenLayers、Leaflet 或 Cesium。

检查清单：发布前逐项确认

• 页面中是否正确引入 echarts？
• 如果使用 3D 地球，是否引入 echarts-gl？
• 地图容器是否设置了明确的宽度和高度？
• GeoJSON 文件路径是否能在浏览器中直接访问？
• registerMap 的名称是否和 map 配置一致？
• 专题数据的 name 是否和 GeoJSON 行政区名称一致？
• 经纬度坐标是否为 [经度, 纬度]？
• 坐标是否为 WGS84 经纬度，而不是投影坐标米值？
• 3D 地球纹理图片是否存在，大小是否合理？
• 窗口尺寸变化时是否调用了 chart.resize()？

推荐在页面中加入自适应 resize：

window.addEventListener('resize', function () {
  chart.resize();
});

如果同一个页面既有二维地图又有 3D 地球，需要分别 resize：

window.addEventListener('resize', function () {
  mapChart.resize();
  globeChart.resize();
});

FAQ：ECharts 绘制地图和 3D 地球常见问题

ECharts 绘制地图必须要 GeoJSON 吗？

如果是行政区面状地图，通常需要 GeoJSON 或已经注册好的地图数据。如果只是画经纬度散点，也可以使用 geo 地图作为底图，再叠加点位。没有地图边界数据时，行政区专题图无法正常绘制。

ECharts 中国地图显示空白怎么办？

先检查容器宽高，再检查 GeoJSON 是否加载成功，然后检查是否调用了 echarts.registerMap()。如果边界能显示但颜色没有匹配，重点检查数据中的行政区名称。

ECharts 3D 地球为什么不显示？

最常见原因是没有引入 echarts-gl，其次是容器没有高度、纹理图片路径错误、浏览器 WebGL 支持异常。可以先用最简单的 globe 配置测试，再逐步添加飞线和点位。

3D 地球可以显示中国省界吗？

ECharts 3D 地球主要适合全球尺度可视化，不是专门用来展示精细行政边界的三维 GIS 引擎。如果需要精细省界、地形、三维瓦片、空间量测等能力，更建议使用 Cesium。

ECharts 地图的坐标系是什么？

常用经纬度数据一般按 WGS84 经纬度理解，坐标数组写作 [经度, 纬度]。不要直接把 EPSG:3857 或其他投影坐标的米制数值传给 ECharts 地理坐标系列。

省市区县地图数据从哪里来？

可以使用合法来源的行政区 GeoJSON 数据，或由 GIS 软件从权威边界数据转换而来。实际项目中要注意数据授权、行政区划时效性和边界精度，不建议随意使用来源不明的数据作为正式成果。

结论：先做对数据和配置，再追求地图效果

ECharts绘制地图怎么做?3D地球如何配置? 这个问题可以拆成两条路线：二维地图重点是 GeoJSON、registerMap、行政区名称匹配和经纬度点位；3D 地球重点是 echarts-gl、globe、纹理图片、scatter3D 和 lines3D。

对 GIS 学习者来说，不要只复制配置项。你更应该理解地图数据从哪里来、坐标顺序为什么重要、行政区名称为什么会匹配失败，以及 ECharts 和专业 WebGIS 框架的边界在哪里。这样做出来的地图不仅能显示，而且更稳定、更容易维护。