Руководство по добавлению аннотаций точек в Mapbox View

Аннотации точек можно очень легко добавить на карту. В предыдущей статье мы рассмотрели, как добавить представление карты Mapbox в наше приложение React Native. В этой статье мы продолжим с этого момента, и я покажу вам, как добавить точку аннотации на карту. Для начала мы бы открыли проект ReactNativeMapbox из предыдущей статьи.
Затем откройте файл App.js. Вы должны увидеть следующее содержимое

import React from "react";
import { View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";


MapboxGL.setAccessToken('MAPBOX_TOKEN_GOES_HERE');

export default App = () => {

  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
      </MapboxGL.MapView>
    </View>
  )
}

Затем запустите приложение на эмуляторе, чтобы убедиться, что карта все еще отображается. Запустите следующую команду на своем терминале, чтобы запустить приложение на симуляторе iOS.

yarn ios

Вы должны увидеть приложение, работающее на симуляторе iOS, с красивой картой.
Скриншот 2020-09-04 на 17.54.56.png

Затем мы добавим аннотацию точки на карту. Для этого давайте создадим функцию для отображения нашей точки аннотации. Код выглядит так

const renderAnnotations = () => {
    return (
      <MapboxGL.PointAnnotation
        key="pointAnnotation"
        id="pointAnnotation"
        coordinate={[3.3362400, 6.5790100]}>
        <View style={{
                  height: 30, 
                  width: 30, 
                  backgroundColor: '#00cccc', 
                  borderRadius: 50, 
                  borderColor: '#fff', 
                  borderWidth: 3
        		}} />
      </MapboxGL.PointAnnotation>
    );
  }

В приведенном выше коде мы используем компонент PointAnnotation из Mapbox для отображения точки на карте. Компонент принимает некоторые реквизиты. Одной из опор является координатная опора. Этот координатный реквизит показывает нам, где точка будет расположена на карте. В большинстве случаев это те же координаты, что и в компоненте MapView. Мы также добавили компонент View и стилизовали его как наш точечный индикатор.

Затем мы вызовем эту функцию в компоненте MapView, как показано ниже.

 <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
          {renderAnnotations()} // => function called here
      </MapboxGL.MapView>

Собрав все вместе, это весь компонент App.js с точечной аннотацией.

import React from "react";
import { View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";


MapboxGL.setAccessToken('MAPBOX_TOKEN_GOES_HERE');

export default App = () => {

  const renderAnnotations = () => {
    return (
      <MapboxGL.PointAnnotation
        key="pointAnnotation"
        id="pointAnnotation"
        coordinate={[3.3362400, 6.5790100]}>
        <View style={{
                  height: 30, 
                  width: 30, 
                  backgroundColor: '#00cccc', 
                  borderRadius: 50, 
                  borderColor: '#fff', 
                  borderWidth: 3
                }} />
      </MapboxGL.PointAnnotation>
    );
  }

  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
            animationMode={'flyTo'}
            animationDuration={0}
          >
          </MapboxGL.Camera>
          {renderAnnotations()}
      </MapboxGL.MapView>
    </View>
  )
}

Вы должны увидеть карту на симуляторе с точкой в центре. Если нет, вы можете запустить yarn ios или просто перезагрузить симулятор. Симулятор должен выглядеть так
Скриншот 2020-09-05 в 18.10.39.png