从底层实现Canvas绘制的GeoJSON轻量级WebGIS

使用 HTML5 Canvas构建基于 GeoJSON 的轻量级 WebGIS，基本原理，其实这篇文章已经讲的很好了：https://image.hanspub.org/Html/5019.html

pdf文件下载：CSA20120400000_91036454.pdf

HTML5 canvas API 提供强大的函数库以保证使用JavaScript 在网页中绘制任意类型的地理要素。

使用fillText(“文本内容”，X，Y)方法将文本内容以文本 左上角为起始坐标绘制于相应的 X，Y屏幕坐标上；

线状要素使用 moveTo(X,Y)、lineTo(X,Y)方法绘制具有起始坐标的线段，并根据 strokeStyle(“color”)方法设置绘制线段的颜色；

使用 move To(X,Y) 、lineTo(X,Y)方法配合 closePath()方法也可以绘制任意形状的多边形 

使用 JavaScript解析 GeoJSON 得到的要素坐标保存在变量中，通过地理坐标转换模块得到屏幕点坐标，针对不同要素类型使用上述方法进行绘制。

geojson数据绘制地图

文使用geojson数据，通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系，然后将转换后的数据绘制到canvas上。

坐标转换 

坐标转换的核心功能是将取得的地理坐标转换成能在浏览器中显示的屏幕坐标，再将屏幕坐标交给HTML5 Canvas 进行绘制。 由于地理坐标是延 X轴向右递增，延 Y轴向上递增，而在HTML5 Canvas 中，坐标是从左上角开始，延X轴向右递增，延Y轴向下递增。所以应采用如下公式对地理坐标向屏幕坐标转换：

• X = (Lon − minLon)*3600/scaleX         

• Y = (maxLat − Lat)*3600/scaleY  

其中，X表示转换得到的屏幕横坐标，Y表示转换得到的屏幕纵坐标，Lon 表示当前要素结点的经度，minLon 表示该图层范围的最大经度，Lat 表示当前要素结点的纬度，minLat 表示该图层范围的最大纬度，minLon和minLat 可以通过 GeoJSON中的 bbox 中获得，同时，为保证精度，将差值乘以3600 换算成秒。而scaleX、scaleY有如下公式得到。 

• scaleX = ((maxLon − minLon)*3600)/h

• scaleY = ((maxLat − minLat)*3600)/y 

h代表 HTML5 Canvas画布的高度，y代表HTML5 Canvas画布的宽度。scaleX、scaleY 分别代表X轴和Y轴上每像素代表的经度/纬度的秒数。 使用以上公式，可以将任意一点的地理坐标转换为屏幕坐标绘制在HTML5 Canvas 画布当中，并且能保证较高的精确度。 

参考文章：

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

http://mikefowler.me/smallworld.js/

转载本站文章《从底层实现Canvas绘制的GeoJSON轻量级WebGIS》,
请注明出处：https://www.zhoulujun.cn/html/GIS/GIS-Science/8576.html