記錄項目中實現二三維地圖聯動

效果如下：

第一步：現在頁面中加載二三維地圖（地圖的初始化已省略）

<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;}},