React Mapbox GL - Как рисовать изображения на карте, используя Layer и Feature вместо маркеров

Question

Я использую React Mapbox GL в своем проекте, и, поскольку я использую маркер для примерно 10000 точек данных, производительность не так хороша. Я прочитал документацию и там написано

Примечание. При рендеринге многих объектов избегайте использования маркеров, поскольку это отрицательно скажется на производительности. Вместо этого используйте слои и элементы.

Как использовать слои и элементы для отображения маркеров?

Answer 1

Чтобы отобразить что-либо со слоями и элементами, поместите один или несколько Компоненты элементов внутри Компонент слоя . Вы можете назначить каждой функции позицию, используя coordinates prop.

Теперь осталось только стилизовать эти функции. То, как вы это сделаете, зависит от того, что ранее содержалось в ваших маркерах, но, например, если вы хотите нарисовать круги для каждой из позиций, вы можете установить для слоя type значение circle и значение paint prop, укажите значения для circle-color и circle-radius (они описаны в документах mapbox-gl API .

Для рисования изображений для каждой координаты вы можете использовать icon-image layout свойство на слое (вам придется либо использовать ранее существующий значок, либо загрузить его в Mapbox Studio ).

Вы можете увидеть пример кода в демоверсиях например, демонстрация всех форм данные стилей с кружками.