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="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>半径：{{ 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="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,
	diffuseWallDetails,
	diffuseWallEdit,
	polylineCombineDetails,
	polylineCombineEdit
} 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 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
	};
	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("操作成功");
	}
};
// 线效果操作
const lineEffectOperate = (e: any, label: any) => {
	console.log(e);
	console.log(formData.value.width);
	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);
	let graphic = graphicLayer.getGraphicById(formData.value.id);
	console.log(graphic);
	let _rotation = Math.random();
	let loadJson = {
		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
		},
		clampToGround: true // 是否贴地
	};
	if (formData.value.type == "CircleScan") {
		loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
			_rotation += 0.1;
			return _rotation;
		}, false);
		loadJson.classificationType = Cesium.ClassificationType.BOTH;
	}
	graphic.setStyle(loadJson);
};
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 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 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 randomPoint = () => {
	const jd = random(117.208056 * 1000, 117.25548 * 1000) / 1000;
	const wd = random(31.816617 * 1000, 31.855756 * 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 = (option: any) => {
	console.log(666);
	map = new mars3d.Map("mars3dContainer", option);

	// 创建矢量数据图层
	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();
	}
	if (props.type == "线效果") {
		if (formData.value.type == "LineFlowColor") {
			const arrData: any = [];
			for (let j = 0; j < 100; ++j) {
				const startPt = randomPoint();

				const endPt = startPt.clone();
				endPt.alt = random(1000, 2000);

				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
						}
					}
				});

				// 多个线对象的合并渲染。
				const graphic = new mars3d.graphic.PolylineCombine({
					id: formData.value.id,
					instances: arrData
				});
				console.log(graphic);
				graphicLayer.addGraphic(graphic);
				graphic.flyTo();
			}
		} else {
			const arrData: any = [];
			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 }
					});
				});

				// 多个线对象的合并渲染。
				const graphic = new mars3d.graphic.PolylineCombine({
					id: formData.value.id,
					instances: arrData
				});
				console.log(graphic);
				graphicLayer.addGraphic(graphic);
				graphic.flyTo();
			});
		}
	}
};
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();
	}
});
onUnmounted(() => {
	map = null;
	thisLayer = null;
	graphicLayer = null;
});
</script>

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