本文使用geojson数据,通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系,然后将转换后的数据绘制到canvas上。
首先要计算数据的最大最小值,遍历所有坐标点的最大最小经纬度。在这个步骤要注意坐标点是否都遍历到,因为数据中可能会有多面和洞的存在。
第二步就是转换坐标系,地理坐标系转换canvas的屏幕坐标系。为了让地图能完整在页面展示,我们要有数据的最大最小经纬度,计算出来最大最小经度的差值和最大最小纬度的差值。考虑到canvas也有一个宽高,我们用如下代码计算,选用哪个比例比较合适整体显示。(地图数据等比例缩放到屏幕坐标系)
var xScale = width / Math.abs(bounds.xMax - bounds.xMin)var yScale = height / Math.abs(bounds.yMax - bounds.yMin)var scale = xScale < yScale ? xScale : yScale
接下来要对地图数据进行缩放,由于屏幕坐标系y轴与地图坐标系y轴相反。
![8886821d757fa5c61b2c803fda76d9f3.png](https://img-blog.csdnimg.cn/img_convert/8886821d757fa5c61b2c803fda76d9f3.png)
所以为了地图能居中,计算地图中心和画布中心的差值,进行平移变换,然后用画布进行绘制。
var xoffset=width/2.0-Math.abs(bounds.xMax - bounds.xMin)/2*s