概述

本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现：
1、点击地图展示下一级地图；
2、通过区域导航可返回上一级地图；

效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <style>
        html, body, #map{
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        .zone-nav{
            position: absolute;
            top:10px;
            left: 10px;
            padding: 5px 10px;
            z-index: 99;
            background: #fff;
            box-shadow: 1px 1px 2px #ccc;
            border-radius: 4px;
        }
        .zone-nav a{
            font-size: 13px;
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<div class="zone-nav" id="nav">
    <a href="#" id="boundry" title="全国" index="0">全国</a>
    <a href="#" id="province" index="1"></a>
    <a href="#" id="city" index="2"></a>
</div>
<div id="map"></div>
<script src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
<script src="../../plugin/echart3/echarts-all-3.js"></script>
<script>
    var mapDatas = {
        "全国": "china.json",
    };
    var index = 0,
        chart = null;

    addMap("全国");

    $("#boundry, #province, #city").on("click", function () {
        index = parseInt($(this).attr("index"));
        addMap($(this).attr("title"));
    });


    function addMap(zone) {
        switch (index){
            case 1:{
                $("#province").html(">>"+zone).attr("title", zone);
                $("#city").html("");
                break;
            }
            case 2:{
                $("#city").html(">>"+zone).attr("title", zone);
                break;
            }
            default:{
                $("#province").html("");
                $("#city").html("");
                break;
            }
        }

        if(chart) chart.dispose();
        chart = echarts.init(document.getElementById('map'));
        chart.on('click', function (result) {
            index++;
            if(index<3){
                addMap(result.name);
            }
        });

        var url = "./mapdata/";
        if(index===1){//省级
            url+="geometryProvince/";
        }else if(index===2){
            url+="geometryCouties/";
        }
        url+=mapDatas[zone];

        $.get(url, function (mapdata) {
            var features = mapdata.features;
            for(var i=0;i<features.length;i++){
                var feature = features[i];
                if(!mapDatas[feature.properties.name]){
                    var jsonfile = feature.properties.id;
                    if(index===1) jsonfile+="00";
                    mapDatas[feature.properties.name] = jsonfile + ".json";
                }
            }

            echarts.registerMap(zone, mapdata);

            chart.setOption({
                roam: true,
                series: [{
                    type: 'map',
                    map: zone,
                    scaleLimit: { min: 0.8, max: 1.9 },//缩放
                    mapLocation:{
                        y:60
                    },
                    itemSytle:{
                        emphasis:{label:{show:false}}
                    },
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data : []
                }]
            });
        });
    }
</script>
</body>
</html>

说明：

数据组织结构如下
├─mapdata
│ ├─china.json
│ ├─geometryCouties
│ │ ├─110100.json
│ │ ├─120100.json
│ │ └─…
│ ├─geometryProvince
│ │ ├─11.json
│ │ ├─12.json
│ │ └─…

2. 数据和源代码可从地址获得。

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	[email protected]
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

“GIS讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。
知识星球二维码

LZUGIS

echart实现地图的逐级钻取

概述

效果

实现代码

说明：

2. 数据和源代码可从地址获得。

猜你喜欢