如何通过CartoCSS提供样式化的矢量地图数据

Question

我有example data set行和点，代表了人们的工作之旅以及他们感到道路交通事故风险的地方。

现在，数据具有诸如地方（家庭，工作，危险）等属性以及他们在不同地方担心的事故严重程度。因此，更广泛的问题是如何在网络地图上将其可视化。为此，我looked into谷歌地图，传单和OpenLayers3。每一个看起来都很棒并且允许漂亮的样式，但在我看来，没有一个是CartoCSS的快速，复杂和直观的样式，如下面用于创建下面图像的代码：

所以我通过TileMill将事物转换为栅格图块后，在tile mill和this is what I came up with中尝试了它。

但这是一种愚蠢的做事方式：它不能覆盖基础层，只是提供矢量数据并在客户端设置样式会更有效，可能使用mapbox.js之类的东西。但我无法弄清楚如何在客户端使用可爱的CartoCSS语言来设置GeoJSON文件的样式。 （怎么样）这可能吗？

P.S。这是我如何设计上面的地图

#tlines {
  line-width:1;
  line-color: #0b0;
}

#tpoints.points{
  marker-width: 6;
}


#tpoints.points[Place='Danger'] {
  marker-fill:#db0d0d;
}
#tpoints.points[Place='Home'] {
  marker-fill:#db0;
}

#tpoints.points[Severity='1']{
  marker-width: 4;}
#tpoints.points[Severity='2']{
  marker-width: 6;}
#tpoints.points[Severity='3']{
  marker-width: 10;}

Answer 1

  

我无法弄清楚如何在客户端使用可爱的CartoCSS语言来设置GeoJSON文件的样式。 （怎么样）这可能吗？

无法将CartoCSS用于浏览器方面的样式功能。

要了解如何在Mapbox.js / Leaflet.js中设置GeoJSON样式，请在此处查看文档：

• 在Mapbox.js https://www.mapbox.com/mapbox.js/api/v1.6.2/l-geojson/中设置GeoJSON样式（与Leaflet.js完全相同，因为Mapbox.js基于Leaflet.js）
• 您可以使用L.mapbox.simplestyle.style https://www.mapbox.com/mapbox.js/api/v1.6.2/l-mapbox-simplestyle-style/
将样式选项直接嵌入到GeoJSON对象中

Answer 2

Alex正确地指出，Leaflet / Mapbox.js中的矢量样式与CartoCSS相比，是Tilemill或Mapbox Studio的造型。但是， 可以使用CartoCSS在浏览器中设置样式;它只需要两件事之一：

1. 一个不同的平台：CartoDB有一个优秀的JS库，用于使用CartoCSS为托管数据设置样式，基于传单并与Mapbox底图完全兼容。
2. 托管您自己的磁贴服务器，CartoDB server或Mapbox-built tools的组合。

Answer 3

如果您使用GeoJson作为数据源，您可以尝试使用Leaflet.js的Leaflet.geojsonCSS插件。 Geojson CSS以类似CSS的格式为集合中的每个要素提供样式定义。使用此方法需要事先在geojson中添加样式定义。