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  
监听两个值的变化，一个是是否要隐藏一个是是否显示边框
 
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  
所有代码
 
	
	
		
			场景
			切分地图
		
		
		
	


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  {
	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  
效果图如下