Echarts3实例加载地图

最新推荐文章于 2024-08-05 05:00:00 发布

idomyway

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量4.1k

点赞数 1

分类专栏： Echarts 文章标签： echarts map 加载地图

本文链接：https://blog.csdn.net/idomyway/article/details/85072880

版权

Echarts 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

Echarts加载GeoJson数据生成canvas地图，可以实现地图简单的展示，获取GeoJson数据的方法见：https://blog.csdn.net/idomyway/article/details/85072698
Echarts生成地图的数据加载方式有两种：

加载GeoJson的js文件
加GeoJson的Json文件

加载GeoJson的js文件显示地图

通过js文件加载GeoJson地图数据需要在html中进行导入，如果在比较大的地图数据中，会加重网络负担，不推荐使用

加载GeoJson的json文件显示地图

我们在需要加载地图地方加载json数据，并进行注册使用，在进行展示的时候再异步加载数据。prefect

实现效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            height: 100%;
        }
        *{
            margin: 0px;
            height: 0px;
        }
        #map{
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <!--<script src="json/shandong.js"></script>-->
</head>
<body>
<div id="map"></div>
<script>
    // JS
    // var chart = echarts.init(document.getElementById('map'));
    //     var option = {
    //         title: {
    //             text: '山东地图',
    //
    //         },
    //         series: [{
    //             type: 'map',
    //             map: 'shandong',
    //             aspectScale:1,//保持原始比例
    //             roam: true,
    //             label: {
    //                 show:true,
    //                 normal: {
    //                     show: true,
    //                     color:"#000",
    //                 },
    //                 emphasis: {
    //                     show: true,
    //                     fontSize:16,
    //                     color:"#fff"
    //
    //                 }
    //             },
    //         }]
    //     };
    // chart.setOption(option);

    // JSON
    $.getJSON('./json/shandong.json', function (data) {
        echarts.registerMap('shandong', data);
        var chart = echarts.init(document.getElementById('map'));
        var option = {
            title: {
                text: '山东地图',

            },
            series: [{
                type: 'map',
                map: 'shandong',
                aspectScale:1,//保持原始比例
                roam: true,
                label: {
                    show:true,
                    normal: {
                        show: true,
                        color:"#000",
                    },
                    emphasis: {
                        show: true,
                        fontSize:16,
                        color:"#fff"

                    }
                },
            }]
        };
        chart.setOption(option);
    });
</script>

</body>
</html>