cesium-切分地图

醉书生ꦿ℘゜এ

于 2024-03-06 13:20:59 发布

阅读量378

点赞数 3

分类专栏： cesium 文章标签：前端 cesium

本文链接：https://blog.csdn.net/zslsh44/article/details/136503130

版权

cesium 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在cesium中只看想看到的部分地图，其他的隐藏。
做法如下

import {ArrowRight} from '@element-plus/icons-vue'
import {onMounted, ref, watch} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";

初始化

let viewer = null;
let points = ref({
	position: null
});
let checked3 = ref(true);
let checked4 = ref(true);
// 添加矩形以显示边界
const rectangles = [];
// 热带和南回归线 需要展示的区域
let coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(-180.0, -23.43687, 180.0, 23.43687);

onMounted(() => {
	let initCesium = new InitCesium('cesiumContainer');
	viewer = initCesium.initViewer({});

	viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
	viewer.scene.skyAtmosphere.show = true;

	for (let i = 0; i < 10; i++) {
		rectangles.push(viewer.entities.add({
			rectangle: {
				coordinates: coffeeBeltRectangle,
				material: Cesium.Color.WHITE.withAlpha(0.0),
				height: i * 5000.0,
				outline: true,
				outlineWidth: 4.0,
				outlineColor: Cesium.Color.WHITE
			}
		}));
	}
})

监听两个值的变化，一个是是否要隐藏一个是是否显示边框

watch([checked3, checked4], (newVal, oldVal) => {
	if (newVal[0]) {
		viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
	} else {
		viewer.scene.globe.cartographicLimitRectangle = Cesium.Rectangle.MAX_VALUE;
	}
	const rectanglesLength = rectangles.length;
	for (let i = 0; i < rectanglesLength; i++) {
		const rectangleEntity = rectangles[i];
		rectangleEntity.show = newVal[1];
	}
})

所有代码

<template>
	<div id="cesiumContainer" style="height: 100vh;"></div>
	<div id="toolbar" style="position: fixed;top:20px;left:220px;">
		<el-breadcrumb :separator-icon="ArrowRight">
			<el-breadcrumb-item>场景</el-breadcrumb-item>
			<el-breadcrumb-item>切分地图</el-breadcrumb-item>
		</el-breadcrumb>
		<el-checkbox v-model="checked3" label="限制启用"/>
		<el-checkbox v-model="checked4" label="显示边界"/>
	</div>
</template>
<script setup>
import {ArrowRight} from '@element-plus/icons-vue'
import {onMounted, ref, watch} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";

let viewer = null;
let points = ref({
	position: null
});
let checked3 = ref(true);
let checked4 = ref(true);
// 添加矩形以显示边界
const rectangles = [];
// 热带和南回归线
let coffeeBeltRectangle = Cesium.Rectangle.fromDegrees(-180.0, -23.43687, 180.0, 23.43687);

onMounted(() => {
	let initCesium = new InitCesium('cesiumContainer');
	viewer = initCesium.initViewer({});
	// flyToRight2();
	viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
	viewer.scene.skyAtmosphere.show = true;

	for (let i = 0; i < 10; i++) {
		rectangles.push(viewer.entities.add({
			rectangle: {
				coordinates: coffeeBeltRectangle,
				material: Cesium.Color.WHITE.withAlpha(0.0),
				height: i * 5000.0,
				outline: true,
				outlineWidth: 4.0,
				outlineColor: Cesium.Color.WHITE
			}
		}));
	}
})

watch([checked3, checked4], (newVal, oldVal) => {
	if (newVal[0]) {
		viewer.scene.globe.cartographicLimitRectangle = coffeeBeltRectangle;
	} else {
		viewer.scene.globe.cartographicLimitRectangle = Cesium.Rectangle.MAX_VALUE;
	}
	const rectanglesLength = rectangles.length;
	for (let i = 0; i < rectanglesLength; i++) {
		const rectangleEntity = rectangles[i];
		rectangleEntity.show = newVal[1];
	}
})
</script>
<style scoped>
#cesiumContainer {
	overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner, .el-breadcrumb__separator {
	color: #ffffff !important;
}
</style>

效果图如下
在这里插入图片描述