Posts match “ 前端 ” tag:

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操作。
最后就圆满完成任务了。
下图是效果图。

参考链接:
HIGHMAPS - MAP COLLECTION
STACKOVERFLOW