使用 ECharts + GeoJSON 实现地图数据展示_前端技术_日志_DTOP

使用 ECharts + GeoJSON 实现地图数据展示

来源：本站原创发布时间：2025-12-31 15:25:07 浏览次数：次【字体：小大】

一、下载并准备 GeoJSON 地图数据

获取地图数据

1、打开阿里云 DataV · GeoAtlas 地图小工具

下载：

省级 GeoJSON
该省下所有市级 GeoJSON

2、按行政区划 code 命名

文件统一按行政区划 code 命名，例如：

650000.json   // 省级
650100.json   // 市级
650102.json   // 区县级（如需要）

二、初始化地区选择框（从省级 GeoJSON 自动生成）

1、省级 GeoJSON 中的数据结构说明

从阿里云 GeoAtlas 下载的省级 GeoJSON 中，每个市通常位于：

geoJson.features[i].properties

常用字段包括：name、adcode、level

2、读取省级 GeoJSON 并生成城市选择框

var citySelect = document.getElementById('citySelect');
var geoBasePath = '/geo/';

/**
 * 根据省级 GeoJSON 初始化城市选择框
 */
function initCitySelect(provinceCode) {
    fetch(geoBasePath + provinceCode + '.json')
        .then(res => res.json())
        .then(geoJson => {
            citySelect.innerHTML = '';

            geoJson.features.forEach(feature => {
                var props = feature.properties;

                // 只取市级
                if (props.level === 'city') {
                    var option = document.createElement('option');
                    option.value = props.adcode;
                    option.text = props.name;
                    citySelect.appendChild(option);
                }
            });

            // 默认加载第一个城市
            if (citySelect.options.length > 0) {
                loadCityMap(citySelect.value);
            }
        });
}

3、绑定城市切换事件

citySelect.addEventListener('change', function () {
    loadCityMap(this.value);
});

三、封装地图加载方法

function loadCityMap(cityCode) {
  chart.showLoading();

  fetch(`/geo/${cityCode}.json`)
    .then(res => res.json())
    .then(geoJson => {
      chart.hideLoading();
      echarts.registerMap(cityCode, geoJson);
      chart.setOption({
        geo: {
          map: cityCode
        }
      });
    });
}

四、Demo示例

1、说明

请把 GeoJSON 放在 /geo/650100.json、/geo/650200.json 等路径
GeoJSON 必须来自阿里云 GeoAtlas

2、示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>ECharts + GeoJSON 自动城市初始化 Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- ECharts -->
    <script src="/content/_common/assets/scripts/echarts.js"></script>

    <style>
        body {
            margin: 0;
            background: #f5f5f5;
            font-family: Arial, Helvetica, sans-serif;
        }
        .toolbar {
            padding: 10px;
            background: #fff;
            border-bottom: 1px solid #ddd;
        }
        #mapChart {
            width: 100%;
            height: calc(100vh - 50px);
        }
    </style>
</head>
<body>

<div class="toolbar">
    城市选择：
    <select id="citySelect"></select>
</div>

<div id="mapChart"></div>

<script>
    /*********************************
     * 基础配置
     *********************************/
    var geoBasePath = '/content/main/contentmanage/special/largescreen/geo/';
    var provinceCode = '650000'; // 省级 adcode

    var citySelect = document.getElementById('citySelect');
    var chart = echarts.init(document.getElementById('mapChart'));

    /*********************************
     * ECharts 基础 option
     *********************************/
    var baseOption = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        }
    };

    chart.setOption(baseOption);

    /*********************************
     * 从省级 GeoJSON 初始化城市选择框
     *********************************/
    function initCitySelect() {
        fetch(geoBasePath + provinceCode + '.json')
            .then(res => res.json())
            .then(geoJson => {
                citySelect.innerHTML = '';

                // 过滤并排序市级行政区
                var cities = geoJson.features
                    .filter(f => f.properties && f.properties.adcode)
                    .map(f => ({
                        name: f.properties.name,
                        code: f.properties.adcode
                    }))
                    .sort((a, b) => a.code - b.code);

                cities.forEach(city => {
                    var opt = document.createElement('option');
                    opt.value = city.code;
                    opt.text = city.name;
                    citySelect.appendChild(opt);
                });

                // 默认加载第一个城市
                if (cities.length > 0) {
                    loadCityMap(cities[0].code);
                }
            })
            .catch(() => {
                alert('省级 GeoJSON 加载失败');
            });
    }

    /*********************************
     * 加载市级地图
     *********************************/
    function loadCityMap(cityCode) {
        chart.showLoading();

        fetch(geoBasePath + cityCode + '.json')
            .then(res => res.json())
            .then(geoJson => {
                chart.hideLoading();
                echarts.registerMap(cityCode, geoJson);
                chart.setOption({
                    geo: {
                        map: cityCode,
                        roam: true,
                        label: {
                            show: true,
                            color: '#333',
                            fontSize: 12
                        },
                        itemStyle: {
                            areaColor: '#ffffff',
                            borderColor: '#666'
                        },
                        emphasis: {
                            label: {
                                color: '#000'
                            },
                            itemStyle: {
                                areaColor: '#e6f7ff'
                            }
                        }
                    }
                });
            })
            .catch(() => {
                chart.hideLoading();
                alert('市级 GeoJSON 加载失败：' + cityCode);
            });
    }

    /*********************************
     * 城市切换事件
     *********************************/
    citySelect.addEventListener('change', function () {
        loadCityMap(this.value);
    });

    /*********************************
     * 初始化入口
     *********************************/
    initCitySelect();

    // 自适应
    window.addEventListener('resize', function () {
        chart.resize();
    });
</script>

</body>
</html>

效果预览图：

五、总结

通过 ECharts + GeoJSON + 行政区划 code 的组合，可以非常稳定地实现多级地图展示，并方便后续叠加：

风险等级
温度数据
统计图联动

这套方式在阿里云 DataV 大屏 / 普通 HTML 页面 / 移动端场景下都非常通用。

前端技术

使用 ECharts + GeoJSON 实现地图数据展示

相关内容