es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La línea de ruta no se muestra en Android utilizando FeatureCollection.

06 Aug, 2023 Programación

Necesito tu ayuda con una pequeña consulta. Estoy tratando de renderizar varias polilíneas en un solo mapa, se ve así (IOS):

enter image description here

Funciona perfectamente en IOS, pero no funciona en Android, así que aquí está mi fragmento de código:

import MapboxGL from '@react-native-mapbox-gl/maps';
const MapbBoxDirection = ({shape}: any) => {
  const sp = returnOption(shape);
  const Poliline = React.useMemo(() => {
    return (
      <mapboxgl.animated.shapesource id="routeSource" buffer="{512}" tolerance="{1}" linemetrics="{false}" clusterradius="{10}" shape="{sp}">
        <mapboxgl.animated.linelayer id="routeFill" style="{{" linecolor:="" '#ff8109',="" linewidth:="" 10,="" lineroundlimit:="" 12,="" linecap:="" 'round',="" lineopacity:="" 1.84,="" }}=""></mapboxgl.animated.linelayer>
      </mapboxgl.animated.shapesource>
    );
  }, [shape, sp]);
  return Poliline;
};

import {featureCollection, lineString as makeLineString} from '@turf/helpers';

///// Crear Json

export const returnOption = (res): any => {
  const feature = res.map((item: any, index: any) => {
    if (item[`Route${index}`]?.length > 2) {
      return makeLineString(item[`Route${index}`]);
    }
  });
  const featureCollectiondata = featureCollection(feature);
  return featureCollectiondata;
};

Funciona bien en IOS, pero no en Android.

También he intentado crear un json manualmente sin la ayuda de Truf, pero tengo el mismo problema.
Así que, ¿podrías por favor ayudarme a resolverlo para Android?
Otra cosa es que una sola ruta funciona bien en ambas plataformas, así que cuando trato de usar el json de featurecollection, causa problemas.
Te agradezco mucho por tu ayuda.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hola,

    Parece que estás teniendo problemas para renderizar múltiples polilíneas en un solo mapa utilizando react-native-mapbox-gl, y funciona bien en iOS pero no en Android. Has compartido un fragmento de código que es útil para entender el problema.

    Según el fragmento de código, veo que estás utilizando la función returnOption para crear una colección de entidades para renderizar las polilíneas en el mapa. Como mencionaste que una sola ruta funciona bien en ambas plataformas, es posible que el problema esté en los datos que estás utilizando para crear la colección de entidades.

    Te sugiero que intentes depurar el código y verifiques si los datos que estás utilizando para crear la colección de entidades son correctos en ambas plataformas. También puedes intentar utilizar la API de Mapbox para crear la colección de entidades y ver si resuelve el problema.

    Aquí tienes un ejemplo de fragmento de código que utiliza la API de Mapbox para crear una colección de entidades:

    import MapboxGL from '@react-native-mapbox-gl/maps';
import { featureCollection, lineString as makeLineString } from '@turf/helpers';

const MapbBoxDirection = ({ shape }: any) => {
  const feature = shape.map((item: any, index: any) => {
    if (item[`Route${index}`]?.length > 2) {
      const coordinates = item[`Route${index}`].map((coord: any) => [coord.longitude, coord.latitude]);
      return makeLineString(coordinates);
    }
  });

  const features = featureCollection(feature);

  return (
    <mapboxgl.shapesource id="routeSource" shape="{features}">
      <mapboxgl.linelayer id="routeFill" style="{{" linecolor:="" '#ff8109',="" linewidth:="" 10,="" lineroundlimit:="" 12,="" linecap:="" 'round',="" lineopacity:="" 1.84,="" }}=""></mapboxgl.linelayer>
    </mapboxgl.shapesource>
  );
};

export default MapbBoxDirection;

    En este fragmento de código, estamos utilizando la API de Mapbox para crear la colección de entidades en lugar de la función returnOption. Convertimos las coordenadas al formato [longitude, latitude] y creamos una entidad makeLineString utilizando esas coordenadas.

    Espero que esto te ayude a resolver el problema. Hazme saber si tienes alguna otra consulta.

Comments are closed.