Highcharts实现地图下钻功能

最新推荐文章于 2024-04-23 09:58:36 发布

weixin_34319111

最新推荐文章于 2024-04-23 09:58:36 发布

阅读量1.9k

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5b98861d5188255c3a2d2d8c

版权

项目有时候需要显示某个省到州的地图下钻，在每层地图可能需要展示一些业务信息。事实上Highcharts已经提供了完整的功能实现：jshare.com.cn/highmaps/FS…。他提供了全国到省州市的免费地图数据，而二级县的数据则是收费的。下面以云南省为例，如何本地开发一个省到州县的下钻功能。

获取数据

首先来看GEOJSON数据是如何获取的，我们从中国地图下钻的云南省数据获取地址为：data.jianshukeji.com/jsonp?filen…

可以看到其原始实现是一个JSONP的调用。那么我们本地实现的时候将这个调用结果保存到本地文件即可：主要是将上边链接返回结果剥离掉jQuery18307324838355276646_1536907807686(。为了便于演示我这里将数据保存到HTML，然后通过jQuery来加载。

代码实现

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/highmaps.js"></script>
    <script src="js/drilldown.js"></script>
    <script src="js/exporting.js"></script>
</head>
<body>
<div id="container" style="height:600px;"></div>

<script>
    Highcharts.setOptions({
        credits: {
            enabled: false
        },
        lang: {
            drillUpText: '< 返回 “{series.name}”'
        }
    });
    var map = null, basePath = 'data/';
    $.get(basePath + 'yunnan.html', function (mapdata) {
        mapdata = JSON.parse(mapdata);
        var data = [];
        // 随机数据
        Highcharts.each(mapdata.features, function (md, index) {
            var tmp = {
                name: md.properties.name,
                value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
            };
            //设置每个区域的区域底色
            //tmp.color = 'green';
            if (md.properties.drilldown) {
                tmp.drilldown = md.properties.drilldown;
            }
            data.push(tmp);
        });
        map = new Highcharts.Map('container', {
            chart: {
                events: {
                    drilldown: function (e) {
                        this.tooltip.hide();
                        console.log(e);
                        // 异步下钻
                        if (e.point.drilldown) {
                            var pointName = e.point.properties.fullname;
                            map.showLoading('下钻中，请稍后...');
                            // 获取二级行政地区数据并更新图表
                            $.get(basePath + e.point.drilldown + '.html', function (data) {
                                data = Highcharts.geojson(JSON.parse(data));
                                Highcharts.each(data, function (d) {
                                    if (d.properties.drilldown) {
                                        d.drilldown = d.properties.drilldown;
                                    }
                                    d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                });
                                map.hideLoading();
                                map.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                                map.setTitle({
                                    text: pointName
                                });
                            });
                        }
                    },
                    drillup: function () {
                        map.setTitle({
                            text: '云南省'
                        });
                    }
                }
            },
            title: {
                text: '指标数据'
            },
            subtitle: {
                useHTML: true,
                text: '指标数据'
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
             tooltip: {
                 useHTML: true,
                 headerFormat: '<table><tr><td>{point.name}</td></tr>',
                 pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                 '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                 '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                 '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>',
                 footerFormat: '</table>'
             },
            // colorAxis: {
            //     min: 0,
            //     minColor: '#fff',
            //     maxColor: '#006cee',
            //     labels:{
            //         style:{
            //             "color":"red","fontWeight":"bold"
            //         }
            //     }
            // },
            series: [{
                data: data,
                mapData: mapdata,
                joinBy: 'name',
                name: '指标',
                    states: {
                        hover: {
                            color: '#a4edba'
                        }
                    },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }]
        });
    });
</script>
</body>
</html>复制代码

实现很简单，其中basePath为地图数据所在相对路径。其他逻辑都很简单就不做赘述了。如果需要其他地域的地图，按照格式下载数据即可。

在线演示和代码：gongxufan.github.io/map/map.htm…

weixin_34319111

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Highcharts实现地图下钻功能

项目有时候需要显示某个省到州的地图下钻，在每层地图可能需要展示一些业务信息。事实上Highcharts已经提供了完整的功能实现：jshare.com.cn/highmaps/FS…。他提供了全国到省州市的免费地图数据，而二级县的数据则是收费的。下面以云南省为例，如何本地开发一个省到州县的下钻功能。获取数据首先来看GEOJSON数据是如何获取的，我们从中国地图下钻的云南省数据获取地址为：...
复制链接

扫一扫