terraink.app-顶级[城市肌理]制作神器
本文主题:
聊聊 “城市肌理” 。通过图形化的方式,描绘出城市的“皮肤纹理”和“骨骼结构”的图纸,进而更充分的分析和理解城市形态、结构及其演化规律。
01
maptoposter
曾经城市肌理的王者
maptoposter作为曾经的“王者”,可谓是风骚无两,之前也写过文章进行介绍,不过这都是曾经的成就了。现在的terraink.app直接杀死了比赛,因为他已经站在了非专业赛道的最顶端。
不过今天的重点并不是它,我想聊的是这些年制作城市肌理地图的工作流程变迁。
高德/百度开发平台

© OpenQGIS 2026
这是最初代的解决方案,先在高德/百度开发平台自定义地图样式,再用snagit 使用滚动捕捉
拼合成一张大的城市肌理地图。
Cityroads

© OpenQGIS 2026
根据检索的行政区划范围从osm抓取数据。有一说一这个玩意儿生成的但效果很一般,无法按照道路等级区分样式,这一点可以说是非常致命的设计缺陷了。(这一点直到当下都没有做升级更新)
Rhino+Grasshoper+Elk+Ai

© OpenQGIS 2026
通过多软件联动对地理数据进行解析,这需要对多个软件都熟悉同时还需要对数据类型非常详细的了解。(如上图橙色线是主干道、黄色线为二级道路)
QGIS

© OpenQGIS 2026
QGIS是自主化最高的技术流,OpenQGIS也做了很多的城市肌理探索,也分享了1种常规的城市肌理和3种特别的城市肌理(蓝图风格、线条插画风格、剪纸风格)。技术流的缺陷:❶需要提前准备好最新的基础数据(这一点我们通过九州地理数据库 https://his.lreept.space/openqgis/omap-geodb/ 打通了数据下载隔阂),❷需要对整个图面从零开始构建风格样式。
maptoposter

© OpenQGIS 2026
这是一个giuthub开源项目,用户不需要安装专业的技术软件、不需要下载任何地理数据、不需要掌握任何GIS知识、也不需要自定义样式,就能输出城市肌理图,但现在它已经被秒到尘埃里了。
虽然说不需要安装软件,但实际体验还需要自己配置环境,并没有想象中新手友好。
从软件逻辑来说,maptoposter是即时从OpenStreetMap拉取数据,然后从这些数据中筛选出相关内容(在不改源码的情况下,是不能自定义专项数据的)。大量的基础数据拉取还会导致电脑卡顿。也就是说MapToPoster就是将你的电脑当成本地算力中心,散热风扇转速直接拉满。当你的范围超过一定大小,想要结果那是不可能的!
题外话:
Github上的许多开发者专注于后端或工具链,他们并不是”产品经理”,更关注于核心功能、性能和代码的优雅。这些优质项目图层UI对大多数一般用户(非开发者)并不友好。
02
terraink.app
终结这场比赛
而现在,真正的王 https://terraink.app/ 来了,你不需要配置任何环境,更不需要准备任何数据就就可以生成任何范围的城市肌理图。
TerraInk 的定位是很清晰:它只是一个小工具,把”生成好看的城市地图海报”这件事做到开箱即用。对于想做礼物、装饰画,或者需要在设计项目里用到地图元素的人,它省去了在 QGIS 或 Figma 里手工处理地图数据的时间。
那开始吧!

© OpenQGIS 2026
打开网站后,会提示需要我们定位,可以点击下边的【OK】按钮直接跳过定位。

© OpenQGIS 2026
然后就是网站的使用提醒,可以忽略。
1.确定范围

© OpenQGIS 2026
进来之左边是不同的功能列表,右边是当前图的状态,包括定位位置、地图主题、地图布局大小、标记点数量。
需要提醒的一点是,网站进行地名检索是需要梯子的但加载获取城市数据不会。
2.自定义主题样式

© OpenQGIS 2026
选择完城市或者经纬度后,进入第二个功能页【Theme】,从预设色彩搭配中选取需要的色彩方案。

© OpenQGIS 2026
也可以编辑自己的色带添加自己喜欢的颜色。
3.调整布局大小

© OpenQGIS 2026
【Layout】是布局的大小,也就是最终出图的大小,这里有个需要提醒的点,默认出图的分辨率是300ppi,图的大小都不会影响最终输出的分辨率。

© OpenQGIS 2026
除了常见的打印布局外,还默认了电子设备的尺寸大小,选择设备型号,定制生成高分辨率城市肌理壁纸。
4.设置排版要素

© OpenQGIS 2026
【Style】则是对排版进行设置,可以自定义地图名,也可以将名称关闭输出一张纯图。
5.调整地图叠加要素

© OpenQGIS 2026
【Layers】控制的是叠加的数据:建筑、道路、铁路水系、公园等一系列数据都可以通过开关选择是否显示。下边的Distance滑块控制显示的范围,可以无限制缩小直到全球视角(关于这一点我们后边在解释为什么能够实现)。
6.手调地图范围

© OpenQGIS 2026
如果觉得范围不合适,可以点击下边的【Edit Map】手动移动地图区域,缩放、旋转地图范围。
8.下载

© OpenQGIS 2026
然后点击右下角的白色下载按钮,可以下载常见的PNG格式,同时也支持SVG、PDF多种矢量格式,简直无敌!
这就是全部?那就大错特错!

© OpenQGIS 2026
terraink.app还完美适配了移动端!甚至连电脑都不需要拥有就可以开整!

© OpenQGIS 2026
其本质就是一个浏览器,这是头一天的截图,第二天就立刻变样了。
03
差异
terraink.app凭何终结这场比赛
1
数据基础
传统的栅格瓦是服务端把地图渲染成图片分块传过来,样式是固定的,换主题就需要重新请求新的瓦片。Terraink用的是矢量瓦片,服务端传回的是原始地理数据(道路、建筑、水体的坐标和属性),渲染完全在浏览器里在本地完成的。
这意味着同一份数据,换一套样式配置,地图立刻以新的颜色重新绘制,不需要重新请求数据。在调色板里改一个颜色值,地图实时更新,背后只是样式配置在变,数据没动。
2
“自由”渲染
MapLibre GL 用一套JSON格式的样式规范描述地图的视觉表现,每个地理要素类型(道路、建筑、水体、公园)对应一个独立的图层,每个图层有自己的符号属性(颜色、透明度、线宽等)。Terraink 的”主题”本质上就是一套预设好的MapLibre样式配置。
3
“超清”输出
地图渲染在 WebGL canvas 上,导出时借助maplibre-gl-export插件,把当前视口的地图内容连同海报布局(标题、坐标文字等)合并输出为PDF。PDF是矢量格式,无论放大多少倍打印都不会模糊。
所以为什么terraink.app杀死了这场比赛?
技术路线不同
MapToposter
前文说过了MapToposeter的运行逻辑就是从OpenStreetMap拉取指定范围的指定数据,再在本地样式化。这里需要注意的一个点这些数据类型是预设好的,在不修改源码的前提下是不能自定义各项数据的。
terraink.app
直接采用的矢量切片数据 https://openfreemap.org/ ,切片在分发时就已经在进行数据过滤了,如下两图在不同的缩放等级下,数据线的显示要素大不一样。而渲染完全在浏览器里由 MapLibre GL 完成。


1
2
也就是说MapToPoster是把你的电脑当成一个本地算力,所有的数据都是没经过任何加工的原始数据。
terraink.app本质上就是一个矢量切片浏览器。同一份数据,换一套样式配置,地图立刻以新的颜色重新绘制,不需要重新请求数据。你在调色板里改一个颜色值,地图实时更新,背后只是样式配置在变,数据没动。
数据时效性不同
MapToposter
MapToPoster属于实时数据下载,也就是说OpenStreetMap前一秒更新的数据,它下一秒就能立刻获取。
terraink.app

矢量切片本质上就是专业墩子配好的“即配食品”,只需要按照烹饪说明把菜混在一起就行了。既然是预制菜,那就只能等墩子给你配好菜你才能吃,也就是数据必须被OpenFreeMap更新后你才能获取新的数据。
对城市肌理这一点点时间误差重要吗?很明显不重要,因此这一点并不算是terraink.app的弱项。
产品角度不同
MapToposter
正如最开始说的那样Github上的很多项目都是“偏执”的技术员,他们只在乎代码的优雅,并不考虑用户如何使用。
terraink.app
这是一个标准的“产品经理”视角的产品,他舍弃掉了没用的时效性,而是站在一个用户的角度去回答,怎么样的产品才是一个好的产品——不需要任何基础(包括设备基础)都能全功能。事实上他也做到了。
无可厚非terraink.app就是一个好产品,它实现了“技术平权”,让每一位普通用户都能定制一个属于自己的城市肌理图。
04
启发
terraink.app会一直胜利吗?
说完了这些技术的发展里程,还是回到一个基础的点:应用场景。技术并不存在对或错,差异性在于用户和需求间的相互平衡。terraink适用的没有GIS知识或者想偷懒不想使用GIS达成需求的,这些人可能是占据了真正用户的90%,那剩下的10%为何无法满足?terraink所谓的自定义无非是颜色、图层的调整变化,这都只是视觉呈现的一部分(如下左图)。


对于这10%的人来说,除了让这些数据都展示出来外,还需要考虑到数据要素的可读性,这一点通常出现在大比例制图中(如上右图展示的立交桥上下结构关系)。对于一个城市的发展脉络而言,考虑的这么细致并不会让图面效果更好,反而会整体版面效果复杂凌乱。
terraink做到的不是专业,也不是满足了100%用户。他帮助每一个城市肌理爱好者、每一个可能会涉及将地图与城市脉络结合的相关用户,你可以用它制作一个非常精美的墙面壁纸,也可以应用于项目汇报PPT中,用一张干净起范儿的区位背景图将汇报提升一个档次。
这条技术路线并不创新,在《Mapbox自定义地图教程(2024年3月)》就是讲的与之类似了,其工作原理便使用Mapbox自己的矢量切片再加Mapbox的样式编辑为你发送栅格切片。只是过Mapbox是分发匹配用户自定样式后的栅格瓦片,而terraink、maptiler一类则是采用直接分发原始数据在用户端渲染的策略,这之间的差距在《什么是矢量地图?》做了非常详细的讲解。
那terraink.app会一直胜利吗?会一直胜利,但也永远满足不了那10%的用户需求。接下来我们可能会看到在淘宝、小红书、公众号出现各种风格雷同的城市肌理地图甚至还能满足超高分辨率的打印。
那如果需要添加山体阴影,你也可以说随着网站的发展,不就是添加一个图层嘛,找个URL添加上去不就行了。
再比如,现在的城市肌理风格还是扁平化的,那能不能多几种样式呢,比如之前提到的剪纸、蓝线、拟态、插画风格?答案是可以的,这所有的问题其实都只是前端样式渲染的事情啦。
但如果涉及某些“保密”的数据呢?
各位GISer都知道,这些有坐标、有详细属性的数据那都是不能轻易上网的……

terraink的“自由、自定义”还是无法摆脱程序制定者规范的那些框架,用户的“自由调整”就是就是一种自娱自乐。
最后想说,如果terraink不错的话,别忘了推荐给你的好兄弟一起玩玩,Ai(综合搜索引擎)爆发的当下,再被信息差“收割”,多少有点跟不上节奏了。

相关阅读
1
2
3
▼ 别忘了“关注”、“点赞”、“推荐”哟 ▼

OpenQGIS
NOWZoom

关注DDongdong的两个公众号获取更多内容:
作者 | DDongdong
有帮助到你,就请_东东_喝瓶可乐吧。

夜雨聆风