| | |
| | | import { reactive } from '@vue/reactivity' |
| | | import { message } from 'ant-design-vue' |
| | | import { onMounted, onUpdated, ref } from 'vue' |
| | | import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile } from '/@/api/wayline' |
| | | import { deleteWaylineFile, downloadWaylineFile, getWaylineFiles, importKmzFile, getWayLineFile } from '/@/api/wayline' |
| | | import { ELocalStorageKey, ERouterName } from '/@/types' |
| | | import { EllipsisOutlined, RocketOutlined, CameraFilled, UserOutlined, SelectOutlined } from '@ant-design/icons-vue' |
| | | import { EDeviceType } from '/@/types/device' |
| | |
| | | import { CURRENT_CONFIG } from '/@/api/http/config' |
| | | import { load } from '@amap/amap-jsapi-loader' |
| | | import { getRoot } from '/@/root' |
| | | import * as Cesium from 'cesium' |
| | | |
| | | const loading = ref(false) |
| | | const { appContext } = getCurrentInstance() |
| | | const global = appContext.config.globalProperties |
| | | const store = useMyStore() |
| | | let kmlDataSource = null |
| | | const pagination :IPage = { |
| | | page: 1, |
| | | total: -1, |
| | |
| | | } |
| | | |
| | | function deleteWayline () { |
| | | deleteWaylineFile(workspaceId, deleteWaylineId.value).then(res => { |
| | | deleteWaylineFile(workspaceId.value, deleteWaylineId.value).then(res => { |
| | | if (res.code === 0) { |
| | | message.success('Wayline file deleted') |
| | | } |
| | |
| | | |
| | | function selectRoute (wayline: WaylineFile) { |
| | | loading.value = true |
| | | downloadWaylineFile(workspaceId.value, wayline.id).then(res => { |
| | | store.commit('SET_SELECT_WAYLINE_INFO', wayline) |
| | | getWayLineFile(workspaceId.value, wayline.id).then(res => { |
| | | console.log(res, 'res') |
| | | store.commit('SET_SELECT_WAYLINE_INFO', wayline) |
| | | initKmlFile(res.data) |
| | | }).finally(() => { |
| | | loading.value = false |
| | | }) |
| | | } |
| | | /** |
| | | * 加载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: any) => { |
| | | 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) { |