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 经纬度转换为svg图上坐标相关推荐

学习笔记——【python】GetGeoTransform()使用，gdal截取图像，使用GDAL进行影像投影坐标、地理坐标、图上坐标的转换
1. GetGeoTransform()使用.gdal截取图像 GetGeoTransform() GeoTransform[0],左上角横坐标(应该是投影坐标) GeoTransform[2],行旋 ...
经纬度坐标转换xy坐标 python_在Python中使用NewtonRaphson迭代将经纬度转换为xy Mollweide地图坐标...
我试图编写一个程序,从用户那里获取一组经度和纬度坐标,将它们转换为Mollweide投影图的x&y坐标,然后报告这些坐标处的像素值(在本例中,是噪声温度).在我使用的地图/数据是Haslam ...
MATLAB导入任意省市地图（Shp数据）并从EXCEL中导入经纬度数据在图上手动加点
目录导入任意各省市Shp数据从EXCEL导入经纬度数据并在图上手动加点导入任意各省市Shp数据 1.首先下载任意省市Shp数据,详细步骤请看: 转载:三步教你免费下载省,市,区县行政区Shp数据 ...
【Vectorizer.AI】免费将 JPEG 和 PNG 位图转换为 SVG 矢量图
Vectorizer.AI 是一款非常新鲜,正在测试中的网站,由 AI 驱动.它能将 JPEG 和 PNG 位图转换为 SVG 矢量,可无限量放大,目前支持的最大图像像素大小为 2 万像素,最大图像文 ...
西安80转换成北京独立计算机,WGS84经纬度坐标转换为西安80高斯投影坐标.
dsfqfzneiphp 通过波段编号18和相应的中央子午线为105°,表示计算基于6度波段划分. 您要注意标题" WGS84经纬度坐标转换为西安80高斯投影坐标",也就是说,在 ...
百度地图经纬度,转换为地图上的点
<!doctype html> <html lang="en"> <head> <title>根据地址查询经纬度</title ...
【Python画图01】一张图上两条线，坐标图例设置
一.学习背景最近在学习python制图,准备做个模板好出图目录一.学习背景二.参考三.代码学习 1.figure语法说明 2. 一张图上2条线 3. 坐标轴取值范围.坐标轴标题.坐标轴小标 ...
墨卡托投影法将经纬度转换为平面坐标
地球经纬度转换为平面坐标,想必是数学建模里面经常会遇到的问题. 由于地球是一个近似椭圆,因此用经纬度确定的坐标,无法直接使用平面几何的计算公式计算距离等数据.使用墨卡托投影法将经纬度坐标投影为平面坐标 ...
WGS84、GCJ-02、BD-09、图吧坐标简介及坐标转换实现（js版）
1.不同地图服务商的坐标系出于国家安全考虑不同的国家在规定地图服务提供商在提供地图服务的时候需要将地图数据进行加密.现在比较流行的坐标系有WGS84.GCJ-02.BD-09,且各个坐标之间存在偏差 ...

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

Highmaps 经纬度转换为svg图上坐标相关推荐

最新文章

热门文章