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

Question

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

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

功能不接受子项或样式属性。

标记接受样式和子项，但是它不会渲染作为 Prop 传递的任何内容，即使我使用它的样式，例如{{ 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您可以看到，您必须首先设置图层，然后将要素组件作为子组件传递给 map 上您想要渲染此图层的每个位置。就像这样:

<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 中找到。 .