RN 解析kml航点文件内容

1. 安装 

npm install react-native-xml2js 

2. 使用 

// mavlink / mavlink_sdk.tsx
//访问原生模块
import { NativeModules } from "react-native";

const { MavlinkSDK } = NativeModules;

/**
 * 获取kml内容
 * @param filePath kml文件存储路径
 * @param callback 
 */
export function getKmlContent(filePath: string, callback?: any){
  MavlinkSDK.getKmlContent(filePath, callback);
}

// index.tsx
import { getKmlContent } from '../mavlink/mavlink_sdk'
let parseString = require('react-native-xml2js').parseString // 解析kml

// 获取kml文件内容
getKmlContent(filePath, (result, error) => {
   parseString(result, (err, result) => {
       let placemarks = getAllPlacemarks(result);
       if (placemarks.length < 1) {
           Alert.alert("kml文件格式不匹配!");
           return;
       }
       console.log('解析的航点数据',placemarks)
   })
})

const getAllPlacemarks = (obj) => {
    let placemarks = []
    function traverse(node) {
        if (node && typeof node === 'object') {
            if (Array.isArray(node)) {
                node.forEach(item => traverse(item))
            } else {
                Object.entries(node).forEach(([key, value]) => {
                    if (key === 'Placemark') { // 航点字段名
                        let arr = value.filter(item => item.Point !== undefined)
                        if (arr.length > 0) {
                            placemarks.push(...arr);
                        }
                    } else {
                        traverse(value);
                    }
                })
            }
        }
    }
    traverse(obj);
    return placemarks;
}