反应原生MapView:什么是latitudeDelta longitudeDelta

时间:2018-06-15 21:11:03

标签: react-native react-native-maps

react native mapview的示例中,他们有latitudeDelta和longitudeDelta。它是否等于高度和宽度?在什么单位?根据他们的github comment ,它说

  

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

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

3 个答案:

答案 0 :(得分:13)

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

曾经仅使用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,
  }}
/>

答案 1 :(得分:5)

在苹果开发者指南中

  

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

GitHub也存在一个问题,因为该图书馆已经解决了https://github.com/react-community/react-native-maps/issues/637

在这篇维基百科文章中,它展示了如何计算精确值
https://en.wikipedia.org/wiki/Latitude#Length_of_a_degree_of_latitude

答案 2 :(得分:0)

您需要

"centroid": {
    "latitude": "24.2472",
    "longitude": "89.920914"
},
"boundingBox": {
    "southWest": {
        "latitude": "24.234631",
        "longitude": "89.907127"
    },
    "northEast": {
        "latitude": "24.259769",
        "longitude": "89.934692"
    }
}

或类似数据正确计算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
      }
    })     
}