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