feat: 解析kmz文件逻辑

罗广辉

2025-04-07 9825e6086a58c3ff9a9c68a07afffb22a3c31f6d

 src/views/SignMachineNest/MachineRight/MachineTableDetails/DeviceJob/DeviceJobDetails/DeviceJobDetailsMap.vue

@@ -2,10 +2,11 @@
   <div id="deviceJobDetailsMap" />
</template>
<script setup>
import { Terrain, Viewer } from 'cesium'
import { Cartesian3, Terrain, Viewer } from 'cesium'
import * as Cesium from 'cesium'
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { analyzeKmzFile, XMLToJSON } from '@/utils/cesium/kmz'
import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'

const props = defineProps(['detailsData'])

@@ -21,9 +22,9 @@
   tilingScheme: new AmapMercatorTilingScheme(),
   credit: 'amap_SL',
})

let viewer = null
const init = () => {
   const viewer = new Viewer('deviceJobDetailsMap', {
   viewer = new Viewer('deviceJobDetailsMap', {
      terrain: Terrain.fromWorldTerrain(),
      infoBox: false, // 禁用沙箱，解决控制台报错
      animation: false, // 左下角的动画仪表盘
@@ -36,10 +37,37 @@
      selectionIndicator: false, // 是否显示选择指示器
      baseLayer: false,
      fullscreenButton: false,
      sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
   })
   viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
   // viewer.scene.morphTo2D(0)
   viewer.scene.morphTo2D(0)
}
import  imgtst from '@/assets/images/arrow-right-blue.png'
const renderingLine = (lineObj) =>{
   console.log(lineObj)
   const positions = lineObj.Placemark.map(item => {
      const [lon,lat] = item.Point.coordinates.split(',')
      return Cartesian3.fromDegrees(Number(lon), Number(lat) )
   })
   viewer.entities.add({
      name: 'ls_wayline',
      id: 'ls_wayline',
      polyline: {
         width: 4,
         positions: positions,
         material: new ImageTrailMaterial({
            color: {
               alpha: 1,
               blue: 1,
               green: 1,
               red: 1
            },
            speed: 20,
            image: imgtst,
            repeat: { x: Math.floor(40), y: 1 }
         }),
         clampToGround: false
      }
   })
}

const drawLine = () => {
@@ -47,7 +75,8 @@
      analyzeKmzFile(`${item.url}?_t=${new Date().getTime()}`).then(async res => {
         const templateXML = await res.fileInfoObj['wpmz/template.kml']
         const templateXMLJSON = XMLToJSON(templateXML)?.['Document']
         console.log(templateXMLJSON,66969969)
         const templateXMLObj = removeTextKey(templateXMLJSON.Folder)
         renderingLine(templateXMLObj)
      })
   })
}