网站怎么查询注册商,大庆建网站,我有网站 怎么做淘宝推广,网站程序找人做还是自己做记录项目中实现二三维地图联动
效果如下#xff1a; 第一步#xff1a;现在页面中加载二三维地图#xff08;地图的初始化已省略#xff09;
templatedivdivbutton clickshow二三维联动/button/divdiv 第一步现在页面中加载二三维地图地图的初始化已省略
templatedivdivbutton clickshow二三维联动/button/divdivdiv idcesiumcontainer3D mouseentermouseleave3d/divdiv idcesiumcontainer2D mouseentermouseleave2d/div/div/div
/templatestyle langscss 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;}},
