React Native MapView：什么是latitudeDelta和longitudeDelta？

Question

在React Native MapView的例子中，它们有latitudeDelta和longitudeDelta。它是否等于高度和宽度？以及使用什么单位？根据他们的GitHub评论，它说：

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

但这对我没有帮助。我想知道用户在地图上看到的内容。

- thatsIT

---

可能是重复的问题：如何在React Native地图中进行缩放？ - OM Bharatiya

这是迄今为止对我来说最好的解释：https://dev59.com/YloV5IYBdhLWcg3wGrqI#36688156 - Juan P. Ortiz

Answer 1

我也来到这里是因为找不到好的文档，谷歌搜索也没有帮助。以下是我的研究结果:

在计算地图大小时，只有latitudeDelta或longitudeDelta中的一个会被使用，根据以下公式取两者中较大的值并忽略另一个值，以避免地图拉伸。

1. 地图的大小根据样式中指定的宽度和高度进行计算和/或由react-native计算出。
2. 地图计算两个值，longitudeDelta/width和latitudeDelta/height，比较这2个计算出的值，并取其中较大的一个。
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,
  }}
/>

- Mike Martin

Answer 2

你需要 <\p>

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

- M. Sihan

---

我花了两个小时来寻找这个答案。将“northeastLat”减去“southwestLat”的方法非常有效。这个方法需要在网络上分享更多！非常感谢你。 - Luke Brown

Answer 3

我在苹果开发者指南中找到了这个内容：

显示地图区域时，要显示的东西方向距离（以度为单位）。经线范围所跨越的公里数因当前纬度而异。例如，在赤道上，一度经线跨越约111公里（69英里），但在两极则缩小至0公里。

在GitHub上也有一个相关库的问题已经得到解决：
https://github.com/react-community/react-native-maps/issues/637

这个视觉解释也很有帮助：stackoverflow.com。
在维基百科的文章中，它展示了如何计算精确值：
https://en.wikipedia.org/wiki/Latitude#Length_of_a_degree_of_latitude

- nima moradi

Answer 4

如果你和我一样想要以固定的x公里宽度打开谷歌地图，那么Nima的评论非常有用 :)

无论你在地球上的哪个位置，1公里的纬度增量都是一致的（1度纬度约为110.574公里）

但是，1公里需要不同的经度增量，这取决于你距赤道有多远。基本上，1度经度在赤道上覆盖了约111公里，但在北极却很近，正如这张图片所示：

我从其他StackOverflow帖子中学习到了知识，想分享一下我的简单转换公式，用于km<-->纬度和km<-->经度之间的转换。这些公式的精度足以满足大多数人的需求，而不需要涉及地球不是完全球体的奇怪地球物理学问题。

以下内容应该已经足够满足大多数人的需求了！

function radiansToDegrees(angle) {
  return angle * (180 / Math.PI);
}

function degreesToRadians(angle) {
  return angle * (Math.PI / 180);
}

function latitudesToKM(latitudes) {
  return latitudes * 110.574;
}

function kMToLatitudes(km) {
  return km / 110.574;
}

function longitudesToKM(longitudes, atLatitude) {
  return longitudes * 111.32 * Math.cos(degreesToRadians(atLatitude));
}

function kMToLongitudes(km, atLatitude) {
  return km * 0.0089831 / Math.cos(degreesToRadians(atLatitude));
}

如果要在[-0.056809, 51.588491]点上以1公里的宽度打开react-native-maps视图，你只需要执行以下操作:

<MapView
  region={{
  latitude: 51.588491,
  latitudeDelta: 0.00001, //any number significantly smaller than longitudeDelta
  longitude: -0.056809,
  longitudeDelta: kMToLongitudes(1.0, 51.588491),
          }}
  ...

所有这些信息已经在其他StackOverflow帖子中公开了，但我想在一个地方分享所有这些信息，以防它能为一些人节省时间！

- JohnDev