如何使用highmaps制作中国地图

如何使用highmaps制作中国地图

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

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

如何使用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-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文件获得,然后遍历获得所有省会的信息,并给valuedrilldown 赋值,注意了,这里this.drilldown 是用来点击地图传值用的,例子用的是hc-key 节点,当然也可以自己随意定义

    1234
    $.each(data, function (i) {    this.drilldown = this.properties['drill-key'];    this.value = i; });
  • 接着重点说说点击地图的事件drilldowndrilldown里需要重新获取对应省会的所有市县的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预览

上一篇:magento中根据用户的id获取用户的所有订单以及每个订单中的物品 以及物品的相关属性


下一篇:如何在Java 环境下使用 HTTP 协议收发 MQ 消息