如何使用 react-native-maps 根据缩放值调整在 map 上绘制的形状的大小

Question

我正在使用react-native-maps将地图集成到我的应用程序中。 我想显示某种雷达朝向用户前进的方向，我想覆盖不同距离的区域，如 1 公里、5 公里和 10 公里。 导致如下图所示。

我最初的解决方案是使用View with position absolute 来绘制形状，我用这种方法得到了类似的东西。

上述方法的问题是View高度是 static，它不响应 map 的缩放值，而且相对于距离的View高度的计算也很重要。

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

有什么建议我怎样才能达到期望的结果？

Answer 1

您的第一个解决方案对我来说似乎已经足够好了，也许稍作修改就可以得到您想要的结果，请继续：

1. 首先让我们将所有相关的<View />样式道具关联到 state 值

// ... 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. 接下来，我们将获得 map 缩放级别每次更改并执行某种条件时

<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() function：

_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

您可以使用叠加（圆形、多边形）或自定义叠加以覆盖 map 上的某些区域。

像这样，

覆盖文档的链接： react-native-community/react-native-maps

要使其动态化，请精确计算 longitudeDelta 和 LatitudeDelta。