记录项目中实现二三维地图联动

效果如下：

第一步：现在页面中加载二三维地图（地图的初始化已省略）

<template><div><div><button @click="show">二三维联动</button></div><div><div id="cesiumcontainer3D" @mouseenter="mouseleave3d"></div><div id="cesiumcontainer2D" @mouseenter="mouseleave2d"></div></div></div>
</template><style lang="scss" scoped>
#cesiumcontainer3D {height: calc(100vh - 0px);width: 100%;margin: 0 0 0 0;padding: 0 0 0 0;float: left;
}
#cesiumcontainer2D {height: calc(100vh - 0px);width: 100%;margin: 0 0 0 0;padding: 0 0 0 0;float: right;
}
</style>

第二步：监听实现联动

    mouseleave3d() {window.is3d = true;},mouseleave2d() {window.is3d = false;},setView23D(is2D_show) {// 二维地图事件if (is2D_show == false) {window.removeChanged();map_2D.off("moveend");} else {map_2D.on("moveend", (event) => {if (window.is3d) return;const bounds = map_2D.getBounds();this.viewer.camera.flyTo({destination: Cesium.Rectangle.fromDegrees(bounds._southWest.lng,bounds._southWest.lat,bounds._northEast.lng,bounds._northEast.lat),duration: 0.25,});});// 三维地图事件const fitBounds2d = () => {if (!window.is3d) return;let levelInfo = "级数：0级  ";let tileRender = this.viewer.scene._globe._surface._tilesToRender;if (tileRender && tileRender.length > 0) {levelInfo ="级数：" +this.viewer.scene._globe._surface._tilesToRender[0]._level +"级  ";console.log(levelInfo);}const rectangle = this.viewer.camera.computeViewRectangle();// 弧度转为经纬度const west = (rectangle.west / Math.PI) * 180;const north = (rectangle.north / Math.PI) * 180;const east = (rectangle.east / Math.PI) * 180;const south = (rectangle.south / Math.PI) * 180;map_2D.fitBounds([[south, west],[north, east],]);};window.removeChanged =this.viewer.scene.camera.moveEnd.addEventListener(function () {fitBounds2d();});}},show() {this.is2D_show = !this.is2D_show;this.setView23D(this.is2D_show);if (this.is2D_show) {this.switchMapView("23D");} else {this.switchMapView("3D");}},// 切换地图视图switchMapView(type) {switch (type) {case "3D":document.getElementById("cesiumcontainer3D").style.width = "99.9%";document.getElementById("cesiumcontainer2D").style.width = "0.1%";break;case "23D":document.getElementById("cesiumcontainer3D").style.width = "50%";document.getElementById("cesiumcontainer2D").style.width = "50%";break;}},