1

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

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

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

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

我错过了什么吗？谢谢

4

1 回答 1

3

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

标记样式

您会注意到，在react-mapbox-gl 文档中，该style属性只会影响标记的容器，而不是标记本身。如果要更改标记的样式，则应将自己的标记作为子标记传递给标记组件。未能通过孩子将导致使用默认的浅蓝色水滴形标记。请注意，您作为标记传入的这个子元素可能是自定义 svg 甚至是使用 CSS 样式设置的 html 组件。

<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

图层样式

为了设置 Features 的样式，您首先需要使用 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图层组件上的属性。您可以更改的所有设置都可以在Mapbox 样式定义中找到。

于 2018-07-21T21:49:30.330 回答