Highmaps 经纬度转换为svg图上坐标
来源:互联网 发布:国泰安数据库好不好用 编辑:程序博客网 时间:2024/06/07 02:30
最近做后台报表展示系统,用到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 经纬度转换为svg图上坐标
- 经纬度转换为屏幕坐标
- 经纬度坐标转换为屏幕坐标
- 经纬度坐标转换为屏幕坐标
- 经纬度坐标转换为屏幕坐标
- 经纬度坐标转换为屏幕坐标
- (转)经纬度坐标转换为屏幕坐标
- 经纬度坐标转换为屏幕坐标
- GPS坐标(经纬度)转换为百度坐标(经纬度)续
- openlayers 根据经纬度转换为屏幕坐标
- GPS经纬度转换为百度坐标
- java将经纬度转换为平面坐标
- 如何把经纬度坐标转换为屏幕显示坐标?
- 平面坐标(方里网)转换为经纬度坐标
- 将GPS坐标转换成百度地图坐标,将baidu 经纬度 转换为google经纬度
- SVG 坐标转换
- SVG 坐标转换
- GPS坐标(经纬度)转换为百度坐标(经纬度)的JAVA方法
- iOS系统及微信中audio自动播放
- 设计模式-模板方法模式
- java自学网站资源List
- lesson 11:. 使用UDP协议编写一个网络程序,设置接收端程序的监听端口是8001,发送端发送的数据是“Hello, world”。
- 阿里云下linux系统mysql无法远程访问
- Highmaps 经纬度转换为svg图上坐标
- Matlab计算微分方程曲线求导及过曲线上点的切线方程
- ATPCS关于堆栈和寄存器的使用规则
- 编写一个程序,可以一直接收键盘字符,如果是小写字符就输出对应的大写字符,如果接收的是大写字符,就输出对应的小写字符,如果是数字不输出。
- HMC 的升级方法
- effective C++ 11_在operator= 中处理"自我赋值" 读书笔记
- 3-10·Linux服务管理
- jenkins
- 浅谈list的remove方法