如何基于带有react-native-maps的缩放值调整在地图上绘制的形状的大小

Question

我正在使用react-native-maps将地图集成到我的应用程序中。我想显示某种雷达的航向，即用户的航向，我要覆盖1公里，5公里和10公里等不同距离的区域。结果如下图所示。

我最初的解决方案是使用View绘制形状为绝对位置的形状，我的方法是这样的。

上述方法的问题是View高度是静态的，并且不响应地图的缩放值，因此View高度相对于距离的计算也不是简单的。

我的第二个解决方案是在一定半径的用户标记周围绘制圆，而不是一个完整的圆，我可以创建半圆或半半圆来实现所需的结果。但是我找不到用库react-native-maps绘制半圆的任何方法。

任何建议我怎么能达到期望的结果？

Answer 1

您的第一个解决方案对我来说似乎足够好，也许稍作修改就可以为您提供所需的结果，请继续：

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

3. _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
        })
    }
}

注意：我正在使用我的编辑器，因此可能存在一些语法错误

希望有帮助！

Answer 2

您可以使用叠加层（圆形，多边形），也可以使您的自定义叠加层覆盖地图上的某些区域。