Highmaps 经纬度转换为svg图上坐标

最近做后台报表展示系统，用到Highcharts。Highcharts兼容所有现代浏览器及低版本的IE浏览器（IE6+），可配置性高，包括颜色、线条，点，点的形状、背景图等等。

地域上展示需要Highmaps。遇到一个需求，需要根据某个城市的经纬度，在地图上实时显示这个点。这就需要将经纬度通过一定的转换，转化为图上的坐标点。实际上这是一件很简单的事情，生成地图的时候肯定是根据某种计算规则转换出来的，所以只要根据这个规则来转换就可以了。

但是现实往往没有想象的那么简单。

Highcharts Error #22是说地图不支持经纬度转换成图上坐标，但是我的地图数据确实是从官方下来的，且是1.1.0版本以上的。
后来找了好多地方，终于在stackoverflow上找到了答案。

首先，要进行经纬度转换需要用到Proj4js，Proj4js通过某种规则将一个坐标系上的点向另一个坐标系做投影，在这里就是将实际的地理位置投影成平面上的点。所以需要引入Proj4js，注意，引入的位置在highcharts之前。

其次，既然是从官方下的数据，为什么它识别不了是自己的数据呢？原因在于对原始地理数据的处理上不妥。

var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
$.each(data, function (i) {
    this.drilldown = this.properties['drill-key'];
    this.value = i; 
});
$('#container').highcharts('Map', {
    // ...
    series : [{
        data : data,
        name: '中国'
    }]
});

这样会导致highmap无法识别这是从它库里荡下来的数据。因此，不允许你使用经纬度转换。解决这个问题需要保留原始数据不变，另外备一份数据，调用highmap自身的方法joinBy，让它自己去拼合数据。

var mapData = Highcharts.maps['countries/cn/custom/cn-all-china'],
    myData = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
$.each(myData, function (i) {
    this['hc-key'] = this.properties['hc-key'];
    this.drilldown = this.properties['drill-key'];
    this.value = i;
});
$('#container').highcharts('Map', {
    // ...
    series : [{
        data : myData,
        mapData : mapData,
        joinBy: 'hc-key',
        name: '中国'
    }]
});

看着万事俱备，其实前面还有坑。为了方便调试，引入的Proj4js、map都是src.js未压缩的。

Highcharts.maps["countries/cn/custom/cn-all-china"]={
"title":"China with Hong Kong, Macau, and Taiwan","version":"1.1.1","type":"FeatureCollection","copyright":"Copyright (c) 2014 Highsoft AS, Based on data from Natural Earth","copyrightShort":"Natural Earth","copyrightUrl":"http://www.naturalearthdata.com",
"crs":{
    "type":"name",
  "properties":{"name":"urn:ogc:def:crs:EPSG:3415"}},
  "hc-transform":{
    "hc-transform":{"default":{"crs":"+proj=lcc +lat_1=18 +lat_2=24 +lat_0=21 +lon_0=114 +x_0=500000 +y_0=500000 +ellps=WGS72 +towgs84=0,0,1.9,0,0,0.814,-0.38 +units=m +no_defs","scale":0.000129831107685,"jsonres":15.5,"jsonmarginX":-999,"jsonmarginY":9851.0,"xoffset":-3139937.49309,"yoffset":4358972.7486}
},...}}

“lcc”,”18”,”24”,”21”,…”WGS72”这几个参数的后面都有空格，而proj4js都没有做trim处理，导致报错。

可以将空格去掉或者proj4s添加trim操作。
最后就圆满完成任务了。
下图是效果图。