cesium-切分地图

在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>

效果图如下

相关推荐
lyj16899720 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js