使用highmaps制作中国地图
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。那接下来去请求市的信息。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17$.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 |
$.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
使用highmaps制作中国地图的更多相关文章
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- 使用echarts简单制作中国地图,echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- 用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
- 用Python制作中国地图、地球平面图及球形图
绘制地图在python中主要用到的 basemap 库,这个库是 matplotlib 库中一个用于在 Python 中绘制地图上的 2D 数据的工具包. 首先安装库: 1.安装 geos 库:Pyt ...
- D3.js 制作中国地图
from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of ...
- echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- 中国地图(Highmaps)
1.中国地图省份和市 调用的包( <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js">< ...
随机推荐
- jQuery 数据 - jQuery.data() 方法
打印出 hi
- WCF-异步调用和两种客户端形式
当发布一个服务端之后,客户端可以通过服务端的元数据,用VS2010添加服务引用的方式生成对应的代码.并且可以选择生成相应的异步操作. WCF实现代码,Add操作延时5秒后再返回结果. [Service ...
- SSRS 报表中的Chart在IE中不显示
解决办法: 重启SSRS服务...
- Python——爬虫学习1
爬虫了解一下 网络爬虫(Web crawler),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. Python的安装 本篇教程采用Python3 来写,所以你需要给你的电脑装上Python ...
- 第N次学习javaIO之后
io按流分 输入流.输出流 io按类型分(是类型吧) 字节流.字符流 ------------------------------------- 先说说一直以来混淆什么时候用输入流,什么时候用输出流. ...
- PowerDesigner16导出SQL时如何添加注释
添加注释方法 https://jingyan.baidu.com/article/47a29f24652e44c0142399c3.html 重点是修改value的值 alter table [%QU ...
- jQuery bind()与delegate()的区别
笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ...
- 移动端HTML5实现文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术 ...
- Windows安装ActiveMQ记录
1.下载压缩包(activeMQ应用要基于jdk服务上,安装本软件时,最好已经安装了jdk并且配置好了环境变量) 下载5.12.2版本:http://activemq.apache.org/activ ...
- Telnet初试(本地测试)
win7下开启Telnet功能: 控制面板-程序和功能- 开启服务 然后回车 这样即可完成一次请求