Как изменить радиус окружности в React Mapbox GL

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, поэтому я должен изменить API карты с Mapbox на API Google Map * и т. Д.

Пожалуйста, помогите мне. Привет.

Answer 1

Когда вы получаете событие увеличения / уменьшения масштаба, вы можете получить свойства рисования круга и установить желаемый радиус.

* 1003 например * map.setPaintProperty('range2', 'circle-radius', 100); И вы можете получить события увеличения в 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 }} center={center} zoom={zoom} attributionControl={false} onZoomEnd={this.mapZoomEnd.bind(this)} onZoomStart={this.mapZoomStart.bind(this)} > Надеюсь, это поможет вам.