反应原生MapView:什么是latitudeDelta longitudeDelta

tha*_*sIT 15 react-native react-native-maps

在本机mapview的示例中,它们具有latitudeDelta和longitudeDelta.它是否等于高度和宽度?在什么单位?它说,根据他们的github评论

要显示的最小和最大纬度/经度之间的距离.

但这并没有帮助我.我想知道用户在地图上看到了什么.

Mik*_*tin 17

我也来到这里是因为我找不到任何好文件,谷歌搜索没有帮助.以下是我自己的研究:

只有一个latitudeDeltalongitudeDelta曾经用于计算地图的大小.根据以下公式,它取两个中较大的一个而忽略另一个.这样做是为了避免拉伸地图.

  1. 地图的大小根据样式中指定的宽度和高度和/或由react-native计算.
  2. 地图计算两个值,longitudeDelta/widthlatitudeDelta/height比较这两个计算值,并取两者中较大的一个.
  3. 根据在步骤2中选择的值缩放地图,忽略另一个值.
    • 如果选择的值是longitudeDelta,则左边缘是longitude - longitudeDelta右边缘longitude + longitudeDelta.顶部和底部是填充高度所需的任何值,而不会拉伸地图.
    • 如果选择的值是latitudeDelta,则底边是latitude - latitudeDelta,顶边是latitude + latitudeDelta.左侧和右侧是填充宽度所需的任何值,而不拉伸地图.

这里有些例子:

// this uses latitudeDelta because 0.04/300 > 0.05/600
<MapView
  style={{width: 600, height: 300}}
  region={{
    latitude: 31.776685,
    longitude: 35.234491,
    latitudeDelta: 0.04,
    longitudeDelta: 0.05,
  }}
/>



// this uses longitudeDelta because 0.05/600 > 0/myVar when myVar > 0
<MapView
  style={{width: 600, height: myVar}}
  region={{
    latitude: 40.689220,
    longitude: -74.044502,
    latitudeDelta: 0,
    longitudeDelta: 0.05,
  }}
/>
Run Code Online (Sandbox Code Playgroud)


小智 10

你需要

"centroid": {
    "latitude": "24.2472",
    "longitude": "89.920914"
},
"boundingBox": {
    "southWest": {
        "latitude": "24.234631",
        "longitude": "89.907127"
    },
    "northEast": {
        "latitude": "24.259769",
        "longitude": "89.934692"
    }
}
Run Code Online (Sandbox Code Playgroud)

或类似的数据来正确计算 latitudeDelta 和 longitudeDelta。

下面是 react/react-native 的演示代码。

componentDidMount() {
    const { width, height } = Dimensions.get('window');
    const ASPECT_RATIO = width / height;

    const lat = parseFloat(centroid.latitude);
    const lng = parseFloat(centroid.longitude);
    const northeastLat = parseFloat(boundingBox.northEast.latitude);
    const southwestLat = parseFloat(boundingBox.southWest.latitude);
    const latDelta = northeastLat - southwestLat;
    const lngDelta = latDelta * ASPECT_RATIO;

    this.setState({
      region: {
        latitude: lat,
        longitude: lng,
        latitudeDelta: latDelta,
        longitudeDelta: lngDelta
      }
    })     
}
Run Code Online (Sandbox Code Playgroud)

  • 我花了两个小时寻找这个答案。将“northeastLat”减去“southwestLat”效果非常好。这需要在网络上更多地分享!太感谢了。 (2认同)

nim*_*adi 7

我在苹果开发人员指南中找到了这个

为地图区域显示的东西向的距离(以度为单位)。经度范围所跨越的公里数根据当前纬度而变化。例如,一度经度在赤道处跨越约111公里(69英里)的距离,而在两极处则缩小至0公里。

GitHub中也存在该库已解决的问题
https://github.com/react-community/react-native-maps/issues/637

这种直观的解释还有助于 Wikipedia文章中的stackoverflow.com
,它显示了如何计算精确值
https://en.wikipedia.org/wiki/Latitude#Length_of_a_degree_of_latitude