JT-CIM/src/views/Map3d - 副本/components/analysis-data.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		inject
	} from "vue";

	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="jt-analysisData">
		<el-collapse v-model="activeName" accordion>
			<el-upload drag :auto-upload=false action="" accept="shp" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="bind">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将shp文件拖到此处，或<em>点击上传</em></div>

				<!-- <div class="el-upload__tip" slot="tip">必须是shp文件</div> -->
				<span>
					<el-icon>
						<WarnTriangleFilled />
					</el-icon>必须是shp文件
				</span>
			</el-upload>
			<!-- <el-button style="margin-left: 10rem;" size="small" type="success" @click="config">生成GeoJson数据</el-button> -->
		</el-collapse>
	</div>
</template>

<script>
	import {
		open
	} from 'shapefile'

	let jt3d = undefined;

	export default {
		props: {},
		watch: {

		},
		name: "Config",
		data() {
			return {
				file: {},
				filelist: [],
			}
		},

		/* 方法 */
		methods: {
			/* shp文件解析生成图形 */
			config() {
				let _this = this
				const name = this.file.name
				const extension = name.split('.')[1]
				console.log(extension)
				if ('shp' !== extension) {
					this.$alert('文件不是shp文件！请重新选择文件', {
						confirmButtonText: '确定'
					})
				} else {
					const reader = new FileReader()
					const fileData = this.file.raw
					reader.readAsArrayBuffer(fileData)
					reader.onload = function(e) {
						open(this.result).then(source => source.read().then(function log(result) {
							if (result.done) return;
							console.log(result)
							console.log(result.value);

							let promise = Cesium.GeoJsonDataSource.load(result.value, {
								clampToGround: true
							});
							promise.then((dataSource) => {

								window["viewer"].dataSources.add(dataSource); // 加载这个geojson资源
								dataSource.name = name.split('.')[0];
								console.log(dataSource)
								const entities = dataSource.entities.values;
								for (let index = 0; index < entities.length; index++) {
									const entity = entities[index];
									entity.polygon.material = Cesium.Color.fromBytes(50, 160, 255, 77)
									entity.polygon.outlineWidth = 3;
									entity.polygon.outline = false;
									entity.polygon.outlineColor = Cesium.Color.RED;
									entity.polyline = {
										positions: entity.polygon.hierarchy._value.positions,
										width: entity.polygon.outlineWidth,
										material: Cesium.Color.fromBytes(0, 255, 180, 255),
										clampToGround: true
									}
								}

								let options = {};
								// 初始化参数默认值
								options.duration = Cesium.defaultValue(options.duration, 2);
								options.heading = Cesium.defaultValue(options.heading, 0);
								options.pitch = Cesium.defaultValue(options.pitch, -60);
								options.range = Cesium.defaultValue(options.range, 0.0);
								let flyPromise = window["viewer"].flyTo(entities, {
									duration: options.duration,
									offset: {
										heading: Cesium.Math.toRadians(options.heading),
										pitch: Cesium.Math.toRadians(options.pitch),
										range: options.range
									}
								});

							});

							return source.read().then(log);

						})).catch(error => console.error(error.stack));
					}
				}

			},
			remove() {

			},

			//移除
			handleRemove(file, fileList) {

				/* 清除图形 */
				console.log(file, fileList);
				let list = window["viewer"].dataSources.getByName(file.name.split('.')[0])
				// for(let i=0;i<list.length;i++){
				// 	console.log(list.length)
				// 	window["viewer"].dataSources.remove(list[i])
				// }
				list.forEach(res => {
					console.log(res)
					window["viewer"].dataSources.remove(res)
				})

				// window["viewer"].dataSources.remove(window["viewer"].dataSources.getByName(file.name.split('.')[0]))

			},

			//定位
			handlePreview(file) {
				console.log(file)
				this.file = file;
				// this.config();

				let list = window["viewer"].dataSources.getByName(file.name.split('.')[0])
				list.forEach(res => {
					const entities = res.entities.values;
					
					let options = {};
					// 初始化参数默认值
					options.duration = Cesium.defaultValue(options.duration, 2);
					options.heading = Cesium.defaultValue(options.heading, 0);
					options.pitch = Cesium.defaultValue(options.pitch, -60);
					options.range = Cesium.defaultValue(options.range, 0.0);
					let flyPromise = window["viewer"].flyTo(entities, {
						duration: options.duration,
						offset: {
							heading: Cesium.Math.toRadians(options.heading),
							pitch: Cesium.Math.toRadians(options.pitch),
							range: options.range
						}
					});
				})

			},
			bind(files, fileList) {
				//绑定文件
				this.file = fileList[fileList.length - 1]
				//console.log(this.file)
				this.config();
			}
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.el-upload-dragger .el-upload__text{
		font-size: 16rem;
	}
	
	.upload_demo {
		text-align: center;
		margin-top: 50rem;
	}

	.el-button {
		margin-top: 10rem;
	}

	::v-deep .el-upload-dragger {
		padding: 0rem;
		margin-top: 10rem;
		color: #606266;
		font-size: 12rem;

	}

	::v-deep .el-upload-list__item-name {
		color: #fff;
		margin-left: -21rem;
	}

	::v-deep .el-icon svg {
		color: #409eff;
		font-size: smaller;
	}
</style>