开发一个地图图表，摸鱼三小时编码十分钟，还被夸效率太高了

大风写全栈

发布于 2025-01-07 13:53:19

8300

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

地图图表

最近一直在用ECharts，JS实现的一个图表库。

功能强大，使用简单。文档和用户也多。

早年是百度开发的，后期捐赠给Apache了（就是Tomcat、Maven、Kafka那个Apache）。

Apache也是好起来了，收到百度的捐赠（玩笑~）

做柱状图、折线图、饼图这些比较多，地图接触很少。

趁着这次有地图图表开发需求，跟着学习和记录一下。

整体比较简单，要实现地图图表首要条件是，你需要哪个区域的地图。

把区域明确之后，需要找到对应区域的GeoJSON数据。

把GeoJSON数据通过网络或者离线方式加载到ECharts里面，大功告成。

多说无益，来个例子。

确定区域

这里我以国内城市举例，比如我要实现一个成都市的地图图表。

先给出实现效果：

区域确定之后，就可以去找GeoJSON了。

GeoJSON

GeoJSON 是一种用于编码各种地理数据结构的格式，基于 JSON 标准。它主要用于表示简单特征对象及其非空间属性。

主要的特点是：

基于 JSON: GeoJSON 使用 JSON 格式，易于阅读和解析；
支持多种几何类型:支持点（Point）、多点（MultiPoint）、线（LineString）、多线（MultiLineString）、多边形（Polygon）、多面体（MultiPolygon）等多种几何类型；
包含属性信息: 每个地理特征可以包含额外的属性信息，这些信息以键值对的形式存储在 properties 字段中；
灵活的应用场景: 广泛应用于地图服务、数据分析、可视化等领域。

获取成都市GeoJSON数据

DataV有一个工具可以直接提取指定区域的GeoJSON数据。

地址是（1）

操作步骤比较简单，在地图上先选择省，然后选择市。选择到市之后就停下。

右侧有个JSON API，复制一下json文件地址。

比如成都市的区域JSON地址是（以实际为准，可能会有变动）（2）

开发图表

例子里面用了jQuery来加载GeoJSON数据（也可以下载下来离线加载），使用CDN方式加载ECharts。

还对图表的默认颜色做了修改。

人口数据是随机生成的，仅用作示例。

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 成都市地图</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #map {
            width: 80%;
            height: 80%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100_full.json',
                type: 'GET',
                dataType: 'json',
                success: function(geoJsonData) {
                    var myChart = echarts.init(document.getElementById('map'));

                    echarts.registerMap('chengdushi', geoJsonData);

                    const populationData = [
                        { name: '锦江区', value: 1430756 },
                        { name: '青羊区', value: 1293813 },
                        { name: '金牛区', value: 1817434 },
                        { name: '武侯区', value: 2046029 },
                        { name: '成华区', value: 1743267 },
                        { name: '龙泉驿区', value: 2061565 },
                        { name: '青白江区', value: 1203173 },
                        { name: '新都区', value: 2125866 },
                        { name: '温江区', value: 1766244 },
                        { name: '双流区', value: 2003363 },
                        { name: '郫都区', value: 2032461 },
                        { name: '新津区', value: 1134217 },
                        { name: '简阳市', value: 1535676 },
                        { name: '都江堰市', value: 1095665 },
                        { name: '彭州市', value: 1424323 },
                        { name: '邛崃市', value: 1125066 },
                        { name: '崇州市', value: 1133552 },
                        { name: '金堂县', value: 1358169 },
                        { name: '大邑县', value: 1024331 },
                        { name: '蒲江县', value: 605501 }
                    ];

                    var option = {
                        title: {
                            text: '成都市地图-模拟数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return `${params.name}<br/>(测试数据)人口总量: ${params.value}`;
                            }
                        },
                        series: [
                            {
                                name: '成都市',
                                type: 'map',
                                mapType: 'chengdushi',
                                label: {
                                    show: true,
                                    color: '#fff'
                                },
                                itemStyle: {
                                    areaColor: '#4C60FF',
                                    color: '#4C60FF',
                                    borderColor: '#fff',
                                    emphasis: {
                                        areaColor: '#293FFF',
                                        color: '#fff'
                                    }
                                },
                                data: populationData
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                error: function(xhr, status, error) {
                    console.error('加载 GeoJSON 数据失败:', error);
                }
            });
        });
    </script>
</body>
</html>

简单把？

1: DataV获取GeoJSON

https://datav.aliyun.com/portal/school/atlas/area_selector

2: 成都市GeoJSON（可能会变动，以实际为准）

https://geo.datav.aliyun.com/areas_v3/bound/510100_full.json

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-01-03，如有侵权请联系 cloudcommunity@tencent.com 删除

编码