| | |
| | | <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;"> |
| | | <a-row> |
| | | <a-col :span="1"></a-col> |
| | | <a-col :span="15">Flight Route Library</a-col> |
| | | <a-col :span="15">航线库</a-col> |
| | | <a-col :span="8" v-if="importVisible" class="flex-row flex-justify-end flex-align-center"> |
| | | <a-upload |
| | | name="file" |
| | |
| | | import { load } from '@amap/amap-jsapi-loader' |
| | | import { getRoot } from '/@/root' |
| | | |
| | | import * as Cesium from 'cesium' |
| | | let kmlDataSource = null |
| | | |
| | | const { appContext } = getCurrentInstance() |
| | | const global = appContext.config.globalProperties |
| | | |
| | | const loading = ref(false) |
| | | const store = useMyStore() |
| | | const projectId = store.state.common.projectId |
| | |
| | | return |
| | | } |
| | | canRefresh.value = false |
| | | getWaylineFiles(workspaceId, { |
| | | page: pagination.page, |
| | | page_size: pagination.page_size, |
| | | order_by: 'update_time desc' |
| | | getWaylineFiles({ |
| | | workspaceId: projectId, |
| | | }).then(res => { |
| | | if (res.code !== 0) { |
| | | if (res.code !== 5000) { |
| | | return |
| | | } |
| | | waylinesData.data = [...waylinesData.data, ...res.data.list] |
| | | pagination.total = res.data.pagination.total |
| | | pagination.page = res.data.pagination.page |
| | | |
| | | const data = res.data |
| | | |
| | | waylinesData.data = [...waylinesData.data, ...data] |
| | | }).finally(() => { |
| | | canRefresh.value = true |
| | | }) |
| | |
| | | } |
| | | |
| | | function selectRoute (wayline: WaylineFile) { |
| | | initKmlFile('/src/assets/kmz/test.kmz') |
| | | store.commit('SET_SELECT_WAYLINE_INFO', wayline) |
| | | } |
| | | |
| | | /** |
| | | * 加载kml文件 |
| | | * @param file |
| | | */ |
| | | function initKmlFile (file:string) { |
| | | const options = { |
| | | camera: global.$viewer.scene.camera, |
| | | canvas: global.$viewer.scene.canvas, |
| | | screenOverlayContainer: global.$viewer.container, |
| | | } |
| | | global.$viewer.dataSources.add( |
| | | Cesium.KmlDataSource.load( |
| | | file, |
| | | options |
| | | )).then(res => { |
| | | kmlDataSource = res |
| | | kmlDataSource.show = true |
| | | |
| | | console.log('Entits数组', kmlDataSource.entities.values) |
| | | |
| | | const kmlEntityArr = kmlDataSource.entities.values[0]._children |
| | | const cartesianArr = [] |
| | | for (let i = 0; i < kmlEntityArr.length; i++) { |
| | | const entity = kmlEntityArr[i] |
| | | entity.point = new Cesium.PointGraphics({ |
| | | pixelSize: 12, |
| | | color: Cesium.Color.RED, |
| | | outlineColor: Cesium.Color.WHITE, |
| | | }) |
| | | entity.billboard = null |
| | | |
| | | cartesianArr.push(entity.position._value) |
| | | } |
| | | |
| | | const lineEntity = global.$viewer.entities.add({ |
| | | name: 'entityLine', |
| | | polyline: { |
| | | positions: cartesianArr, |
| | | width: 10, |
| | | material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN), |
| | | }, |
| | | }) |
| | | |
| | | global.$viewer.flyTo(lineEntity, { |
| | | offset: new Cesium.HeadingPitchRange(0, -90, 1000) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | function onScroll (e: any) { |
| | | const element = e.srcElement |
| | | if (element.scrollTop + element.clientHeight >= element.scrollHeight - 5 && Math.ceil(pagination.total / pagination.page_size) > pagination.page && canRefresh.value) { |