Как изменить размеры фигур, нарисованных на карте, на основе значения масштаба с помощью response-native-maps

Question

Я использую react-native-maps для интеграции карт в мое приложение. Я хочу показать какой-то вид радара в направлении, в котором движется пользователь, я хочу охватить территорию, покрытую различными расстояниями, такими как 1 км, 5 км и 10 км. в результате получилось что-то похожее на изображение нижеподход.

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

Мое второе решение состояло в том, чтобы нарисовать круги вокруг пользовательского маркера определенного радиуса, а не полного круга, я могу создать полукруги или полукруги. желание результата. Но я не могу найти способ нарисовать полукруг с библиотекой react-native-maps.

Есть предложения, как мне достичь желаемого результата?

Answer 1

Вы можете использовать Наложение (круг, многоугольник) или сделать свое собственное наложение, чтобы покрыть определенные области на карте.

Как это,

Ссылка для наложенных документов: карты реакции-сообщества-сообщества / карты-реакции

Ксделайте его динамическим, точно рассчитайте longitudeDelta и LatitudeDelta.

Answer 2

Ваше первое решение кажется мне достаточно хорошим, возможно, небольшие модификации дадут вам результат, который вы ищете, следуйте инструкциям:

1. Сначала давайте свяжем все соответствующие реквизиты для <View /> стайлинга сзначения состояний

// ... all your imports and other code

state ={
    viewHeight: 0, // or any default value you want
    viewWidth: 0, // or any default value you want

    // ... other view parameters used and other state values
}

// ... functions and other code

render() {
    return (
        // ... other rendered components etc

        <View
            style={{
                width: this.state.viewWidth,
                height: this.state.viewHeight
            }} />
    )
}

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

<MapView
    ref='map'                                       // <==== add the ref map so we can access the zoom level from our _onMapChange function later
    style={{ flex: 1 }}
    provider={PROVIDER_GOOGLE}                      // <==== this approach will not work on apple maps as the camera will not give us the zoom parameter so use google maps
    onRegionChange={() => this._onMapChange()} />   // <==== this will tell the map to fire the _onMapChange() function everytime there is a change to the map region

Функция _onMapChange():

_onMapChange = async () => {
    const {
        zoom,
        pitch,
        center,
        heading 
    } = await this.refs.map.getCamera();

    // Now set the conditions for the view style based on the zoom level, maybe something like this:

    if (zoom <= 5) {
        this.setState({
            viewWidth: 50,  // what ever width you want to set
            viewHeight: 50  // what ever height you want to set
            // ... other view parameters
        })
    } else if (zoom <= 10) {
        this.setState({
            viewWidth: 100,  // what ever width you want to set
            viewHeight: 100  // what ever height you want to set
            // ... other view parameters
        })
    }
}

Heads-Up: я использую свой редактор, вот и все, поэтому могут быть некоторые синтаксические ошибки

Надеюсь, это поможет!