update：kmz/json转换、kmz打包后无法解析等

GuLiMmo

2024-03-12 55fcb97a3d487f54353564f1e402e4d4b61feee9

 src/utils/cesium/kmz.ts

@@ -1,5 +1,8 @@
import axios from 'axios'
import JsZip from 'jszip'
import toGeoJson from '@mapbox/togeojson'
// import Xml2Json from 'xml2json'
// const xmlJson = new Xml2Json()

const noWmpl: string[] = ['Folder', 'Placemark', 'Point', 'coordinates']

@@ -13,12 +16,14 @@
    .get(filePath, { responseType: 'arraybuffer' })
    .then((fileRes) => fileRes.data)
    .then((kmzData) => JsZip.loadAsync(kmzData)) // 解压kmz文件
    .then((kmzZip) => {
      // 通过文件名找到 KML 文件
      const kmlFile = kmzZip.file(/\.kml$/i)[0]
    .then((zipFile) => {
      const files: { [key: string]: Promise<string> } = {}
      Object.keys(zipFile.files).forEach((key: string) => {
        files[key] = zipFile.files[key].async('text')
      })
      return {
        file: kmzZip,
        content: kmlFile.async('text')
        zip: zipFile,
        fileInfoObj: files,
      }
    })
}
@@ -51,13 +56,17 @@
    if (Object.prototype.toString.call(settingParmas[key]) === '[object Object]') {
      let parmaStr = ''
      Object.keys(settingParmas[key]).forEach((v) => {
        const xml = noWmpl.includes(key) ? `<${v}>${settingParmas[key][v]}</${v}>` : `<wpml:${v}>${settingParmas[key][v]}</wpml:${v}>`
        const xml = noWmpl.includes(key)
          ? `<${v}>${settingParmas[key][v]}</${v}>`
          : `<wpml:${v}>${settingParmas[key][v]}</wpml:${v}>`
        parmaStr += xml
      })
      const xml = noWmpl.includes(key) ? `<${key}>${parmaStr}</${key}>` : `<wpml:${key}>${parmaStr}</wpml:${key}>`
      paramGroup += xml
    } else {
      const xml = noWmpl.includes(key) ? `<${key}>${settingParmas[key]}</${key}>` : `<wpml:${key}>${settingParmas[key]}</wpml:${key}>`
      const xml = noWmpl.includes(key)
        ? `<${key}>${settingParmas[key]}</${key}>`
        : `<wpml:${key}>${settingParmas[key]}</wpml:${key}>`
      paramGroup += xml
    }
  })
@@ -73,3 +82,73 @@
    return str.slice(0, index) + char + str.slice(index)
  }
}

export const getTagNameFromXml = (xmlString: string): string | null => {
  const parser = new DOMParser()
  const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
  const element = xmlDoc.documentElement
  if (element && element.tagName) {
    return element.tagName // 返回的是类似 "WPML:USEGLOBALHEADINGPARAM" 的全大写形式
  }
  return null
}

// 将xml转为json
const deepParse = (xmlDoc: Document, tagName: string) => {
  const xmlObj: { [key: string]: any } = {}
  const rootDom = xmlDoc.getElementsByTagName(tagName)[0]
  for (let i = 0; i < rootDom.children.length; i++) {
    const child = rootDom.children[i]
    const childName = child.nodeName.replace('wpml:', '')
    if (child.children.length > 0) {
      xmlObj[childName] = deepParse(xmlDoc, child.nodeName)
    } else {
      if (xmlObj[childName] !== undefined) {
        if (!Array.isArray(xmlObj[childName])) {
          xmlObj[childName] = [xmlObj[childName]]
        }
        xmlObj[childName].push(child.textContent)
      } else {
        const value = child.textContent?.split('\n').join('').split(' ').join('')
        xmlObj[childName.replace('wpml:', '')] = value
      }
    }
  }
  return xmlObj
}
export const XMLToJSON = (xmlStr: string, tagName: string) => {
  const parser = new DOMParser()
  const xmlDoc = parser.parseFromString(xmlStr, 'text/xml')
  const xmlObj = deepParse(xmlDoc, tagName)
  delete xmlObj.parsererror
  return xmlObj
}

// json转xml
export const JSONToXML = (JSONData = {}) => {
  if (!JSONData) return ''
  let res = ''
  const JSONParse = (obj: { [x: string]: any }) => {
    for (const key in obj) {
      if (Array.isArray(obj[key])) {
        obj[key].forEach((item: any, index: any) => {
          let xmlTag = ''
          if (noWmpl.includes(key)) {
            xmlTag = `<${key} rowNum="${index}">${item}</${key}>`
          } else {
            xmlTag = `<wpml:${key} rowNum="${index}">${item}</wpml:${key}>`
          }
          res += xmlTag
        })
      } else if (typeof obj[key] === 'object') {
        res += (noWmpl.includes(key) ? `<${key}>` : `<wpml:${key}>`)
        JSONParse(obj[key])
        res += (noWmpl.includes(key) ? `</${key}>` : `</wpml:${key}>`)
      } else {
        res += (noWmpl.includes(key) ? `<${key}>${obj[key] || ''}</${key}>` : `<wpml:${key}>${obj[key] || ''}</wpml:${key}>`)
      }
    }
  }
  JSONParse(JSONData)
  return res
}