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强制所有标注要避开绘制区域(例如瓦片)的边缘,防止出现被切断的情况。

参考文献

  1. Mapbox, Mapbox Studio Style Quickstart