您的位置：首页 > 其它

使用highmaps制作中国地图

2015-12-27 15:37 661 查看

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-all-sar-taiwan.js
（*中国地图主要省会的坐标及相关数据插件必须引用，另外这个文件由本人汉化，加入

cn-name

字段用来显示中文明显，若不需要可以下载官方的点击此处）

Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan']

这段代码用来获取引入文件cn-

all-sar-taiwan.js

的核心json数据。

Highcharts.geojson

方法将 json数据转换成map需要的json格式供地图解析用。

地图数据构造，这里我用了假数据，data 由引入的js文件获得，然后遍历获得所有省会的信息，并给

value

和

drilldown

赋值，注意了，这里

this.drilldown

是用来点击地图传值用的，例子用的是

hc-key

节点，当然也可以自己随意定义

$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i;
});

接着重点说说点击地图的事件

drilldown

，

drilldown

里需要重新获取对应省会的所有市县的json信息。这就是为什么上面需要定义

drilldown

属性，根据不用的省会动态获取不同的json文件。例如我点击北京事件传过去的值就是 cn-bj。那接下来去请求市的信息。

$.getJSON('/uploads/rs/228/zroo4bdf/bei_jing.geo.json', function (json) {
data = Highcharts.geojson(json);
$.each(data, function (i) {
this.value = i;
});
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});

可以看到上面这段代码我请求固定的是北京市的json文件，若要动态的需要根据

drilldown

传过来的值请求不同的文件，就变成下面这样：

1
2
3

$.getJSON('https://api.github.com/repos/peng8/GeoMap/contents/json/'+ e.point.drilldown+'.json', function (json) {
//这样写 就是动态的了，根据城市的标识符 获取对应的 城市的数据
});

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

官方只提供省会的坐标文件，但没有提供中国各市的坐标。因此作者在网上fork了一份中国各市坐标

-----------------------------------------------范例----------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/maps/modules/map.js"></script>

<script src="http://code.highcharts.com/maps/modules/data.js"></script>

<script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/228/zroo4bdf/cn-china-by-peng8.js"></script>

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script type="text/javascript">

$(function () {

Highcharts.setOptions({

lang:{

drillUpText:"返回 > {series.name}"

}

});

//geojson核心数据

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;

});

//获取 point name

function getPoint(e){

console.log(e.point.name);

}

//初始化地图

$('#container').highcharts('Map', {

chart : {

events: {

drilldown: function (e) {

if (!e.seriesOptions) {

var chart = this;

/*   mapKey = 'countries/china/' + e.point.drilldown + '-all',

fail = setTimeout(function () {

if (!Highcharts.maps[mapKey]) {

chart.showLoading('<i class="icon-frown"></i> 加载失败 ' + e.point.name);

fail = setTimeout(function () {

chart.hideLoading();

}, 1000);

}

}, 10000);*/

var cname=e.point.properties["cn-name"]; //cname =获取到的 “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;//随机值，进入省份以后城市的值

this.events={};

this.events.click=getPoint;

});

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: '中国' }); //右侧 显示中国，进入省份则显示省份

}

}

},

//标题

title : {

text : '中国地图'

},

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,

stops: [

[0, '#EFEFFF'],

[0.5, Highcharts.getOptions().colors[0]],

[1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]

]

},

mapNavigation: {

enabled: true,

buttonOptions: {

verticalAlign: 'bottom'

}

},

plotOptions: {

map: {

states: {

hover: {

color: '#EEDD66'

}

}

}

},

//默认状态下，地图图表均不显示数据标签。用户需要在数据列中启用才可以。这时，需要使用配置项enabled为true

series : [{

data : data,

name: '',

dataLabels: {

enabled: true,

format: '{point.properties.cn-name}'//设置显示形式，这里显示的是 各城市名称

}

}],

drilldown: {

activeDataLabelStyle: {

color: '#FFFFFF',

textDecoration: 'none',

textShadow: '0 0 10px #000000'

},

drillUpButton: {

relativeTo: 'spacingBox',

position: {

x: 0, //水平偏移距离

y: 60

}

}

}

});

});

</script>

</head>

<body>

<div id="main">

<div id="container" style="height: 520px; min-width: 320px; max-width: 820px; margin: 0 auto"></div>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

参考自 http://bluereader.org/article/14511014

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航