React本地地图：Easy Bird's Eye View Animation
#javascript #初学者 #教程 #reactnative
  1. 简介
  2. 设置项目
  3. 了解MapView Props
  4. 创建动画
  5. 结论
  6. Full Code

介绍

嘿，开发人员！有没有想过要给您的反应本地地图有新鲜的变化吗？今天，我们正在跳入创建鸟眼的视图动画，为用户提供引人入胜且提升的视角。最好的部分？使用地图和动画是完全免费的！只有几行代码，我们得到了一个不错的鸟类视图动画！我们的目标是创建以下内容 -

final prod

设置项目

  1. Create an Expo Project

  2. Add the MapView dependency
    npx expo install react-native-maps

  3. 创建基本地图视图

import React from "react";
import { StyleSheet, View } from "react-native";
import MapView from "react-native-maps";

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});

您应该有以下内容。

mapview default

太好了，我们已经一半了！

了解Mapview道具

现在，为了有趣的部分 - 了解相关的MapView道具！阅读完整的MapView documentation时，您可以看到许多道具，但我们只需要以下内容：

  • maptype ：支撑我们正在使用的地图层类型。我使用“卫星”，因为我们只关心地图，而不关心销钉或引脚标签，但可以随意使用任何其他层。

  • 相机：支撑控制我们在屏幕上查看的区域，标题（方向面），变焦级别和“俯仰”（上倾角）。

让我们现在测试这些道具！让我们尝试从严格的顶视图映射金字塔。

<MapView
        style={styles.map}
        mapType="satellite"
        camera={{
          center: {
            latitude: 29.978,
            longitude: 31.131,
          },
          pitch: 0, // Change this value to set the desired pitch
          heading: 0, // Direction faced by the camera, in degrees clockwise from North.
          zoom: 15.5, // Closer values mean a higher zoom level.
        }}
      />

我们得到以下 -

mapview basic camera unconfigured

相对于原始的，将 pitch 修改为90，我们得到 -

modified pitch

我们可以看到我们创造了一个抑郁角度。

接下来 - 相对于原始，将标题修改为180，我们得到 -

modified heading

我们可以看到我们最终在集中在金字塔上的虚构轨道的另一侧。

我们现在知道，俯仰控制着指定区域的抑郁角度，并且标题控制着我们在指定区域的虚轨道上所面对的方向。现在让我们进行动画！

创建动画

为了创建动画，我们必须首先了解动画的工作方式。我们希望相机在旋转指定区域时保持专注于区域。

animation sketch

我们唯一需要更新的是我们在该圈子上的位置，因此我们只需要经常更新标题即可。对于动画，中心和音高将保持不变。

要经常更新标题，我们需要更新标题状态，因此我们将使用Usestate。我们还将在一个间隔上更新状态，以便我们可以获得“鸟类的眼景”绕行动画。以下是我们在返回之前添加的内容 - 

 //animation to circle map
  const [heading, setHeading] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setHeading((prevHeading) => (prevHeading + 0.1) % 360); // Increment heading, and reset to 0 after reaching 360
    }, 10);

    return () => clearInterval(intervalId); // Clear the interval when component is unmounted
  }, []);

并更新标题变量以动态 - 

heading: heading, // Direction faced by the camera in degrees clockwise from North.

我们已经完成了，现在应该有这样的东西 -

final prod

结论

那是一个包裹！随着鸟眼的视图效果，您的反应本地地图变得更加凉爽。正是这些周到的触摸可以使应用程序真正脱颖而出。继续探索，继续创新，一如既往，愉快的编码！

请喜欢并在github @noahvelasco上关注我！

完整代码

Full Code on Github

import React, { useState, useEffect } from "react";
import { StyleSheet, View } from "react-native";
import MapView from "react-native-maps";

export default function App() {
  //animation to circle map
  const [heading, setHeading] = useState(0);
  useEffect(() => {
    const intervalId = setInterval(() => {
      setHeading((prevHeading) => (prevHeading + 0.1) % 360); // Increment heading, and reset to 0 after reaching 360
    }, 10);

    return () => clearInterval(intervalId); // Clear the interval when component is unmounted
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        mapType="satellite"
        camera={{
          center: {
            latitude: 29.978,
            longitude: 31.131,
          },
          pitch: 90, // Change this value to set the desired pitch
          heading: heading, // Direction faced by the camera, in degrees clockwise from North.
          zoom: 15.5, // Closer values mean a higher zoom level.
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});