在 react-mapbox-gl 中设置样式 marker/feature？

Question

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

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

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

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

我是不是漏掉了什么？谢谢

Answer 1

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

标记样式

您会注意到 react-mapbox-gl documentation that the style attribute will only effect the marker's container, not the marker itself. If you want to change the style of a Marker you should pass in your own marker as a child to the Marker component. Failing to pass in a child will result in the default light blue, droplet shaped marker being used. Note that this child you pass in as the marker could be a custom svg or even an 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. In the 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 中设置样式 marker/feature？

Stylable marker/feature in react-mapbox-gl?

javascript

mapbox

reactjs

mapbox-gl-js

react-map-gl