Question

放大和缩小时，我想改变圆的半径。但现在它是固定的。我在项目中使用了React Mapbox GL。

<Mapa
  style="mapbox://styles/mapbox/light-v9"
  onDrag={this.onDrag}
  fitBounds={fitBounds}

  fitBoundsOptions={boundOptions}
  containerStyle={{
    height: "100%",
    width: "100%"
  }}
  flyToOptions={{
    speed: 0.8
  }}
  attributionControl={false}
>
    <Layer
          type="circle"
          id="range2"
          paint={{
            'circle-radius': ranges[1],
            'circle-color': '#aa0000',
            'circle-opacity': 0.2,
            'circle-stroke-color': '#cc0000',
            'circle-stroke-width': 2,
            'circle-stroke-opacity': 1
          }}>

          {points && points.map((point, index) => {
            return <Feature key={`map-range-${index}`} coordinates={point}/>
          })}           

    </Layer>
</Mapa>
...
this.Mapa = ReactMapboxGl.Map({
  accessToken: "************************************",
  dragRotate: false,
  interactive: true,
  scrollZoom: scrollZoom,
  minZoom: 1,
  maxZoom: this.state.maxZoom,
});

我在使用React Mapbox GL方面遇到一些问题，所以我应该将Map API从 Mapbox 更改为 Google Map API 等吗？

请帮帮我。问候。

Answer 1

当您获得放大/缩小事件时，您可以获得圆的绘画属性并根据需要设置半径。

e.g

$ docker history spekulant/dockertestcommess
IMAGE               CREATED             CREATED BY                                      SIZE                COMMENT
d3c3f4e85723        7 minutes ago       /bin/sh -c cat helloworld.txt                   0B                  Foo bar
fec5f399e907        3 days ago          /bin/sh -c #(nop)  CMD ["/bin/sh" "-c" "cat …   0B
0f0405202b75        3 days ago          /bin/sh -c #(nop) COPY file:17e1650f32b894fc…   8B
3fd9065eaf02        3 months ago        /bin/sh -c #(nop)  CMD ["/bin/sh"]              0B
<missing>           3 months ago        /bin/sh -c #(nop) ADD file:093f0723fa46f6cdb…   4.15MB

你可以使用以下方法获取放大React-mapbox-gl的事件。

map.setPaintProperty('range2', 'circle-radius', 100);

我希望它可以帮到你。

如何在React Mapbox GL中更改圆的半径

1 个答案:

e.g