如何使用highmaps制作中国地图
带你走进 Highmaps ，本篇介绍highmap的基本用法
起初因为highmaps对中国地图的支持不够友好，没有*，澳门等，你懂的，政治问题。于是放弃了highmaps ，使用了echart的maps，毕竟国产功能也很齐全，但相比highmap，感觉echart相对比较臃肿，而且没有highmap流畅舒服。随着highmaps不断完善，highmaps已经解决了所谓的政治地域问题，特意为中国地图出了三个js版本。
China 、China with * and Macau、China with *, Macau, and *
先来个预览图：
全国地图
北京市地图展开详情
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 字段用来显示中文明显，若不需要可以下载官方的 点击此处）
地图初始化代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
$(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文件获得，然后遍历获得所有省会的信息，并给
value和drilldown赋值，注意了，这里this.drilldown是用来点击地图传值用的，例子用的是hc-key节点，当然也可以自己随意定义1234
$.each(data, function (i) { this.drilldown = this.properties['drill-key']; this.value = i; }); -
接着重点说说点击地图的事件
drilldown，drilldown里需要重新获取对应省会的所有市县的json信息。这就是为什么上面需要定义drilldown属性，根据不用的省会动态获取不同的json文件。例如我点击 北京 事件传过去的值就是 cn-bj。那接下来去请求市的信息。123456789101112131415161718192021222324
$.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预览