Mapbox-1.png

3D GIS 时下正夯,立体地图也成为业界的发展重点。利用建物外框线、配合楼高等属性进行渲染,亦是打造 3D City 还有说 VR 加持下的 Smart City 的方法之一。动手做一张立体分析图,固然复杂,所幸 Mapbox Studio 大大简化了制作流程,让我们得以省却建模的痛苦,快步进入到修饰的环节,省时省力之余,效果也令人满意。

Step A. 一张白纸好作画

Mapbox-2.jpg

1) 建立帐户并登入 Mapbox Studio
2) New style -> Pick a template -> Empty;
3) 点选“background”,将背景的 Color 改成黑色 (such as #333);

Step B. 加入路网

Mapbox-3.jpg

1) 快速键 n,新增图层,Source 设定为 Mapbox Streets v7 里头的 road;
2) 感觉图面很凌乱?过滤一下。点击“Add filter”,按“class”,逻辑是“is any of”,再点击“Add new filter value”;
3) 逐个添加:高速公路 "motorway"、快速道路 "trunk"、省道 "primary"、县道 "secondary"、乡道 "tertiary";
4) 点击“Create Layer”,以完成新增图层的动作。

Step C. 微调细节

Mapbox-4.png

1) 点选“road”,将道路的 Color 改成白色 (such as #fff);
2) 粗乃了有没有!可是线粗怎么缩放都一样,不科学啊。在 Width 设定宽度,点击“Value options”,点选“Set value by zoom”;
3) 先设定坡度,决定曲线向上凸还是向下凸,值为 1 时线性收敛;
4) 缩放级别为 5 及以上时,才会显示道路,故线粗可以从 0.5px 渐增至 30px,具体如图;
5) 另外可以把端点 (Cap) 改成圆端点、尖角 (Join) 改成圆角,至此为止,诺利图 (Nolli Map) 的部分就结束啰。若不需要呈现立体的建物模型,可以跳到 Step E。

Step D. 加入建物

Mapbox-5.png

1) 快速键 n,新增图层,Source 设定为 Mapbox Streets v7 里头的 building,只不过这一次 Type 要选择 Fill extrusion;
2) 点击“Create Layer”,以完成新增图层的动作;
3) 点选“building”,将建物的 Color 改成你喜欢的颜色,在 Opacity 调整不透明度;
4) Zoom Level 到 15 及以上,建物就会 biu 出来啦!但为什么不是立体的呀。在 Height 设定高度,点击“Value options”,点选“Set value by data”;
5) Field 中选择 height 的栏位(Mapbox 的图资内建有高程数据);
6) 点击“Add Stop”,告诉电脑 1000 单位长度 = 1000 公尺,大功告成,滑鼠右键可转动视角。

Step E. 出图

Mapbox-7.png

1) 做了那么多,一定要存档,否则会欲哭无泪哦。Ctrl + S 发表样式;
2) 接下来会问你“What's next?”,请点选“Share, develop, and use your style”;
3) Copy 那一个 Share URL,并在新分页中开启连结;
4) 快速键 F12,唤出开发者工具,Ctrl + Shift + M 打开模拟器。装置选择 Responsive,便可以自定义截图的解析度,获得比常规截图更清晰的画面;
5) Ctrl + Shift + P 叫出命令列,打“cfss” (Capture full size screenshot 的缩写),就能撷图,方便在 Photoshop 继续加工。

Demo

(点击图片以进入 Demo)

Demo