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

  • $.each(data, function (i) {
       this.drilldown = this.properties['hc-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
    $.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

使用highmaps制作中国地图的更多相关文章

  1. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  2. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  3. 使用echarts简单制作中国地图,echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  4. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

    这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本. ECharts 2 ...

  5. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  6. 用Python制作中国地图、地球平面图及球形图

    绘制地图在python中主要用到的 basemap 库,这个库是 matplotlib 库中一个用于在 Python 中绘制地图上的 2D 数据的工具包. 首先安装库: 1.安装 geos 库:Pyt ...

  7. D3.js 制作中国地图

    from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of ...

  8. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

  9. 中国地图(Highmaps)

    1.中国地图省份和市 调用的包( <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js">< ...

随机推荐

  1. Python——基本的书写规则

    1.输入方法input() 等待用户输入数据,并回车后得到数据(name为输入的字符串) name=input('Please input your name:') print('Hi,',name) ...

  2. 经典的SQL面试题及答案

    ​ ​ ​ ​ ​ ​​​​​ ​ ​​​​​​​​

  3. HDU 3466(01背包变种

    http://acm.hdu.edu.cn/showproblem.php?pid=3466 http://www.cnblogs.com/andre0506/archive/2012/09/20/2 ...

  4. sql中,In和where的区别

    SQL 语句中In 和 Where 的含义不同.应用解释如下: 1.如需有条件地从表中选取.删除.更新数据时,使用Where:2.In只作为Where条件子句下的一个运算符,除了In之外还有Betwe ...

  5. 利用open live writer工具的Metaweblog技术API接口同步到多个博客。

    测试例子内容: hello world hello metaweblog hello open live writer

  6. 【MFC】转:在CHtmlView中判断页面加载完成

    在列出别人的代码前,记录下自己的,覆盖父类的OnNavigateComplete2函数即可. typedef struct _tagEventURL { CString strUrl; HANDLE ...

  7. Modern Operating System

    No one can do all things, learn to be good at use what others already did. Most computers have two m ...

  8. 《ArcGIS Runtime SDK for Android开发笔记》——(4)、基于Android Studio构建ArcGIS Android开发环境

    1.前言 2015年1月15日,发布ArcGIS Runtime SDK for Android v10.2.5版本.从该版本开始默认支持android studio开发环境,示例代码的默认开发环境也 ...

  9. JS中0与‘0’

    JS中0为false,字符串‘0’为true

  10. elasticsearch集群搭建报错: not enough master nodes discovered during pinging

    自己用一台 阿里云 服务器 搭建ES集群的时候,总是报上面的问题. 而且两个ES服务都是报同样的问题.自己的配置文件如下: es服务1配置文件 cluster.name: elasticsearch ...