如何在 MapBox 中移动单个图层点？

Question

我刚刚开始使用 MapBox，并且使用 MapBox Studio 成功创建了一个样式。这种样式有一个图层，里面全是我上传的数据集中的点。

我想创建一个效果，通过该效果其中一些点不断移动。我知道我可以通过将setPaintProperty 应用于circle-translate 属性来移动所有点。但是个别的呢？

换句话说，我应该如何从 JavaScript 移动我在 MapBox Studio 中添加到地图中的各个点？

Answer 1

移动一些点的正常方法是使用.setData() 来更新整个数据集。

请参阅此示例以了解该方法：https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/

您的替代方法，使用circle-translate 听起来可以移动一些点，如果它支持数据驱动的样式，it doesn't。

但是，如果您对所有点都以相同方式移动的图层感到满意，那么这应该可以：

let offset = [0, 0];

map.addLayer({
  id: 'somepoints',
  type: 'circle',
  paint: {
    'circle-translate': offset
  },
  filter: [...insert filter here...]
});

当您需要移动点时：

offset = [3, -2]; // or whatever
map.setPaintProperty('somepoints','circle-translate', offset);