openlayers 绘制tin数据导文

前言：为何会有此篇文章？因为其实陆陆续续有后来者踩到了这个地方。之前一段时间还需要关注我才能阅读的时候时不时的就有小红点提示。经过这么几个月的成长，我意识到里面仍有不少糟粕所在。起码来说，作为一个DEMO，你可以通过它去完成你的工作。但在实际应用上就会产生比较巨大的麻烦：各种意义上的。

此篇作为导读，将在一个更高的层面上去理解、从我为什么如此想，以及代码里的优化处理。基本无代码，仅作为思路参考。如果你正在进行如题方面的研究、尝试，你应该会有所收获。

原生webgl绘制tin的初始图像

此处需要webgl 原生的API 以及相关的概念。即如何渲染一个带颜色的三角形。接着接入处理过的tin数据类型，根据顶点索引渲染。拼凑成一副图像。
此处仅有一个在填入顶点时需要注意的内容：即经纬度与 webgl空间坐标系之间的转换。这里由于xy坐标轴的方向一致。仅是两端数值大小的区别，所以我们可以通过将经纬度 ÷ 180 或者 90 完成这之间的坐标转换。

如此，只要你的webgl已经入门，这部分属于迎刃而解，不需过多在意，而如果你的webgl还没入门，我的建议是你先尝试绘制一个带颜色的三角形，同时了解下矩阵的一些基本概念（如何用矩阵来对物体进行缩放平移等操作）。

在EPSG：4326上的显示

openlayers 地图的初始范围基本属于不确定性因素（跟较多的配置属性有关系，例如：center,zoom等等）。通常如果我们不做太多的设置，在我们打开页面的那一刻，如果我们把整张初始图像贴上去，你一定不会得到正确的图像。

上面其实也就是说，如果你要将该 -180 到 180 ，-90 到 90的一幅图像直接贴上去是无理的，这里需要做一定的转换。

我之前编写时使用的方法是将初始得到分辨率保存，即 -180 到 180 ，-90 到 90 的这个范围，openlayers所计算的分辨率与当前你视口的分辨率之比就是整个图像缩小放大的倍数。

或许有看我那两篇文章比较仔细的朋友已经会有疑问了，为啥要用分辨率之比表示缩小放大的倍数？如果你能想到此处说明你可能已经能少踩不少坑了。

没错，前两篇文章属实裤裆藏雷，作为demo能用，你要应用？坑多的你想哭。。也因为自己本身不是gis出身，对地图分辨率所代表的意思这回事始终处于不明不白的状态，导致想当然的就做了，结果正巧的是结果TM的竟然能对，我就觉得没问题了。所以关键点在于这个缩小放大的比例计算，如果你是专业的，你应该可以试试真正来说这个比例应该咋求。

主要是原图像的平移跟缩放

正确的、简单的这个缩小放大的比例如何求来？

首先能确定的一点是，我们初始图像的四至，我们是知道的，那么所绘制的图像的意义则为：在-180 到 180 ，-90 到 90 这个显示范围内正确的图像，将如下所示，我们的原图像在这个范围内必然是放大的，此时我们在红色框内表示的意义则为在 x1 到 x2 ， y1 到 y2 这个显示范围内正确的图像

现在一看图，这个比例一目了然。
即：

let xScaleRatio = (180 - (-180)) / (x2 - x1);
let yScaleRatio = (90 - (-90)) / (y2 - y1);

而通过openlayers 的事件处理的函数，我们可以轻松地获取当前视口的extent ，即x1,x2,y1,y2。如此找到了在当前视口下应该放大的倍数。接着是平移。

先给关键结论

let center = frameState.viewState.center
let xTranslate = -((center[0] - 0.0) / 180.0)
let yTranslate = -((center[1] - 0.0) / 90.0)

可以看到上方其实做了个 - 0.0 的操作，这里是我为了说明原理而特地编写成这种形式的。

那还有一点比较值得注意的。先缩放再平移，结果才是对的。

抛开相关的矩阵计算的原理（先缩放再平移跟先平移再缩放所表示的变换是不同的，意味着结果也不同）。这个平移的计算在此处意味着：将该图像的位置整体的进行偏移多少。所以我们需要先缩放再平移。

在南极北极投影上的显示

核心依然是如何找到这个平移跟缩放。而对有关的转换，比如某一个特定的坐标系这个图像的显示位置。

平移的部分比较好处理，计算当前的中心，通过ol内置的函数转回经纬度，接着再减去相对应的webgl坐标的数值就可以。

缩放就还是只能用回之前分辨率的处理方法，具体的详情可以查看我之前的那两篇文章。理由很简单，当不是EPSG：4326坐标系的时候，该图像已从一个正着的四边形根据投影扭曲变形了。因此通过extent 去处理已然不显示。但又由于我没啥gis知识的，我总感觉应该有更好的计算方式，但由于目前尚算能用，也没时间继续探究了，就此作罢。

事件处理

当用这张图像的时候，之前我是通过imageStatic 这个类去贴一个静态的图片的。前两天看到imageCanvas 这个类，突然想了想是不是给了一个错误的示范？因此最开始来说，是因为这一点才有这一篇文章。当我们通过canvas 绘图的时候，如果我们已经处理好了图像的平移跟缩放细节，我们可以使用imageCanvas。他会保证在地图需要更新的时候执行这里面的重绘。也就是说，我们不需要再做一大堆的操作，比如更换imageStatic 这个Source 里面的 url 引用。在实际运用中，或者封装中会更加的轻便跟简洁。

先处理完图像的平移跟缩放，再使用imageCanvas 作为 imageLayer 的数据源。如此，也没什么需要额外的交代了。

openlayers绘制tin数据南北极示例
openlayers绘制tin数据EPSG:4326