map---显示地区地图

通过Echarts显示地图：

第一步：获取地图数据

获取地址：

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

比如：曲靖，获取这个json

image

第二步：具体的代码

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>

这里：qujing.json 就是刚刚获取到的json

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 曲靖市地图示例</title>
<!-- 引入 ECharts 库 -->
<script type="text/javascript" src="./echarts.js"></script>
<style>
    #main {
        width: 800px;
        height: 600px;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main"></div>
    <script type="text/javascript">
        // 假设 qujing.json 是曲靖市的 GeoJSON 数据文件
        // 在实际应用中，你需要将此文件放在正确的路径下，或通过其他方式获取数据
        fetch('qujing.json')
            .then(response => response.json())
            .then(kunmingJson => {
                // 注册地图数据
                echarts.registerMap('kunming', kunmingJson);

                // 初始化 ECharts 实例
                var myChart = echarts.init(document.getElementById('main'));

                // 配置图表选项
                var option = {
                    title: {
                        text: '云南曲靖市地图'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series: [{
                        name: '曲靖市',
                        type: 'map',
                        map: 'kunming',
                        label: {
                            show: true
                        },
                        data: [
                            // 这里可以添加曲靖市下属区域的数据
                            // 例如：{name: '五华区', value: 100},
                            // {name: '盘龙区', value: 200}
                        ]
                    }]
                };

                // 渲染图表
                myChart.setOption(option);
            })
            .catch(error => {
                console.error('加载地图数据失败:', error);
            });
    </script>
</body>
</html>

效果：

image

打完收工！

posted @ 2025-11-25 14:29  帅到要去报警  阅读(3)  评论(0)    收藏  举报