GIS - 椒盐小土豆

前端栅格瓦片重投影

目前绝大多数的供公开使用的栅格瓦片都是基于墨卡托投影切片的，少数是基于经纬度投影的。这两种投影方式的解析比较简单，并且支持全球范围。但是，在某些情况下，尤其是在展示局部地区的场景中，会接触到一些不常见的投影，例如，在 maptiler 中，提供了捷克，荷兰，瑞士等国家的地方投影坐标系的栅格瓦片。

常常会有这样的需求：将不同投影坐标系的栅格瓦片叠加在一起显示。

渐变效果能够实现多种颜色之间的自然过渡，一般情况下，渐变往往与某种场强度相关，或者说某一个在二维空间内连续变化的数值相关，比如某片地区的气温，海拔高度，一条路径的畅通程度。地图中常见的渐变效果是热力图，分层设色也算渐变吧，只要分的够多。

渐变色也能用于实现阴影的效果，也就是从灰色过渡为透明的形式，从而使得 2D 的地图更加立体。下图是 iOS 中地图应用的截图，右上角的控件实际上就有阴影，用于与地图做区分。仔细观察的话，地图中水系的边缘也是有向内的阴影的，用于与陆地做区分。

光照分析是一个很常见的需求，那么如何在地图中实现类似的效果呢？

本篇文章翻译自 maplibre/maplibre-gl-js 项目的《life-of-a-tile》。文中的超链接，对应到 Mapbox 的 v1.13.2 版本。

本篇文章将说明在 Mapbox 中，一个瓦片的加载流程，整个过程可以分为3个部分：

理想状况下，Event loop 和 Render loop 以60帧每秒的速度运转，类似 Tile loading 等重活，会放在 web worker 中异步执行。

Mapbox 的矢量切片的服务发布方式不仅限于使用 GeoServer，Mapbox 自己本身也在提供这样的数据切片服务，本文仅为使用 GeoServer 提供同样的数据切片服务的操作说明，适用于规避 Mapbox 数据存储收费，内网部署等场景。

不过 Mapbox 貌似不再对数据存储收费了？而且如果一个人或者一家公司能够在内网中部署地图服务，数据矢量切片应该也不在话下？所以本文的方案到底会在什么样的场景下有用？

当做完这个火车运行可视化的小页面时，已经想不起来为什么要做这个了，可能就是觉得好玩吧。最终的版本比起最初设想的内容，缺了不少，主要是一些数据无法获取到。也有一些是因为实现起来太复杂。

之所以要做这么一件事情是因为在玩《Cities: Skylines》时，游戏内的立交建造比较繁琐，又很重要。于是就萌生了做一个从目前已有的二维地图道路数据自动生成立体的立交道路的工具的想法。

以延安东路立交桥为例，第一张是平面展示效果，第二张是立体展示效果：

如果能用第二张图中的道路数据，导入到游戏中，想必很实用。所以，接下来的内容就是介绍我的想法，关于如何从图一中的数据计算得到图二中的数据。