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

Posted 2023-02-24

【中文标题】react-mapbox-gl中的可样式标记/功能？

【英文标题】：Stylable marker/feature in react-mapbox-gl?

【发布时间】：2018-12-29 18:49:02

【问题描述】：

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

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

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

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

我错过了什么吗？谢谢

【参考方案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 中找到。

【讨论】：

不幸的是，您关于标记的建议都没有奏效。即使我将孩子传给它，标记也保持不变。更重要的是 - 即使我将内联样式传递给它，也没有任何改变......

也许您可以创建一个 CodePen 来重现该问题，以便我更好地理解？

给你，你可以看到标记没有任何反应:(codesandbox.io/s/8x2pmzkj59

刚刚用代码沙箱更新了我的答案，向您展示了如何让事情正常进行。我认为您需要更仔细地阅读我的答案，因为在您的沙箱中，您在 组件中有 组件，我特别提到它不起作用。

我正在尝试使用自定义功能组件（返回 <Feature />），但除非它的直接子级是纯 <Feature />，否则它会给出错误“无法读取未定义的属性 0 “？