超简单的canvas绘制地图

本文主要是介绍超简单的canvas绘制地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

    本文使用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轴相反。

所以为了地图能居中，计算地图中心和画布中心的差值,进行平移变换，然后用画布进行绘制。

var xoffset=width/2.0-Math.abs(bounds.xMax - bounds.xMin)/2*scale
var yoffset=height/2.0-Math.abs(bounds.yMax - bounds.yMin)/2*scale
var point={x: (longitude - bounds.xMin) * scale+xoffset,y: (bounds.yMax - latitude) * scale+yoffset
}

    效果图如下,在线地址:https://tpolong.github.io/

参考资料：

1. http://mikefowler.me/journal/2014/06/10/drawing-geojson-in-a-canvas
2. http://mikefowler.me/smallworld.js/

这篇关于超简单的canvas绘制地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---