项目有时候需要显示某个省到州的地图下钻,在每层地图可能需要展示一些业务信息。事实上Highcharts已经提供了完整的功能实现:https://jshare.com.cn/highmaps/FSSm7A。他提供了全国到省州市的免费地图数据,而二级县的数据则是收费的。下面以云南省为例,如何本地开发一个省到州县的下钻功能。
获取数据
首先来看GEOJSON数据是如何获取的,我们从中国地图下钻的云南省数据获取地址为:https://data.jianshukeji.com/jsonp?filename=geochina/yunnan.json&callback=jQuery18307324838355276646_1536907807686&_=1536907822218
可以看到其原始实现是一个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为地图数据所在相对路径。其他逻辑都很简单就不做赘述了。如果需要其他地域的地图,按照格式下载数据即可。