代码提交

husq

2023-09-21 f414daa1d1362ed1bd22b79b5fec7b50a6833d5e

 src/pages/page-web/projects/wayline.vue

@@ -1,6 +1,6 @@
<template>
  <div class="project-wayline-wrapper height-100">
    <a-spin :spinning="loading" :delay="300" tip="downloading" size="large">
    <a-spin :spinning="loading" :delay="300" tip="加载中" size="large">
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
      <a-row>
        <a-col :span="1"></a-col>
@@ -95,6 +95,8 @@
import { CURRENT_CONFIG } from '/@/api/http/config'
import { load } from '@amap/amap-jsapi-loader'
import { getRoot } from '/@/root'
import kmz from '/@/assets/kmz/test.kmz'
import togeojson from '@mapbox/togeojson'

const loading = ref(false)
const store = useMyStore()
@@ -187,6 +189,18 @@

function selectRoute (wayline: WaylineFile) {
  store.commit('SET_SELECT_WAYLINE_INFO', wayline)
  console.log(wayline, 'wayline')
  downloadWaylineFile(workspaceId, wayline.id).then(async res => {
    if (!res) {
      return
    }
    console.log(res, 'res')
    const data = new Blob([res], { type: 'application/kmz' })
    // downloadFile(data, fileName + '.kmz')
    await analysisKMLFile(data)
  }).finally(() => {
    loading.value = false
  })
}

function onScroll (e: any) {
@@ -196,7 +210,18 @@
    getWaylines()
  }
}

// 解析kml文件
const analysisKMLFile = file => {
  const reader = new FileReader()
  reader.readAsText(file, 'utf-8')
  reader.onload = function (e) {
    const xml = new DOMParser().parseFromString(e.target.result, 'text/xml')
    const geojson = togeojson.kml(xml, {
      style: true
    })
    console.log(geojson, 'geojson')
  }
}
interface FileItem {
  uid: string;
  name?: string;