mapbox gl geojson 风格

Question

我尝试在 Mapbox GL 中重现下面的捕获。添加颜色是为了便于阅读，但能够自定义颜色并不是强制性的。关键方面是不同的线宽。

我读过 Mapbox GL here 和 there 中的样式。添加尽可能多的具有不同权重的样式层不是一种选择。我用两千根线串试了一下，性能不可接受。

我已经抓取了几个关于 mapbox GL 中数据驱动样式的 github 问题 there，但我无法确定我需要的是否在路线图上。

低于我用来生成上图的 GEOJSON 的 MWE。

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "LineString",
        "coordinates": [[2.3420237, 48.9437736], 
                        [2.3430249, 48.9462233],
                        [2.3428777, 48.9469687]]
      },
      "type": "Feature",
      "properties": {
        "color": "#0000FF",
        "weight": 5
      }
    },
    {
      "geometry": {
        "type": "LineString",
        "coordinates": [[2.3880359, 48.9077387],
                        [2.3885364, 48.9072262],
                        [2.3886376, 48.9071376],
                        [2.3891088, 48.9066521]]
      },
      "type": "Feature",
      "properties": {
        "color": "#FF0000",
        "weight": 15
      }
    }
  ]
}

Answer 1

有文档 here 关于从 GeoJSON 添加样式 lineString。下面是一个附加示例，演示了地图上具有两种不同权重/颜色的两个 lineString：http://bl.ocks.org/tristen/5f807d44726b401b727f3ab06c7ed864

我用两千条线串试了一下，性能不行。

数千个点的更高效的数据格式是将您的 GeoJSON 转换为 vector tiles。这里有一个使用 Mapbox GL JS 向地图添加矢量切片图层的示例：https://www.mapbox.com/mapbox-gl-js/example/vector-source/