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.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>偏移量lon经度：{{ formData.lng ? formData.lng : 0 }}</span>
				<el-slider v-model="formData.lng" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lng')" />
			</div>
			<div class="property-column-item">
				<span>偏移量lat纬度：{{ formData.lat ? formData.lat : 0 }}</span>
				<el-slider v-model="formData.lat" :step="0.0001" :max="0.01" :min="-0.01" @change="e => albugineaOperate(e, 'lat')" />
			</div>
			<div class="property-column-item">
				<span>偏移量height高度(米)：{{ formData.alt ? formData.alt : 0 }}</span>
				<el-slider v-model="formData.alt" :step="10" :max="500" :min="-500" @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="operate-btn">
				<el-button @click="editAlbugineaConfig">保存当前配置</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, 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 } from "@/api/modules/mapCommon";
import { ElMessage } from "element-plus";
const props = defineProps({
	testMapVisible: Boolean,
	relativeId: String,
	type: String
});
const emits = defineEmits(["confirm"]);
const formData: any = ref({});
const configJson = ref<any>({
	scene: {
		center: { lat: 14.029537, lng: 105.94238, alt: 4879779, heading: 0, pitch: -66 }
	},
	control: {
		baseLayerPicker: false, // basemaps底图切换按钮
		homeButton: true, // 视角复位按钮
		sceneModePicker: true, // 二三维切换按钮
		navigationHelpButton: true, // 帮助按钮
		fullscreenButton: true, // 全屏按钮
		contextmenu: { hasDefault: 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; // 选中的白膜
// 修改白膜当前配置
const editAlbugineaConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await albugineaMapEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
// 修改底图当前配置
const editBaseMapsConfig = async () => {
	let requestData = {
		id: props.relativeId,
		...formData.value
	};
	const res: any = await baseMapEdit(requestData);
	if (res.code == 200) {
		ElMessage.success("操作成功");
	}
};
let initCenter: any; // 初始中心经纬度
let requestNum: number = 0; // 请求中心点次数
// 白膜图层操作
const albugineaOperate = (e: any, label: any) => {
	console.log(formData.value);
	thisAlbuginea = map.getLayerById(formData.value.id);
	if (requestNum == 0) {
		initCenter = {
			lng: thisAlbuginea.orginCenterPoint.lng,
			lat: thisAlbuginea.orginCenterPoint.lat,
			alt: thisAlbuginea.orginCenterPoint.alt
		};
		++requestNum;
	}
	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: initCenter.lng + formData.value.lng,
			lat: initCenter.lat + formData.value.lat,
			alt: initCenter.alt + formData.value.alt
		};
		console.log(thisAlbuginea);
	}
};
// 底图图层操作
const layerOperate = (e: any, label: any) => {
	thisLayer = map.getLayerById(formData.value.id);
	console.log(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 if (label == "invertColor") {
		thisLayer.layer[label] = e;
	} else {
		thisLayer[label] = e;
	}
};
// 获取白膜数据详情
const getAlbugineaInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await albugineaMapDetails(requestData);
	console.log(result, "--------白膜");
	if (result) {
		formData.value = {
			...result
		};
		configJson.value.layers = [
			{
				id: result.id,
				name: result.name,
				icon:
					result.layer == "gaode"
						? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
						: "src/assets/images/Mars3DImg/basemaps/bd-img.png",

				type: "3dtiles",
				url: result.url,
				maximumScreenSpaceError: 1,
				style: {
					color: {
						conditions: [["true", "color('" + result.color + "')"]]
					}
				},
				show: result.show ? result.show : false,
				flyTo: result.flyTo ? result.flyTo : false
			}
		];
		initMars3d(configJson.value);
	}
};
// 获取底图数据详情
const getBaseMapsInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await baseMapDetails(requestData);
	if (result) {
		formData.value = { ...result };
		configJson.value.basemaps = [
			{
				id: result.id,
				name: result.name,
				icon:
					result.layer == "gaode"
						? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
						: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
				type: result.layer,
				layer: result.layer == "gaode" ? "img_d" : "img_z",
				saturation: result.saturation ? result.saturation : 0,
				brightness: result.brightness ? result.brightness : 0,
				contrast: result.contrast ? result.contrast : 0,
				hue: result.hue ? result.hue : 0,
				gamma: result.gamma ? result.gamma : 0,
				show: true
			}
		];
		initMars3d(configJson.value);
	}
};
const initMars3d = (option: any) => {
	console.log(666);
	map = new mars3d.Map("mars3dContainer", option);

	// 创建矢量数据图层
	graphicLayer = new mars3d.layer.GraphicLayer();
	map.addLayer(graphicLayer);
};
onMounted(async () => {
	if (props.type == "底图") {
		await getBaseMapsInfo();
	} else if (props.type == "白膜") {
		await getAlbugineaInfo();
	}
});
onUnmounted(() => {
	map = null;
	thisLayer = null;
	graphicLayer = null;
});
</script>

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