Mars3D-screen_web/src/components/testMap/index.vue

<template>
	<div class="map-content" id="map-content">
		<div id="mars3dContainer" class="mars3d-container"></div>
		<div class="layer-config" v-if="props.type == '底图'">
			<div class="property-column-item">
				<span>透明度：{{ formData.opacity ? formData.opacity : 1 }}</span>
				<el-slider v-model="formData.opacity" :step="0.1" :max="1" :min="0" @change="e => layerOperate(e, 'opacity')" />
			</div>
			<div class="property-column-item">
				<span>饱和度：{{ formData.saturation ? formData.saturation : 0 }}</span>
				<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'saturation')" />
			</div>
			<div class="property-column-item">
				<span>亮度：{{ formData.brightness ? formData.brightness : 0 }}</span>
				<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'brightness')" />
			</div>
			<div class="property-column-item">
				<span>对比度：{{ formData.contrast ? formData.contrast : 0 }}</span>
				<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'contrast')" />
			</div>
			<div class="property-column-item">
				<span>色调：{{ formData.hue ? formData.hue : 0 }}</span>
				<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @change="e => layerOperate(e, 'hue')" />
			</div>
			<div class="property-column-item">
				<span>伽马校正：{{ formData.gamma ? formData.gamma : 0 }}</span>
				<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'gamma')" />
			</div>
			<!-- <div class="property-row-item">
				<span>是否反色：</span>
				<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
			</div> -->
			<div class="property-row-item">
				<span>滤镜颜色：{{ formData.filterColor ? formData.filterColor : "" }}</span>
				<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
			</div>
			<div class="operate-btn">
				<el-button @click="editBaseMapsConfig">保存当前配置</el-button>
			</div>
		</div>
		<div class="layer-config" v-if="props.type == '白膜'">
			<div class="property-column-item">
				<span>经度：</span>
				<el-input-number
					v-model="formData.lng"
					:step="0.0001"
					controls-position="right"
					style="margin: 5px 0"
					@change="e => albugineaOperate(e, 'lng')"
				/>
			</div>
			<div class="property-column-item">
				<span>纬度：</span>
				<el-input-number
					v-model="formData.lat"
					:step="0.0001"
					controls-position="right"
					style="margin: 5px 0"
					@change="e => albugineaOperate(e, 'lat')"
				/>
			</div>
			<div class="property-column-item">
				<span>高度(米)：</span>
				<el-input-number
					v-model="formData.alt"
					:step="10"
					controls-position="right"
					style="margin: 5px 0"
					@change="e => albugineaOperate(e, 'alt')"
				/>
			</div>
			<!-- <div class="property-row-item">
				<span>是否反色：</span>
				<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
			</div> -->
			<!-- <div class="property-row-item">
				<span>白膜颜色：{{ formData.color ? formData.color : "" }}</span>
				<el-color-picker v-model="formData.color" @change="e => albugineaOperate(e, 'color')" />
			</div> -->
			<div class="bimModel-operate">
				<div class="select-operate">
					<span>模型构件操作：</span>
					<el-select v-model="selectedFormData.type" placeholder="请选择" @change="modelStatusOperate">
						<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="data-show">
					<div class="property-row-item" v-show="selectedFormData.type == 2">
						<span>选中的颜色值：{{ formData.color ? formData.color : "" }}</span>
						<el-color-picker v-model="selectedFormData.color" color-format="rgb" style="margin-right: 15px"></el-color-picker>
					</div>
					<span>选中的数据值：</span>
					<div class="selected-box" v-if="selectedFormData.type == 1">
						<div v-for="(item, index) in selectedHideList" :key="index" :title="item">
							<span>{{ item.substring(0, 5) }}</span>
							<el-icon @click="deleteSelected(1, index)"><Close /></el-icon>
						</div>
					</div>
					<div class="selected-box" v-if="selectedFormData.type == 2">
						<div v-for="(item, index) in selectedColorList" :key="index" :title="item">
							<span>{{ item.name.substring(0, 5) }}：{{ item.color }}</span>
							<el-icon @click="deleteSelected(2, index)"><Close /></el-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="operate-btn">
				<el-button @click="editAlbugineaConfig">保存当前配置</el-button>
			</div>
		</div>
		<div class="tree-config" v-if="props.type == '白膜'">
			<div class="tree-config-content">
				<el-tree
					ref="modelComponentTree"
					:data="treeData"
					:props="treeProps"
					show-checkbox
					node-key="eleid"
					@check="handleCheckChange"
				/>
			</div>
		</div>
		<div class="layer-config" v-if="props.type == '点坐标效果'">
			<div class="property-row-item">
				<span>效果颜色：{{ formData.color ? formData.color : "" }}</span>
				<el-color-picker v-model="formData.color" @change="e => pointPositionOperate(e, 'color')" />
			</div>
			<div class="property-column-item">
				<span>经度：</span>
				<el-input-number
					v-model.number="formData.lng"
					controls-position="right"
					style="margin: 5px 0px"
					@blur="e => pointPositionOperate(e, 'lng')"
				/>
			</div>
			<div class="property-column-item">
				<span>纬度：</span>
				<el-input-number
					v-model.number="formData.lat"
					controls-position="right"
					style="margin: 5px 0px"
					@blur="e => pointPositionOperate(e, 'lat')"
				/>
			</div>
			<!-- <div class="property-column-item">
				<span>高度：</span>
				<el-input-number v-model.number="formData.alt" controls-position="right" @change="e => pointPositionOperate(e, 'alt')" />
			</div> -->
			<div class="property-column-item">
				<span>半径：{{ formData.radius ? formData.radius : 0 }}米</span>
				<el-slider
					v-model.number="formData.radius"
					:step="200"
					:max="10000"
					:min="200"
					@change="e => pointPositionOperate(e, 'radius')"
				/>
			</div>
			<div class="property-column-item" v-if="formData.type != 'CircleScan'">
				<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
				<el-slider
					v-model.number="formData.speed"
					:step="1"
					:max="100"
					:min="1"
					@change="e => pointPositionOperate(e, 'speed')"
				/>
			</div>
			<div class="operate-btn">
				<el-button @click="editPointPositionConfig">保存当前配置</el-button>
			</div>
		</div>
		<div class="layer-config" v-if="props.type == '线效果'">
			<div class="property-column-item">
				<span>宽度：{{ formData.width ? formData.width : 0 }}</span>
				<el-slider v-model.number="formData.width" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'width')" />
			</div>
			<div class="property-row-item">
				<span>颜色：{{ formData.color ? formData.color : "" }}</span>
				<el-color-picker v-model="formData.color" @change="e => lineEffectOperate(e, 'color')" />
			</div>
			<div class="property-row-item" v-if="formData.type == 'ODLine'">
				<span>线的背景颜色：{{ formData.bgColor ? formData.bgColor : "" }}</span>
				<el-color-picker v-model="formData.bgColor" @change="e => lineEffectOperate(e, 'bgColor')" />
			</div>
			<div class="property-column-item">
				<span>速度值：{{ formData.speed ? formData.speed : 0 }}</span>
				<el-slider v-model.number="formData.speed" :step="1" :max="100" :min="1" @change="e => lineEffectOperate(e, 'speed')" />
			</div>
			<div class="operate-btn">
				<el-button @click="editLineEffectConfig">保存当前配置</el-button>
			</div>
		</div>
		<div class="layer-config" v-if="props.type == '模型'">
			<div class="property-column-item">
				<span>比例：{{ formData.scale ? formData.scale : 0 }}</span>
				<el-slider v-model.number="formData.scale" :step="1" :max="100" :min="1" @change="e => modelOperate(e, 'scale')" />
			</div>
			<div class="property-column-item">
				<span>方向角：{{ formData.heading ? formData.heading : 0 }}</span>
				<el-slider v-model.number="formData.heading" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'heading')" />
			</div>
			<div class="property-column-item">
				<span>俯仰角：{{ formData.pitch ? formData.pitch : 0 }}</span>
				<el-slider v-model.number="formData.pitch" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'pitch')" />
			</div>
			<div class="property-column-item">
				<span>翻滚角：{{ formData.roll ? formData.roll : 0 }}</span>
				<el-slider v-model.number="formData.roll" :step="1" :max="360" :min="0" @change="e => modelOperate(e, 'roll')" />
			</div>
			<div class="property-row-item" v-if="formData.silhouette">
				<span>轮廓颜色：{{ formData.silhouetteColor ? formData.silhouetteColor : "" }}</span>
				<el-color-picker v-model="formData.silhouetteColor" @change="e => modelOperate(e, 'silhouetteColor')" />
			</div>
			<div class="property-column-item" v-if="formData.silhouette">
				<span>轮廓宽度：{{ formData.silhouetteSize ? formData.silhouetteSize : 0 }}</span>
				<el-slider
					v-model.number="formData.silhouetteSize"
					:step="1"
					:max="100"
					:min="1"
					@change="e => modelOperate(e, 'silhouetteSize')"
				/>
			</div>
			<div class="operate-btn">
				<el-button @click="editModelConfig">保存当前配置</el-button>
			</div>
		</div>
		<div class="close-btn" @click="$emit('confirm')">
			<el-icon color="#fff" size="18"><CircleClose /></el-icon>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, onBeforeUnmount, watch } from "vue";
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import {
	baseMapDetails,
	baseMapEdit,
	albugineaMapDetails,
	albugineaMapEdit,
	diffuseWallDetails,
	diffuseWallEdit,
	polylineCombineDetails,
	polylineCombineEdit,
	gltfModelDetails,
	gltfModelEdit
} from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus";
const props = defineProps({
	testMapVisible: Boolean,
	relativeId: String,
	type: String
});
const emits = defineEmits(["confirm"]);
const modelComponentTree = ref();
const selectedFormData = ref({
	type: 1,
	color: ""
});
const selectedHideList = ref<any>([]); // 选中要隐藏的构件
const selectedColorList = ref<any>([]); // 选中要着色的构件
const typeOptions = ref([
	{ label: "隐藏", value: 1 },
	{ label: "着色", value: 2 }
]);
const treeProps = {
	label: "name",
	children: "children"
};
const treeData = ref<any>([]);
const formData: any = ref({});
const configJson = ref<any>({
	scene: {
		center: { lat: 26.502888, lng: 106.174716, alt: 1961.1, heading: 25.1, pitch: -50 }
	},
	control: {
		baseLayerPicker: false, // basemaps底图切换按钮
		homeButton: true, // 视角复位按钮
		sceneModePicker: true, // 二三维切换按钮
		navigationHelpButton: true, // 帮助按钮
		fullscreenButton: true, // 全屏按钮
		contextmenu: { hasDefault: true } // 右键菜单
	},
	terrain: {
		url: "//data.mars3d.cn/terrain",
		show: true
	},
	basemaps: [
		{
			name: "天地图影像",
			icon: "img/basemaps/tdt_img.png",
			type: "tdt",
			layer: "img_d",
			show: true
		}
	]
});
let map: any;
let graphicLayer: any;
let thisLayer: any; // 选中的图层
let thisAlbuginea: any; // 选中的白膜
let tiles3dLayer: any;
// 模型状态操作状态切换
const modelStatusOperate = () => {
	// if (selectedFormData.value.type == 1) {
	// 	modelComponentTree.value.setCheckedKeys(selectedHideList.value);
	// } else {
	// 	let checkArr: any = [];
	// 	selectedColorList.value.map(item => {
	// 		checkArr.push(item.name);
	// 	});
	// 	modelComponentTree.value.setCheckedKeys(checkArr);
	// }
};
// 删除选中数据
const deleteSelected = (type: any, index: any) => {
	if (type == 1) {
		selectedHideList.value.splice(index, 1);
	} else if (type == 2) {
		selectedColorList.value.splice(index, 1);
	}
};
// 处理构件着色的方法
const handleCheckChange = (e: any, obj: any) => {
	console.log(e);
	console.log(obj);
	if (selectedFormData.value.type == 1) {
		selectedHideList.value = obj.checkedKeys;
		console.log(selectedHideList.value.length);
	} else {
		if (obj.checkedKeys.length > 0) {
			let selectedIndex = -1;
			if (e.children) {
				e.children.map(item => {
					selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == item.eleid);
					if (obj.checkedKeys.includes(item.eleid) && selectedIndex == -1) {
						selectedColorList.value.push({ name: item.eleid, color: selectedFormData.value.color });
					} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
						selectedColorList.value.splice(selectedIndex, 1);
					}
				});
			} else {
				selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == e.eleid);
				console.log(selectedIndex);
				if (obj.checkedKeys.includes(e.eleid) && selectedIndex == -1) {
					selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color });
				} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
					selectedColorList.value.splice(selectedIndex, 1);
				}
			}
			// selectedColorList.value = selectedColorList.value.filter((item: any, index: any, arr: any) => {
			// 	let eleIndex = obj.checkedKeys.findIndex((item2: any) => {
			// 		return item.name === item2;
			// 	});
			// 	return eleIndex != -1;
			// });
		} else {
			selectedColorList.value = [];
		}
	}
};
// 修改模型当前配置
const editModelConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await gltfModelEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
// 修改线效果当前配置
const editLineEffectConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await polylineCombineEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
// 修改点坐标当前配置
const editPointPositionConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await diffuseWallEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
// 修改白膜当前配置
const editAlbugineaConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value,
		hiddenComponentId: JSON.stringify(selectedHideList.value),
		componentColorJson: JSON.stringify(selectedColorList.value)
	};
	const res: any = await albugineaMapEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
		operateComponentStatus();
	}
};
// 修改白膜构件状态
const operateComponentStatus = () => {
	let dataArr: any = [];
	selectedHideList.value.map(item => {
		dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]);
	});
	selectedColorList.value.map(item => {
		if (item.color) {
			dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]);
		}
	});
	tiles3dLayer.style = {
		color: {
			conditions: dataArr
		}
	};
};
// 修改底图当前配置
const editBaseMapsConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await baseMapEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
// 模型操作
const modelOperate = (e: any, label: any) => {
	console.log(e);
	console.log(formData.value);
	if (graphicLayer) {
		let graphic = graphicLayer.getGraphicById(formData.value.id);
		let loadJson = {
			scale: formData.value.scale,
			heading: formData.value.heading,
			pitch: formData.value.pitch,
			roll: formData.value.roll,
			silhouette: formData.value.silhouette,
			silhouetteColor: formData.value.silhouetteColor,
			silhouetteSize: formData.value.silhouetteSize,
			hasShadows: formData.value.hasShadows,
			clampToGround: formData.value.clampToGround
		};
		graphic.setStyle(loadJson);
		// layer.style = loadJson;
	}
};
// 线效果操作
const lineEffectOperate = (e: any, label: any) => {
	console.log(e);
	console.log(formData.value.width);
	console.log(graphicLayer);
	if (graphicLayer) {
		let graphic = graphicLayer.getGraphicById(formData.value.id);
		console.log(graphic);
		let loadJson = {
			width: formData.value.width,
			materialType: mars3d.MaterialType[formData.value.type],
			materialOptions: {
				color: formData.value.color,
				speed: formData.value.speed,
				startTime: random(1000, 3000),
				percent: 0.1,
				alpha: 0.01
			}
		};
		if (formData.value.type == "ODLine") {
			loadJson.materialOptions.bgColor = formData.value.bgColor;
		}
		// graphic.redraw(loadJson);
		graphic.setStyle(loadJson);
	}
};
// 点坐标效果操作
const pointPositionOperate = (e: any, label: any) => {
	console.log(formData.value);
	if (graphicLayer) {
		console.log(666);
		let graphic = graphicLayer.getGraphicById(formData.value.id);
		console.log(graphic);
		let loadJson = {
			radius: formData.value.radius,
			materialOptions: {
				// 扫描材质
				color: formData.value.color,
				speed: formData.value.speed
			},
			clampToGround: true // 是否贴地
		};
		graphic.position = new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt);
		graphic.setStyle(loadJson);
	}
	console.log(777);
};
// 白膜图层操作
const albugineaOperate = (e: any, label: any) => {
	console.log(formData.value);
	thisAlbuginea = map.getLayerById(formData.value.id);
	console.log(thisAlbuginea);
	if (label == "color") {
		console.log(e, label);
		if (e) {
			thisAlbuginea.style = {
				color: {
					conditions: [["true", "color('" + e + "')"]]
				}
			};
		} else {
			thisAlbuginea.style = {
				color: {
					conditions: [["true", "color('#fff')"]]
				}
			};
		}
	} else {
		thisAlbuginea.position = {
			lng: formData.value.lng,
			lat: formData.value.lat,
			alt: formData.value.alt
		};
		console.log(thisAlbuginea);
	}
};
// 底图图层操作
const layerOperate = (e: any, label: any) => {
	thisLayer = map.getLayerById(formData.value.id);
	console.log(thisLayer);
	if (thisLayer) {
		if (label == "filterColor") {
			console.log(e, label);
			if (e) {
				thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
				// thisLayer.layer[label] = e;
			} else {
				thisLayer.layer[label] = Cesium.Color.fromCssColorString("#FBFBFB");
				// thisLayer.layer[label] = "#FBFBFB";
			}
		} else {
			thisLayer[label] = e;
		}
	}
};
// 获取模型数据详情
const getModelInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await gltfModelDetails(requestData);
	console.log(result, "--------gltf模型");
	if (result) {
		formData.value = {
			...result
		};
		await initMars3d(configJson.value);
	}
};
// 获取线效果数据详情
const getLineEffectInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await polylineCombineDetails(requestData);
	console.log(result, "--------线效果");
	if (result) {
		formData.value = {
			...result
		};
		await initMars3d(configJson.value);
	}
};
// 获取点坐标数据详情
const getPointPositionInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await diffuseWallDetails(requestData);
	console.log(result, "--------点坐标");
	if (result) {
		formData.value = {
			...result
		};
		await initMars3d(configJson.value);
	}
};
// 获取白膜构件数据详情
const name2text = (o: any) => {
	o.text = o.name;

	// 这块为了避免tree控件里的id不统一，所以加改变一下
	o.eleid = o.id;
	o.id = undefined;

	if ((!o.text || o.text.trim() === "") && o.type) {
		o.text = o.type;
	}

	if (o.children) {
		for (let i = 0; i < o.children.length; i++) {
			name2text(o.children[i]);
		}
	}
};
const querySceneTreeData = (url: any) => {
	const scenetree = url.substring(0, url.lastIndexOf("/") + 1) + "scenetree.json";
	return mars3d.Util.fetchJson({ url: scenetree });
};
const getAlbugineaTreeData = (model: any) => {
	querySceneTreeData(model)
		.then(function (scene: any) {
			const data = [];
			if (scene.scenes) {
				for (let i = 0; i < scene.scenes.length; i++) {
					const node = scene.scenes[i];
					name2text(node);
					data.push(node);
				}
			} else {
				name2text(scene);
				data.push(scene);
			}
			treeData.value = data;
			console.log(treeData.value);
		})
		.catch(function (error) {
			console.log("加载JSON出错", error);
		});
};
// 获取白膜数据详情
const getAlbugineaInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await albugineaMapDetails(requestData);
	console.log(result, "--------白膜");
	await initMars3d(configJson.value);
	if (result) {
		formData.value = {
			...result
		};
		selectedHideList.value = JSON.parse(result.hiddenComponentId);
		selectedColorList.value = JSON.parse(result.componentColorJson);
		let showObj = {
			id: result.id,
			name: result.name,
			url: result.url,
			maximumScreenSpaceError: 16,
			cacheBytes: 1073741824, // 1024MB = 1024*1024*1024
			maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024
			position: { lng: result.lng, lat: result.lat, alt: result.alt },
			popup: "all",
			flyTo: true
		};
		if (+result.lng || +result.lat || +result.alt) {
			showObj.position = { lng: +result.lng, lat: +result.lat, alt: +result.alt };
		}
		tiles3dLayer = new mars3d.layer.TilesetLayer(showObj);
		map.addLayer(tiles3dLayer);
		getAlbugineaTreeData(result.url);
		operateComponentStatus();
		// if (selectedFormData.value.type == 1) {
		// 	modelComponentTree.value.setCheckedKeys(selectedHideList.value);
		// } else {
		// 	let checkArr: any = [];
		// 	selectedColorList.value.map(item => {
		// 		checkArr.push(item.name);
		// 	});
		// 	modelComponentTree.value.setCheckedKeys(checkArr);
		// }
		// configJson.value.layers = [
		// 	{
		// 		id: result.id,
		// 		name: result.name,
		// 		type: "3dtiles",
		// 		url: result.url,
		// 		position: { lng: formData.value.lng, lat: formData.value.lat, alt: formData.value.alt },
		// 		maximumScreenSpaceError: 1,
		// 		style: {
		// 			color: {
		// 				conditions: [["true", "color('" + result.color + "')"]]
		// 			}
		// 		},
		// 		show: true,
		// 		flyTo: true
		// 	}
		// ];
	}
};
// 获取底图数据详情
const getBaseMapsInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await baseMapDetails(requestData);
	console.log(result);
	if (result) {
		formData.value = { ...result, opacity: result.opacity && result.opacity == 0 ? result.opacity : 1 };
		configJson.value.basemaps = [
			{
				id: result.id,
				name: result.name,
				...JSON.parse(result.layer),
				brightness: result.brightness,
				contrast: result.brightness,
				filterColor: result.filterColor
					? Cesium.Color.fromCssColorString(result.filterColor)
					: Cesium.Color.fromCssColorString("#FBFBFB"),
				briggammahtness: result.gamma,
				hue: result.hue,
				// invertColor: result.invertColor,
				saturation: result.saturation,
				opacity: result.opacity && result.opacity == 0 ? result.opacity : 1,
				show: true
			}
		];
		configJson.value.scene.center = { lat: 26.502888, lng: 106.174716, alt: 17036414, heading: 0, pitch: -90 };
		initMars3d(configJson.value);
	}
};
// 取区域内的随机点
const randomPoint = (position: any) => {
	const jd = random(position[0].lng * 1000, position[1].lng * 1000) / 1000;
	const wd = random(position[0].lat * 1000, position[1].lat * 1000) / 1000;
	return new mars3d.LngLatPoint(jd, wd, 100);
};

// 取随机数字
const random = (min: any, max: any) => {
	return Math.floor(Math.random() * (max - min + 1) + min);
};
const initMars3d = async (option: any) => {
	console.log(666);
	map = new mars3d.Map("mars3dContainer", option);
	map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
	// 固定光照时间
	map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2022-11-01 12:00:00"));
	// 创建矢量数据图层
	graphicLayer = new mars3d.layer.GraphicLayer();
	map.addLayer(graphicLayer);
	if (props.type == "点坐标效果") {
		let _rotation = Math.random();
		let loadJson = {
			id: formData.value.id,
			position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
			style: {
				radius: formData.value.radius,
				materialType: mars3d.MaterialType[formData.value.type],
				materialOptions: {
					// 扫描材质
					image: formData.value.type == "CircleScan" ? formData.value.image : "",
					color: formData.value.color,
					speed: formData.value.speed
				},
				// stRotation: new Cesium.CallbackProperty(function (e) {
				// 	_rotation += 0.1;
				// 	return _rotation;
				// }, false),
				// classificationType: Cesium.ClassificationType.BOTH,
				clampToGround: true // 是否贴地
			},
			attr: { remark: "展示" }
		};

		if (formData.value.type == "CircleScan") {
			loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) {
				_rotation += 0.1;
				return _rotation;
			}, false);
			loadJson.style.classificationType = Cesium.ClassificationType.BOTH;
		}
		const graphic = new mars3d.graphic.CircleEntity(loadJson);
		graphicLayer.addGraphic(graphic);
		graphic.flyTo();
		//绑定经纬度监听事件
		graphic.on(mars3d.EventType.editMovePoint, function (event) {
			console.log("移动改变了矢量数据对象", event);
			let graphic = graphicLayer.getGraphicById(formData.value.id);
			formData.value.lng = event.target.point.lng;
			formData.value.lat = event.target.point.lat;
			formData.value.alt = event.target.point.alt;
			formData.value.radius = event.target.radius;
			// let loadJson = {
			// 	position: new mars3d.LngLatPoint(formData.value.lng, formData.value.lat, formData.value.alt),
			// 	style: {
			// 		radius: formData.value.radius
			// 	}
			// };
			// graphic.setStyle(loadJson);
		});
		// 开启编辑状态
		graphic.startEditing();
	}
	if (props.type == "线效果") {
		const arrData: any = [];
		if (formData.value.type == "LineFlowColor") {
			const linePositions = JSON.parse(formData.value.positions);
			for (let j = 0; j < 100; ++j) {
				const startPt = randomPoint(linePositions);

				const endPt = startPt.clone();
				endPt.alt = random(linePositions[0].alt, linePositions[1].alt);

				arrData.push({
					positions: [startPt, endPt],
					style: {
						width: formData.value.width,
						materialType: mars3d.MaterialType.LineFlowColor,
						materialOptions: {
							color: formData.value.color,
							speed: formData.value.speed,
							startTime: random(1000, 3000),
							percent: 0.1,
							alpha: 0.01
						}
					}
				});
			}
		} else {
			mars3d.Util.fetchJson({ url: JSON.parse(formData.value.jsonFile).url }).then(function (data) {
				const busLines: any = [];
				data.forEach(function (busLine: any, idx: any) {
					let prevPt: any;
					const points = [];
					for (let i = 0; i < busLine.length; i += 2) {
						let pt = [busLine[i], busLine[i + 1]];
						if (i > 0) {
							pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
						}
						prevPt = pt;

						const longitude = pt[0] / 1e4;
						const latitude = pt[1] / 1e4;
						const cart = Cesium.Cartesian3.fromDegrees(longitude, latitude, 100.0);
						points.push(cart);
					}

					busLines.push({
						positions: points,
						color: new Cesium.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0),
						speed: 2 + 1.0 * Math.random()
					});
				});
				busLines.forEach(function (item: any, index: any) {
					arrData.push({
						positions: item.positions,
						style: {
							width: formData.value.width,
							materialType: mars3d.MaterialType.ODLine,
							materialOptions: {
								color: formData.value.color,
								speed: formData.value.speed,
								bgColor: formData.value.bgColor,
								startTime: Math.random()
							}
						},
						attr: { index: index }
					});
				});
			});
		}
		setTimeout(function () {
			// 多个线对象的合并渲染。
			const graphic = new mars3d.graphic.PolylineCombine({
				id: formData.value.id,
				instances: arrData
			});
			console.log(graphic);
			graphicLayer.addGraphic(graphic);
			graphic.flyTo({ minHeight: 2000 });
		}, 200);
	}
	if (props.type == "模型") {
		// 创建gltf模型，
		const model = new mars3d.graphic.ModelPrimitive({
			id: formData.value.id,
			name: formData.value.name,
			position: [formData.value.lng, formData.value.lat, formData.value.alt],
			style: {
				url: formData.value.url,
				scale: formData.value.scale,
				heading: formData.value.heading,
				pitch: formData.value.pitch,
				roll: formData.value.roll,
				silhouette: formData.value.silhouette,
				silhouetteColor: formData.value.silhouetteColor,
				silhouetteSize: formData.value.silhouetteSize,
				hasShadows: formData.value.hasShadows,
				clampToGround: formData.value.clampToGround
			}
		});
		console.log(model);
		graphicLayer.addGraphic(model);
		model.flyTo({ maxHeight: 200 });
	}
};
onBeforeUnmount(async () => {
	// if (props.type == "底图") {
	// 	await getBaseMapsInfo();
	// } else if (props.type == "白膜") {
	// 	await getAlbugineaInfo();
	// } else if (props.type == "点坐标效果") {
	// 	await getPointPositionInfo();
	// } else if (props.type == "线效果") {
	// 	await getLineEffectInfo();
	// } else if (props.type == "模型") {
	// 	await getModelInfo();
	// }
});
onMounted(async () => {
	if (props.type == "底图") {
		await getBaseMapsInfo();
	} else if (props.type == "白膜") {
		await getAlbugineaInfo();
	} else if (props.type == "点坐标效果") {
		await getPointPositionInfo();
	} else if (props.type == "线效果") {
		await getLineEffectInfo();
	} else if (props.type == "模型") {
		await getModelInfo();
	}
});
onUnmounted(() => {
	map = null;
	thisLayer = null;
	graphicLayer = null;
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>