生成并托管使用 Mapbox Studio 自定义的您自己的栅格图块

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

如果您从未见过 Mapbox 中托管的地图,您可能会认同其设计质量。 Mapbox 的业务是托管和提供地理空间数据。出于这个原因,Mapbox 提供的所有优秀工具都旨在帮助用户准备和使用他们的数据。

提供的工具之一是 Mapbox Studio 。 Mapbox Studio (MbS) 是一个桌面应用程序,允许您创建 CartoCSS 主题,稍后用于生成栅格图块。简单解释一下,MbS 所做的是下载矢量格式的 OpenStreetMap 数据,并应用指定的 CartoCSS 样式即时渲染它。

使用 MbS 的结果不是一组图块,而是一种样式,即一组规则,这些规则表示必须使用哪种颜色来渲染道路、标签出现在哪个级别、大小、颜色必须用于地面等。此样式稍后可以上传到 Mapbox,以便在云端生成光栅图块,我们可以使用这些图块来支付服务费用。

我们可以问的问题是: 我们如何根据给定的 MbS 样式在本地生成栅格切片?

好吧,这篇文章就是关于这个的。继续阅读。

使用 Mapbox Studio 并创建您的自定义样式

让我们从头开始—— 下载 Mapbox Studio 应用程序并将其安装在您的系统上。安装后执行它,您将被要求连接到 Mapbox 平台。

Mapbox 要求您注册为用户的主要原因有两个。首先,平台的力量在云端。这包括您创建的样式。

其次,MbS 从 Mapbox 服务器检索矢量格式的数据。当您注册为用户时,您会获得一个 API 令牌,用于标识您的请求。每次 MbS 发出提取数据的请求时,它都有将您标识为用户的令牌。这样 Mapbox 就可以控制是否有任何用户滥用他们的平台。

登录后,您将被允许创建新的地图样式。最简单的方法是开始使用由伟大的 Mapbox 设计师创建的入门样式之一:

这里我们选择了 Mapbox Outdoors 风格。在图像中,您可以看到样式代码(由 CSS 启发的 CartoCSS)以及通过使用给定样式规则绘制矢量信息而获得的结果图块:


CartoCSS 是由 MapBox 开发并受 Cascadenik 启发的 Mapnik 样式表 预处理器。它就像是专门为设计地图样式而开发的 CSS 语言。

使用新名称将样式存储在计算机上的某个位置,例如 customstyle 。如果您查看您的磁盘,您会看到已创建一个 customstyle.tm2 文件夹,其中包含一堆定义样式规则的文件(看看它们是否危险)。

最后,修改一些属性,比如 @land @crop colors 并保存以查看结果:

伟大的 !!!您已经创建了第一个自定义样式。

从 MbS 样式生成栅格图块

在寻找解决方案时,我发现了 tessera tl 工具。 Tessera 是一个基于节点的命令行应用程序。它基于 mapbox(具体为 tilelive)的一些模块以及作者 ( Seth Fitzsimmons ) 实现的其他模块。结果是我们可以通过 MbS 定义的样式执行 tessera,打开指向本地地址的浏览器并查看带有使用我们的 MbS 样式生成的栅格图块的地图。

同样, tl 是一个基于节点的命令行工具,我们可以执行它,传递一组选项,以生成一个 MBTiles 文件或遵循众所周知的 z/x/y.png 格式的图块金字塔。


我在 Azavea Labs 的文章 Converting Mapbox Studio Vector Tiles to Rasters 中了解这两种工具。

如何安装工具?

注意 :您需要在系统中安装 NodeJS ,以及 npm 包管理器命令行工具。

我不喜欢安装全局节点包(或至少超过必要的)所以我将在自定义文件夹中安装以前的工具:


 > mkdir tiletools
> cd tiletools

在目录中执行下一句,安装 tessera tl 包等:


 > mkdir tiletools
> cd tiletools

您将看到一个名为 .npm_modules 的隐藏目录已创建,其中包含一些与以前的包同名的子目录。

运行 Tessera

让我们尝试第一次运行 tessera。因为它被安装为本地节点模块执行:


 > mkdir tiletools
> cd tiletools

Tessera 要求您传递一个 URI,以便它可以为其内容提供服务器。它接受来自 Mapbox 托管文件、Mapnik、Tilemill、Mapbox Studio 等的 URI。

再次重复指示我们之前创建的样式的路径,指示协议 tmstyle://


 > mkdir tiletools
> cd tiletools

首先,tessera 似乎在 8080 端口工作,但后来我们收到有关 MAPBOX_ACCESS_TOKEN 的错误。如果您还记得第一部分,Mapbox 要求所有请求都使用用户令牌进行签名。因此,在执行 tessera 之前,您需要从您的帐户获取访问令牌并将其设置为环境变量:


 > mkdir tiletools
> cd tiletools

我们即将使其发挥作用。现在的问题是我们的 MbS 样式使用了我们尚未在系统中安装的字体。一种简单但蛮力的解决方案是在您的系统上安装所有 Google Web Fonts。为此,您可以使用 Web Font Load 安装脚本。就我而言,我已将它们安装在用户的字体文件夹 ~/Library/Fonts 中。

安装字体后再次尝试执行 tessera:


 > mkdir tiletools
> cd tiletools

有点奇怪,我们刚刚安装了字体,但没有找到。怎么了?那么,tessera 使用 mapnik 创建光栅图块,它在环境变量 MAPNIK_FONT_PATH 指定的文件夹中查找字体,所以让我们定义变量:


 > mkdir tiletools
> cd tiletools

并再次执行脚本:


 > mkdir tiletools
> cd tiletools

我的天啊 !!!这似乎是一个永无止境的故事。现在我们需要安装 Arial Unicode 字体。 寻找它 ,安装在您的系统中并再次执行 tessera:


 > mkdir tiletools
> cd tiletools

伟大的 !!!看来 tessera 工作正常。让我们打开指向 http://localhost:8080 浏览器并查看结果:

显示了使用 Leaflet 网络地图库实现的地图,渲染了动态创建的栅格图块。查看控制台可以看到tessera输出信息:

我们可以看到当前缩放级别 8 的图块是如何生成的。

在这一点上,我们有 tessera 工作,但是如何为给定的缩放级别和给定的边界框生成局部金字塔呢?

使用 tl 命令行工具生成自定义金字塔图块

在继续之前我们需要知道我们要生成哪个边界框,整个世界?或者只有一块。在我的例子中,我想要三个缩放级别(7、8 和 9)环绕加泰罗尼亚。

有一些在线工具可用于获取区域的 bbox,但我喜欢 Klokan Technologies Bounding Box Tool

tl 工具可以运行三个主要命令,但我们只对复制命令感兴趣,它在两个提供程序之间复制数据。在我们的例子中,MbS 风格是一个提供者,文件系统是另一个。运行 tl 命令以查看可用选项:


 > mkdir tiletools
> cd tiletools

因此,让我们去执行命令,将数据从我们的 MbS 样式复制到本地 tiles 文件夹。我们想要生成缩放级别为 7 到 9 的图块,并指示一个包围加泰罗尼亚的边界框。


请记住 -b 选项必须表示为 [minLon minLat maxLon maxLat]


 > mkdir tiletools
> cd tiletools

哎呀!那很痛。分段错误。看了一段时间后,我意识到这 是一个错误 。要解决它,请转到 tl/node_modules/abaculus/node_modules 并删除 mapnik 文件夹依赖项。它是多余的,因为父文件夹中安装了一个。

再次执行命令,查看输出:

tl 工具已创建本地切片目录并为给定的缩放级别和边界框生成所有栅格切片。此外,输出还显示生成每个图块所需的时间。

就这样。现在我们只需要在我们自己的服务器上托管磁贴!!!