使用 ECharts + GeoJSON 实现地图数据展示
一、下载并准备 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 页面 / 移动端 场景下都非常通用。