如何使用React Native Maps根据缩放值调整绘制在地图上的形状大小

Question

我正在使用 react-native-maps 在我的应用程序中集成地图。我想显示某种雷达，指示用户前进的方向，我想要显示不同距离（如1公里、5公里和10公里）覆盖的区域，最终呈现如下所示的内容。

我的初始解决方案是使用 View 绘制形状，并采用绝对位置，但使用该方法得到的结果如下：

以上方法的问题在于 View 的高度是静态的，它无法响应地图的缩放值，而且根据距离计算 View 的高度是非常困难的。

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

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

- Ahsan Sohail

Answer 1

您可以使用覆盖层（圆形、多边形）或自定义覆盖层来覆盖地图上的特定区域。

就像这样，

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

为了使其动态化，需要精确计算longitudeDelta和LatitudeDelta。

- huzaifamandviwala

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
        })
    }
}

注意：我只是使用我的编辑器，所以可能会有一些语法错误

希望这可以帮到你！

- Abdeen

---

谢谢您的回复，听起来是一个不错的解决方案，但我认为它并不是。原因是我想要视图的高度或边缘距离“距离我的当前位置1公里”，我该如何根据缩放值将公里转换为像素，这需要很多计算。 - Ahsan Sohail