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

Question

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

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

功能不接受儿童也不接受样式道具。

Marker 接受样式和子项，但是它不会渲染任何作为道具传递的东西，即使我使用它设置样式，例如{{ background: 'blue' }} 对样式没有任何影响。

我错过了什么吗？谢谢

Answer 1

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

标记样式

您会注意到，在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 中，您可以看到您必须首先设置您的图层，然后将 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 属性。您可以更改的所有设置都可以在Mapbox Style Definition 中找到。