使用 FeatureCollection，路线未显示在 android 中

Question

我需要你的一点点查询帮助，我正在尝试在单个地图上渲染多条折线，它看起来像 (IOS)，它在 IOS 中工作得很好，但在 android 中不起作用，所以我的代码片段它，

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.ShapeSource>
    );
  }, [shape, sp]);
  return Poliline;
};

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

///// 使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;
};

它在 IOS 中工作正常但在 android、

中不工作

我也在尝试在没有 truf 助手的情况下手动制作 json，我面临着同样的问题。那么请你帮我如何解决 android, 还有一件事是 SINGLE route 在两个平台上都可以正常工作，所以当我尝试使用 featurecollection json 时它会产生问题，拜托，我非常感谢你，

Answer 1

经过大量努力，我得到了解决方案 Sometime undefined and null is generate default Therefore route line not render on android，但ios它会默认处理所以

export const returnOption = async (res: any, setShape: any) => {
  const feature = await Promise.all(
    res.map(async (item: any, index: any): Promise<any> => {
      if (item[`Route${index}`]?.length > 1) {
        // return makeLineString(item[`Route${index}`]);
        return {
          type: 'Feature',
          properties: {
            prop0: 'value0',
            prop1: 0.0,
          },
          geometry: {
            type: 'LineString',
            coordinates: item[`Route${index}`],
          },
        };
      }
    }),
  );
  const RemoveUndefined = feature?.filter(item => item !== undefined);
  setShape({
    type: 'FeatureCollection',
    features: RemoveUndefined,
  });
};

终于找到解决方法了

使用 FeatureCollection，路线未显示在 android 中

The Route line is not showing in android by using FeatureCollection

polyline

mapbox

react-native