Question

我正在使用https://github.com/alex3165/react-mapbox-gl

我的问题是如何设置标记或要素组件的样式？

功能不不接受孩子，也不接受样式道具。

Marker接受样式和子元素，但是它不会呈现通过props传递的任何内容，即使我使用例如{{ background: 'blue' }}对样式没有任何影响。

我错过了什么吗？谢谢

Answer 1

标记和功能是两个不同的组件，它们以不同的方式工作，但是都可以实现您想要的工作。让我们从标记开始。

标记样式

您会注意到，在react-mapbox-gl documentation中，style属性只会影响标记的容器，而不会影响标记本身。如果要更改标记的样式，则应将自己的标记作为子代传递给标记组件。未能通过孩子将导致使用默认的浅蓝色，水滴形标记。请注意，您作为标记传递的孩子可能是自定义svg甚至是html component that is styled with 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

图层样式

要对要素进行样式设置，首先需要使用documentation for Feature中提到的“图层”组件。在documentation for the Layer component中，您必须先设置图层，然后将要素组件作为子代传递给要渲染该图层的地图上每个位置。像这样：

<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属性。您可以在Mapbox Style Definition中找到所有可以更改的设置。

react-mapbox-gl中的样式标记/功能？

1 个答案: