最简单的地图三级下钻,没有数据展示,自己可根据实际情况放入数据

首先是html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            background-color: aqua;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <div id="map" ref="myEchart"></div>

    <script src="./jquery-1.11.0.min.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./map.js"></script>
</body>

</html>
然后是js,自己写的时候不要忘记引入echarts.js和jquery.js哦;

(function () {
 
    map('100000_full', 'china')
    var num = 0
 
    function map(mapdata, tname) {
        $.ajax({
            type: "get",
            url: 'https://geo.datav.aliyun.com/areas/bound/geojson',
            data: {
                code: mapdata
            },
            dataType: "json",
            success: function (res) {
 
                console.log(res);
 
 
                var myChart = echarts.init(document.getElementById('map'));
                myChart.showLoading();
                echarts.registerMap(tname, res);
                myChart.hideLoading();
 
                // 地图
                option = {
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {}
                    },
                    geo: {
                        map: tname,
                        show: true,
                        roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#3a7fd5',
                                borderColor: '#0a53e9', //线
                                shadowColor: '#092f8f', //外发光
                                shadowBlur: 20
                            },
                            emphasis: {
                                areaColor: 'rgba(72, 152, 223 0.8)', //悬浮区背景
                            }
                        }
                    },
                };
                console.log(option)
                myChart.clear();
                myChart.setOption(option, true);
                myChart.off('click')
                myChart.on('click', function (params) {
                    num++
                    console.log(num);
                    console.log(params.name);
                    var data = []
                    for (let i = 0; i < res.features.length; i++) {
                        var obj = {}
                        const element = res.features[i];
                        obj[element.properties.name] = element.properties.adcode;
                        data.push(obj)
                    }
                    // console.log(data);
                    var mapname = params.name
                    for (let i = 0; i < data.length; i++) {
                        const element = data[i];
                        // console.log(Object.keys(element).toString());
                        if (Object.keys(element).toString() == mapname) {
                            console.log(11);
                            if (num === 3) {
                                console.log(11);
                                datamap = element[Object.keys(element).toString()]
                                map(datamap, mapname);
                            } else if (num === 4) {
                                return;
                            } else {
                                console.log(29);
                                console.log(element[Object.keys(element).toString()]);
                                datamap = element[Object.keys(element).toString()] + '_full'
                                map(datamap, mapname);
                            }
 
                        }
                    }
 
                });
            }
        });
    }
}())
　这个基本样式是之前借用一个大佬的样式,蓝色的,后续公司要求做下钻效果,就直接在此基础上做的,因为数据是公司数据,所以我摘掉了,自己可自己填充,后续有时间我也会更新一份静态数据的方法,看看你们和我上传数据的方法是否一致
另外这个方法所用的地图的json文件是网络获取的.是高德地图的,地址:http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
很多细节没加.大家可以查询echarts官方文档,根据自己的需求更改样式
还有还有,因为县区级地图要求传参不一样,我就加了个num判断,是第几级数据,但是我总觉得可能会有bug,比如网络卡的时候,连续点击什么的, 主要是我这边是不需要渲染县级地图,所以目前我也没有深入研究这个问题,大家有什么好的想法可以一起留言讨论
嗯~最后一条~我之前也找了许多地图下钻的案例都太过于复杂了,就是花里胡哨的很多,所以自己看文档搞出来的,因为做的匆忙,很多细节没有完善,也可能有少许bug,欢迎大家在评论区提出,我会不定期看的
真的是最后一条了,之前看别的大佬做的鼠标右键可以点击返回上一级,那个我没研究透 ,后来直接改成了鼠标右键从新加载中国地图的界面,有会的大佬希望能 共享一下下
(function () {
 
    map('100000_full', 'china')
    var num = 0
 
    function map(mapdata, tname) {
        $.ajax({
            type: "get",
            url: 'https://geo.datav.aliyun.com/areas/bound/geojson',
            data: {
                code: mapdata
            },
            dataType: "json",
            success: function (res) {
 
                console.log(res);
 
 
                var myChart = echarts.init(document.getElementById('map'));
                myChart.showLoading();
                echarts.registerMap(tname, res);
                myChart.hideLoading();
 
                // 地图
                option = {
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {}
                    },
                    geo: {
                        map: tname,
                        show: true,
                        roam: true,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#3a7fd5',
                                borderColor: '#0a53e9', //线
                                shadowColor: '#092f8f', //外发光
                                shadowBlur: 20
                            },
                            emphasis: {
                                areaColor: 'rgba(72, 152, 223 0.8)', //悬浮区背景
                            }
                        }
                    },
                };
                console.log(option)
                myChart.clear();
                myChart.setOption(option, true);
                myChart.off('click')
                myChart.on('click', function (params) {
                    num++
                    console.log(num);
                    console.log(params.name);
                    var data = []
                    for (let i = 0; i < res.features.length; i++) {
                        var obj = {}
                        const element = res.features[i];
                        obj[element.properties.name] = element.properties.adcode;
                        data.push(obj)
                    }
                    // console.log(data);
                    var mapname = params.name
                    for (let i = 0; i < data.length; i++) {
                        const element = data[i];
                        // console.log(Object.keys(element).toString());
                        if (Object.keys(element).toString() == mapname) {
                            console.log(11);
                            if (num === 3) {
                                console.log(11);
                                datamap = element[Object.keys(element).toString()]
                                map(datamap, mapname);
                            } else if (num === 4) {
                                return;
                            } else {
                                console.log(29);
                                console.log(element[Object.keys(element).toString()]);
                                datamap = element[Object.keys(element).toString()] + '_full'
                                map(datamap, mapname);
                            }
 
                        }
                    }
 
                });
            }
        });
    }
}())
posted @ 2021-03-22 14:47 昶羽阅读(452) 评论(0) 收藏举报
刷新页面返回顶部
昶羽

最简单的地图三级下钻,没有数据展示,自己可根据实际情况放入数据

公告
