如何使用highmaps制作中国地图

文章目录
  1. Highmaps 所需文件
  2. 地图初始化代码
  3. highmaps 渲染讲解
  4. highmaps 中国各城市坐标的json文件
  5. highmaps 线上DEMO
  6. 新增线上DEMO

带你走进 Highmaps ,本篇介绍highmap的基本用法

起初因为highmaps对中国地图的支持不够友好,没有台湾,澳门等,你懂的,政治问题。于是放弃了highmaps ,使用了echart的maps,毕竟国产功能也很齐全,但相比highmap,感觉echart相对比较臃肿,而且没有highmap流畅舒服。随着highmaps不断完善,highmaps已经解决了所谓的政治地域问题,特意为中国地图出了三个js版本。
China 、China with Hong Kong and Macau、China with Hong Kong, Macau, and Taiwan
先来个预览图:
全国地图

北京市地图展开详情


Highmaps 所需文件

http://code.highcharts.com/maps/highmaps.js
地图渲染的核心文件 必须引用)
http://code.highcharts.com/maps/modules/data.js
地图数据拼接及解析的核心文件 必须引用)
http://code.highcharts.com/maps/modules/drilldown.js
(地图 展开明细的核心插件,若需要点击显示省市则需要引用,反之则不需要引用)
http://sandbox.runjs.cn/uploads/rs/228/zroo4bdf/cn-china-by-peng8.js
(*中国地图主要省会的坐标及相关数据插件 必须引用,另外这个文件由本人汉化,增加drill-key 用来钻取城市地图,增加cn-name 字段用来显示中文明显,若不需要可以下载官方的 点击此处

地图初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
$(function () {
Highcharts.setOptions({
lang:{
drillUpText:"返回 > {series.name}"
}
});
var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#container').width() < 400;
// 给城市设置随机数据
$.each(data, function (i) {
this.drilldown = this.properties['drill-key'];
this.value = i;
});
//初始化地图
$('#container').highcharts('Map', {
chart : {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this;
var cname=e.point.properties["cn-name"];
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
// 加载城市数据
$.ajax({
type: "GET",
url: "http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json",
contentType: "application/json; charset=utf-8",
dataType:'jsonp',
crossDomain: true,
success: function(json) {
data = Highcharts.geojson(json);
$.each(data, function (i) {
this.value = i;
});
chart.hideLoading();

chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {

}
});
}


this.setTitle(null, { text: cname });
},
drillup: function () {
this.setTitle(null, { text: '中国' });
}
}
},
credits:{
href:"http://www.peng8.net/",
text:"www.peng8.net"
},
title : {
text : 'highmap中国地图By peng8'
},
subtitle: {
text: '中国',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
//tooltip:{
//pointFormat:"{point.properties.cn-name}:{point.value}"
//},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series : [{
data : data,
name: '中国',
dataLabels: {
enabled: true,
format: '{point.properties.cn-name}'
}
}],
drilldown: {

activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textShadow: '0 0 3px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
});

highmaps 渲染讲解

看完上面的代码,基本和highchart图表渲染的方式一样 ,说说几个需要注意的地方

  • Highcharts.maps['countries/cn/custom/cn-all-china'] 这段代码用来获取引入文件cn-china-by-peng8.js的核心json数据。
  • Highcharts.geojson 方法将 json数据转换成map需要的json格式供地图解析用。
  • 地图数据构造,这里我用了假数据,data 由引入的js文件获得,然后遍历获得所有省会的信息,并给valuedrilldown 赋值,注意了,这里this.drilldown 是用来点击地图传值用的,例子用的是hc-key 节点,当然也可以自己随意定义

    1
    2
    3
    4
    $.each(data, function (i) {
    this.drilldown = this.properties['drill-key'];
    this.value = i;
    });
  • 接着重点说说点击地图的事件drilldowndrilldown里需要重新获取对应省会的所有市县的json信息。这就是为什么上面需要定义drilldown 属性,根据不用的省会动态获取不同的json文件。例如我点击 北京 事件传过去的值就是 cn-bj。那接下来去请求市的信息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $.ajax({
    type: "GET",
    url: "http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json",
    contentType: "application/json; charset=utf-8",
    dataType:'jsonp',
    crossDomain: true,
    success: function(json) {
    data = Highcharts.geojson(json);
    $.each(data, function (i) {
    this.value = i;
    });
    chart.hideLoading();

    chart.addSeriesAsDrilldown(e.point, {
    name: e.point.name,
    data: data,
    dataLabels: {
    enabled: true,
    format: '{point.name}'
    }
    });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {}
    });

可以看到上面这段代码我根据drilldown传过来的值 请求不同的文件的json文件

highmaps 中国各城市坐标的json文件

官方只提供省会的坐标文件,但没有提供中国各市的坐标。因此我在网上fork一份中国各市坐标的json文件,需要的朋友可以下载。
点击此处前往下载

highmaps 线上DEMO

这里我把代码分享给大家 点击此处前往DEMO预览

新增线上DEMO

感谢张兄弟提供的服务端json ,有定制需求的可以联系 简数科技 https://jianshukeji.com/
简数科技提供的json结构
2017-05-02 增加新的demo 优化json结构,并增加了南海地图
最新demo

谢谢观赏,最后不懂的大家可以留言,或者给我发邮件,或者微博私信我!