如何绘制用虚线连接的点？

Question

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

这是我的 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,
    },
  });