Стилируемый маркер / особенность в Reaction-mapbox-gl?

Question

Я использую https://github.com/alex3165/react-mapbox-gl

У меня вопрос, как стилизовать маркер или компонент?

Особенность не принимает детей, ни стиль опоры.

Маркер принимает стиль и потомки, однако он не рендерит что-либо, переданное как реквизит, и даже если я его стилизую, например {{ background: 'blue' }} это не имеет никакого влияния на стиль.

Я что-то пропустил? Спасибо

Answer 1

Маркер и функция - это два разных компонента, которые работают по-разному, но оба могут достичь того, что вы пытаетесь сделать. Давайте начнем с маркеров.

Маркер Стайлинг

Вы заметите, что в документации про-mapbox-gl style Атрибут будет влиять только на контейнер маркера, но не на сам маркер. Если вы хотите изменить стиль маркера, вы должны передать свой собственный маркер в качестве дочернего для компонента Marker. Если не передать ребенка, по умолчанию будет использоваться светло-синий маркер в форме капли. Обратите внимание, что этот дочерний элемент, который вы передаете в качестве маркера, может быть пользовательским svg или даже html-компонентом, стилизованным под CSS.

<Marker
  coordinates={[-0.2416815, 51.5285582]}
  anchor="bottom">
  <img src={linkToMyCustomMarker}/>
</Marker>

или же...

<Marker
  coordinates={[-0.2416815, 51.5285582]}
  anchor="bottom">
  <div class="mapMarkerStyle"></div>
</Marker>

Вот песочница кода, показывающая это в действии: https://codesandbox.io/s/my2p15knj8

Layer Styling

Для того, чтобы стилизовать Объекты, вам сначала нужно будет использовать компонент Layer, как указано в документации для Feature. В документации по компоненту Layer вы можете видеть, что сначала вы должны настроить свой слой, а затем передать компонент (ы) Feature в качестве дочернего для каждого местоположения на карте, которое вы хотите отобразить в этом слое. Вот так:

<Layer type="circle" id="marker" paint={{
  'circle-color': "#ff5200",
  'circle-stroke-width': 1,
  'circle-stroke-color': '#fff',
  'circle-stroke-opacity': 1
 }}>
  <Feature coordinates={[-0.132,51.518]}/>
  <Feature coordinates={[-0.465,51.258]}/>
</Layer>

Вот песочница с кодом, показывающая вышесказанное в действии: https://codesandbox.io/s/l42n3np7xm

Чтобы изменить внешний вид отображаемого слоя, вы можете поиграть с layout свойство компонента Layer. Все настройки, которые вы можете изменить, можно найти в определении стиля Mapbox.