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

Question

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

我最初的解决方案是使用具有绝对位置的 View 绘制形状， 我通过这种方法得到了类似的东西。

上述方法的问题是 View 高度是静态的，它不响应 map 的缩放值，以及 View 高度的计算距离很重要。

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

有什么建议可以实现我想要的结果吗？

Answer 1

你的第一个解决方案对我来说似乎已经足够好了，也许稍作修改就可以得到你正在寻找的结果，请继续:

1. 首先让我们关联所有相关的 <View />样式化 Prop 以说明值(value)

// ... 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

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

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

希望对您有所帮助!