【Cesium开发实战】地下模型功能的实现，可设置透明度及显示隐藏

Cesium有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天给大家分享一个可自定义高度的电子围栏。

1.话不多说，先展示

地下模型

2.设计思路

按项目需求，需要对加载在地下部分的模型控制显示隐藏，以及透明度的设置。增加控制面板，是否可查看地下掩埋模型、是否按距离衰减、透明度的设置。

3.具体代码

<template>
	<div id="toolbar" class="page">
		<table>
			<tbody>
				<tr>
					<td>是否可查看地下掩埋模型</td>
					<td>
						<input type="checkbox" v-model="viewModel.translucencyEnabled">
					</td>
				</tr>
				<tr>
					<td>按距离衰减</td>
					<td>
						<input type="checkbox" v-model="viewModel.fadeByDistance">
					</td>
				</tr>

				<tr>
					<td>透明度</td>
					<td>
						<input type="range" min="0.0" max="1.0" step="0.1" v-model="viewModel.alpha">
						<input type="text" size="5" v-model="viewModel.alpha">
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, reactive, watch } from 'vue';
import { Cesium } from '/@/utils/cesium';
const props = defineProps(['viewer']);


const scene = props.viewer.scene;
const globe = scene.globe;

scene.screenSpaceCameraController.enableCollisionDetection = false;
globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
	400.0,
	0.0,
	800.0,
	1.0
);

const longitude = 112.396876;
const latitude = 37.934629;
const height = 1100;
const position = Cesium.Cartesian3.fromDegrees(
	longitude,
	latitude,
	height
);
const url = "/src/assets/cesium/ParcLeadMine.glb";

const entity = props.viewer.entities.add({
	name: url,
	position: position,
	model: {
		uri: url,
	},
});

props.viewer.flyTo(entity);

const polygon = props.viewer.entities.add({
	polygon: {
		hierarchy: new Cesium.PolygonHierarchy(
			Cesium.Cartesian3.fromDegreesArrayHeights([
				-3.8152789692233817,
				53.124521420389996,
				200.20779492422255,
				-3.8165955002619016,
				53.12555934545405,
				205.85834336951655,
				-3.8201599842222054,
				53.12388420656903,
				230.82362697069453,
				-3.8198667503545027,
				53.123748567587455,
				225.53297006293968,
				-3.8190548496317476,
				53.1240486000822,
				221.82677773619432,
				-3.817536387097508,
				53.122763476393764,
				209.94136782255705,
				-3.8169125359199336,
				53.12285547981627,
				210.96626238861327,
				-3.8166873871853073,
				53.12299403424474,
				211.02223937734595,
				-3.8163695374580873,
				53.12300505277307,
				211.25942926271824,
				-3.8162743040622313,
				53.12281471203994,
				212.35109129094147,
				-3.8159746138174193,
				53.12280996651767,
				214.87977416348798,
				-3.815429896849304,
				53.1236135347983,
				209.72496223706005,
			])
		),
		material: Cesium.Color.LIME.withAlpha(0.5),
		classificationType: Cesium.ClassificationType.TERRAIN,
	},
});

const polyline = props.viewer.entities.add({
	polyline: {
		positions: Cesium.Cartesian3.fromDegreesArrayHeights([
			-3.8098444201746373,
			53.1190304262546,
			286.1875170545701,
			-3.8099801237370663,
			53.119539531697576,
			288.7733884242394,
			-3.810165716635671,
			53.11979180761567,
			290.9294630315179,
			-3.8104840812145357,
			53.12007534956926,
			292.6392327626228,
			-3.8105689502073554,
			53.120259094792196,
			292.222036965774,
			-3.811027311824268,
			53.120409248874196,
			289.61356291617307,
			-3.811530473295422,
			53.12063281057782,
			284.01098712543586,
			-3.8120545342562693,
			53.120742539082435,
			280.118191867836,
			-3.812444493044727,
			53.120813289759326,
			276.0400221387852,
			-3.812779626711285,
			53.12094275348024,
			271.1187399484896,
			-3.8133560322579494,
			53.12104757866638,
			263.3495497598578,
			-3.8137266493960085,
			53.12120789867194,
			257.73878624321316,
			-3.8142552291751133,
			53.121321248522904,
			251.87265828778177,
			-3.814322603988525,
			53.12174170121103,
			238.7082749547689,
			-3.8143764268391314,
			53.1219492923309,
			235.0371831845662,
			-3.8148156514145786,
			53.12210819668669,
			230.2458816627467,
			-3.8155394721966163,
			53.1222990144029,
			221.33319292262706,
			-3.8159828072920927,
			53.12203093429715,
			223.66664756982703,
			-3.816678108944717,
			53.12183939425214,
			223.8787312412801,
			-3.817466081093726,
			53.121751900508535,
			224.52293229989735,
			-3.8183082996527955,
			53.12173266141031,
			223.3672181535749,
		]),
		width: 8,
		material: new Cesium.PolylineOutlineMaterialProperty({
			color: Cesium.Color.YELLOW,
			outlineWidth: 2,
			outlineColor: Cesium.Color.BLACK,
		}),
		clampToGround: true,
	},
});

var viewModel = reactive({
	translucencyEnabled: true,
	fadeByDistance: true,
	showVectorData: false,
	alpha: 0.5,
});


function update() {
	globe.translucency.enabled = viewModel.translucencyEnabled;

	let alpha = Number(viewModel.alpha);
	alpha = !isNaN(alpha) ? alpha : 1.0;
	alpha = Cesium.Math.clamp(alpha, 0.0, 1.0);

	globe.translucency.frontFaceAlphaByDistance.nearValue = alpha;
	globe.translucency.frontFaceAlphaByDistance.farValue = viewModel.fadeByDistance
		? 1.0
		: alpha;

	polygon.show = viewModel.showVectorData;
	polyline.show = viewModel.showVectorData;
}

//监听高程
watch(viewModel, (val) => {
	if (val) {
		update();
	}
});

onMounted(() => {
	//开启高程
	props.viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
		url: window.__env__.VITE_TERRAIN_PROVIDER_URL,
	});

	update();
});

onUnmounted(() => {
	props.viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
});
</script>

<style scoped>

.page {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	width: 400px;
}
#toolbar {
	color: rgba(42, 42, 42, 0.8);
	padding: 4px;
	border-radius: 4px;
}

#toolbar input {
	vertical-align: middle;
	padding-top: 2px;
	padding-bottom: 2px;
}

#toolbar .header {
	font-weight: bold;
}
</style>

项目需要加载自己的高程数据，大家可以开启Cesium中的高程。

4.3D模型资源

管道3D模型，点击可查看下载