Echarts3实例加载地图

叁歲伎倆 2021-09-17 09:22 483阅读 0赞

### 前言 ###

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

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

### 加载GeoJson的js文件显示地图 ###

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

### 加载GeoJson的json文件显示地图 ###

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

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

<!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>
        
    </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>

[https_blog.csdn.net_idomyway_article_details_85072698]: https://blog.csdn.net/idomyway/article/details/85072698
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/464522bffac64e20b7cc2b50aaf83635.png