这种分析图基本上有三种思路：纯人工(PS/AI)，使用应用(软件)和利用开发者工具(写代码)。理论上纯人工和写代码能够达到的效果自由度是最大的，但是分别有两个不太好的地方。前者效率极端低下而且可复用性不佳；后者有一定的学习门槛，需要你了解html,css以及javascript，具备一定的前端常识才能得心应手地画出自己想要的效果来。程序员界提倡不重复造轮子，我认为设计人员更加应该明确自己的任务是什么，善于利用已有的工具。这里推荐mapbox.

实际上mapbox一开始也需要上述提到的前端基本常识，因为mapbox studio classic是通过CSS属性这种方式来定义地图的风格的。但是后来有了mapbox studio(没错就是去掉了classic)，很多事情就比较傻瓜化了。从此设计师们(规划师、小清新geographer，etc)获得了新生。

这里分两步走，先是利用mapbox studio生成一个 @Linkzero Tsang 说的图底关系的底图。然后再有数据的情况下，再来看看如何生成原问题中的那种图。

【任务一：图底关系】

第一步，注册并登录mapbox studio (http://www.mapbox.com/studio/signin)

第二步，新建style。这里可以随便选一个模板开始。

我把打算反映图底关系的style命名为“figure-ground”，你也可以自己取一个你喜欢的名字。

第三步，选择一块区域(你想要的区域，of course)

图示为矢量数据底图，mapbox studio所做的就是给这个骨架以“样式”。是不是觉得这个跟CSS设定HTML样式的逻辑一样呢？

第四步，依次调整建筑、绿地、水面等的颜色。

同时记得关掉文字标记的图层。因为面向的是设计师，那么默认有Photoshop基础，左边的设置面板跟ps的图层逻辑相似。就此核心的工作已经做完了，是不是简单的不行？

第五步，发布。

在发布前还可以看看调整前后的style区别。一张小清新的地图就这样被我搞成了重口味图底分析。

第六步，导出静态图片。

在这里选择 “generate static image”

在这里选择范围，然后复制这个url，通过浏览器打开就可以得到静态图片了。虽然实际上这个工具更多地是为了web app或者网站提供地图，但是导出静态图放到文本或者学生作业的排版里也是可以的。

>>>附加步骤：可复用的style

做好了曼哈顿局部的图底分析之后如果还想做东京的图底分析怎么办呢？是不是要上述步骤再来上一遍呢？ 答案当然是否定的啊。

(1)获取style url

(2)生成一个demo页面

Tokyo-figure-ground

body { margin:0; padding:0; }

#map { position:absolute; top:0; bottom:0; width:100%; }

mapboxgl.accessToken = '替换成自己的';

var map = new mapboxgl.Map({

container: 'map', // container id

style: 'mapbox://styles/spencerpomme/cim8fq2c2004mbkkohg6xjzjg', //刚才的style

center: [139.7026174, 35.6957734], // 地图中心点经纬度

zoom: 15 // 缩放级别

});

把这段代码存为html格式，然后用浏览器打开。

TaDa~歌舞伎町的图底分析出现了。

(规划师和小清新geographer们发出了欢呼声)

【任务二：表达附加属性】

这一部分的内容相对复杂一些，基于mapbox这个平台的话暂时还是需要上传csv(点数据)或geoJSON数据来反映建筑物或街区的其它属性。原理上还是跟类似ArcGIS等软件一样，叠加了一个图层罢了。而且就操作而言，可能比ArcGIS简单不到哪里去，优势不大(可能就是好看得多)。

—

2019.9.24更新:本文中所给链接基本上已经失效，请参考官方文档最新内容