mapbox gl geojson 样式

Question

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

我读过有关 Mapbox GL 样式的内容 and 。添加具有不同权重的尽可能多的样式层不是一种选择。我用两千个 LineStrings 试过了，性能是不可接受的。

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

下面是我用来生成上面图像的 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 on adding a styling a lineString from GeoJSON. Here's an additional example that demonstrates two lineStrings on a map with two different weights/colors: http://bl.ocks.org/tristen/5f807d44726b401b727f3ab06c7ed864

I tried it with two thousands LineStrings and the performances are not acceptable.

一种针对数千个点的更高效的数据格式是将您的 GeoJSON 转换为 vector tiles. There's an example of adding a vector tile layer to a map using Mapbox GL JS here: https://www.mapbox.com/mapbox-gl-js/example/vector-source/

mapbox gl geojson 样式

mapbox gl geojson style

geojson

mapbox-gl

mapbox-gl-js