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">
			<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>保存当前配置</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 } from "@/api/modules/mapCommon";
const props = defineProps({
	testMapVisible: Boolean,
	relativeId: 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; // 选中的图层
// 底图图层操作
const layerOperate = (e: any, label: any) => {
	thisLayer = map.getLayerById(formData.value.id);
	console.log(thisLayer);
	if (label == "filterColor") {
		console.log(e, label);
		thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
	} else if (label == "invertColor") {
		thisLayer.layer[label] = e;
	} else {
		thisLayer[label] = e;
	}
};
// 获取数据详情
const getInfo = 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 () => {
	await getInfo();
});
onUnmounted(() => {
	map = null;
	thisLayer = null;
	graphicLayer = null;
});
</script>

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