CartoCSS指南

2. 快速入门

CartoCSS可以对地图中各种要素样式的细节进行控制。包括颜色、大小、形状等，都可以通过设置CartoCSS的各种属性参数来实现制图样式的配制。为了能让读者快速了解用CartoCSS能制出什么样的地图，以及如何制出这样的地图，我们在本章中以房屋、公园和道路的制图样式配置为例，初步展示一下CartoCSS的制图能力。需要说明的是，本章中的制图示例用到了Mapbox Studio。但这些制图任务并不是仅能够在Mapbox Studio中才能完成。而且这些例子需要有对应的数据准备。我们先假定所需要的数据已经准备好。

2.1 配置房屋样式

为了对一个表示建筑物轮廓的面要素矢量数据集进行样式配置，可使用以下CartoCSS脚本：

#building[zoom>=14] {
  polygon-fill:#eee;
  line-width:0.5;
  line-color:#ddd;
}

制图渲染效果如下图：

图片来源：Mapbox

#building标识了需要进行样式配置的图层。
[zoom>=14]指定了该样式只有在地图缩放级别大于等于14级（缩放级别数字越大，则视点距离观察区域越近，反之越远。1级的时候通常为世界地图视图）的时候才起作用。
polygon-fill: #eee设定了房屋多边形的填充色为浅灰。

我们还可以让房屋在更高的缩放级别上展示出具有一定高度的效果，类似于一个个积木块。为此，还需要添加这么一段代码：

#building[zoom>=16] {
  building-fill:#eee;
  building-fill-opacity:0.9;
  building-height:4;
}

修改后的制图渲染效果如下图：

图片来源：Mapbox

2.2 配置公园样式

这次我们试一下对公园这种类别的地块配置样式。

#landuse[class='park'] {
  polygon-fill:#dec;
}

#poi_label[maki='park'][scalerank<=3][zoom>=15] {
  text-name:@name;
  text-face-name:@sans;
  text-size:10;
  text-wrap-width: 60;
  text-fill:#686;
  text-halo-fill:#fff;
  text-halo-radius:1;
  text-halo-rasterizer:fast;
}

应用以上CartoCSS脚本可以得到如下渲染效果：

图片来源：Mapbox

下面逐一介绍其中用到的CartoCSS关键要素：

#landuse标识了公园地块数据所在的图层，即landuse层。
[class='park']修饰符利用条件过滤器限定了该样式的作用范围，即class属性值为park的那些面要素。
#poi_label标识了用于对公园进行文字标注的图层，即poi_label层。
[maki='park'][scalerank<=3][zoom>=15]修饰符利用了一组条件过滤器限定了该样式在poi_label层中的作用范围，以及满足这些条件的标注只有在缩放级别大于15级的时候才可见。
text-name: @name用于设置用于标注公园的数据字段，以一个变量@name的形式给出，@name可以在之前先定义好，例如@name: '[name_en]';。
text-face-name: @sans用于设置文本标注的字体。与text-name一样，这里也使用了变量，即@sans。
text-wrap-width: 60设置了文本标注中每一行的最大长度。
text-halo-rasterizer: fast指定使用一种经过优化的快速绘制方法来渲染标注文字的光晕。

2.3 标注道路

前面两个例子中都是对矢量数据中的面要素类型进行样式配置。在这个例子中，我们以道路为例，看看如何配置线要素标注的样式。

#road_label[zoom>=13] {
  text-name:@name;
  text-face-name:@sans;
  text-size:10;
  text-placement:line;
  text-avoid-edges:true;
  text-fill:#68a;
  text-halo-fill:#fff;
  text-halo-radius:1;
  text-halo-rasterizer:fast;
}

以上CartoCSS脚本将产生如下渲染效果：

图片来源：Mapbox

其中涉及到的主要属性和参数的含义如下：

#road_label标识了道路标注对应的图层为road_label层。
[zoom>=13]限定了只有在缩放级别大于13级的时候才显示道路标注。
text-placement: line设置标注的放置方式为沿着线的走向显示文字，而不是通常的水平显示。
text-avoid-edges: true强制所有标注要避开绘制区域（例如瓦片）的边缘，防止出现被切断的情况。

参考文献

Mapbox, Mapbox Studio Style Quickstart