WebGIS中等值线前端生成绘制简析

文章版权由做者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/

1.背景

等值线是GIS制图中常见的功能，通常有两种思路：一种是先进行插值生成等值面栅格图，而后将等值面提取成等值线；另外一种是进行插值后，直接再根据算法进行插值点链接生成一条尽可能闭合以及平滑的曲线。

在进行插值中，有不少算法能够选择，各类算法中也会有不一样的参数须要调试，而且更具实际状况，好比地理环境因素等进行微调，最后建模。这里咱们要讨论的是忽略一切外在因素，只根据坐标、等值字段值进行插值和展现的探讨。

常看法决方案为，算法后台生成图片，前端展现。这里咱们探讨如何前端直接生成。前端生成等值面的好处不少：最大的好处就是规避后台压力，而且能够随时控制显示样式。

 

2.插值算法简介  

基于网格GRID来进行问题简化是GIS领域中的常见套路，WebGIS中更是经常使用。这里一样咱们也能把等值线的算法基于GRID来实现。

a.对范围内的面按照网格来划分，每个网格的四角坐标平均插值出对应的坐标。

                                       

b. 选定一个矩形开始，追踪等值线，等值线必定是连续的，因此在相邻矩形边界上的一个数值点，确定会在下一个矩形中找到后续点。并且，必定是成对出现的，也就是说，确定能发现后续的等值点，也许不止一个（另有办法追踪），但不会出现找不到的状况。

 

c. 在一个矩形的四边中也有可能出现有多于一对的等值点状况，如何追踪下一点取决于你的算法，通常是取相邻点（避免与另外一条等值线交叉）。

 

d.将全部的点链接起来成为等值线，再对等值线进行平滑。

e.最后在地图上绘出。

3.开源GIS库——Turfjs

这里，咱们并不须要重头来写等值线插值算法，在著名的开源GIS前端库——Turfjs中，已经帮咱们完成了这些工做。这里我简单介绍下Truf.js。

Turf.js官网地址：http://turfjs.org/

Turf.js中的几何数据组织规范以WKT格式为标准。其官网中包含了详细的接口介绍和样例讲解。这里我给出咱们须要用的接口：

 

4.实现步骤

这里我简单给出能够优化的地方：

a.对不一样的break线给不一样样式。

b.加上标注break值。

c.对数据进行平滑。

如下为最终效果图：

 

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　 -----欢迎转载，但保留版权，请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/

                                                                           若是您以为本文确实帮助了您，能够微信扫一扫，进行小额的打赏和鼓励，谢谢 ^_^