mapbox-gl-js - 如何绘制由虚线连接的点？

Question

我正在使用 Mapbox GL JS 绘制 map 。我有几个要在 map 上绘制的点序列。每个点都应在 map 上显示为一个圆圈。一系列点应该用虚线连接。此外，每个点序列应使用不同的颜色着色。

这是我的 geojson 示例:

const geoJson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: 1,
      },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-77.0366048812866, 38.89873175227713],
          [-77.03364372253417, 38.89876515143842],
          [-77.03364372253417, 38.89549195896866],
          [-77.02982425689697, 38.89549195896866],
          [-77.02400922775269, 38.89387200688839],
          [-77.01519012451172, 38.891416957534204],
          [-77.01521158218382, 38.892068305429156],
          [-77.00813055038452, 38.892051604275686],
          [-77.00832366943358, 38.89143365883688],
          [-77.00818419456482, 38.89082405874451],
          [-77.00815200805664, 38.88989712255097],
        ],
      },
    },
    {
      type: 'Feature',
      properties: {
        id: 2,
      },
      geometry: {
        type: 'LineString',
        coordinates: [
          [-77.027035, 38.913438],
          [-77.015877, 38.917178],
          [-77.009525, 38.917980],
        ],
      },
    },
  ],
};

如果需要，我可以更改 geojson，但这是我的起点。

Answer 1

为了用虚线得到点，我最终添加了 2 层:

  // lines
  map.addLayer({
    id: 'my-points',
    type: 'line',
    source: 'my-data',
    paint: {
      'line-color': 'gray',
      'line-width': 1,
      'line-dasharray': [2, 1],
    },
  });

  // circles
  map.addLayer({
    id: 'my-lines',
    type: 'circle',
    source: 'my-data',
    paint: {
      'circle-color': 'red',
      'circle-radius': 3,
    },
  });