react-mapbox-gl中的样式标记/功能? [英] Stylable marker/feature in react-mapbox-gl?

问题描述

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

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

My question is how to style the marker or feature component?

功能既不接受，也不接受样式道具.

Feature does not accept children nor style prop.

Marker接受样式和子元素，但是它不会呈现通过props传递的任何内容，即使我使用例如 {{background:'blue'}} 对样式没有任何影响.

Marker accepts style and children, however it doesnt render anything passed as props and even if I style it with, e.g. {{ background: 'blue' }} it has no any effects on the style.

我错过了什么吗?谢谢

推荐答案

标记和功能是两个不同的组件，它们以不同的方式工作，但都可以实现您想要的工作.让我们从标记开始.

Marker and Feature are two different components which work in different ways but can both achieve what you are trying to do. Let's start with Markers.

标记样式

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

You will note that in the 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

Here's a Code Sandbox showing this in action: https://codesandbox.io/s/my2p15knj8

图层样式

要为功能设置样式，您首先需要使用图层组件，如有关该图层组件的文档中您会看到必须首先设置图层，然后将要素组件作为子级传递给要渲染该图层的地图上每个位置.像这样:

In order to style Features you will first need to use the Layer component, as mentioned in the documentation for Feature. In the documentation for the Layer component you can see that you must set up your layer first and then pass in the Feature component(s) as a child for every location on the map that you would like to render this Layer. Like so:

<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

Here is a Code Sandbox showing the above in action: https://codesandbox.io/s/l42n3np7xm

要更改显示的图层的外观，您可以使用图层"组件上的 layout 属性.您可以在中找到所有可以更改的设置.Mapbox样式定义.

In order to change the look and feel of the Layer that is displayed you can play around with the layout property on the Layer component. All of the settings that you can change can be found in the Mapbox Style Definition.

这篇关于react-mapbox-gl中的样式标记/功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！