二三維聯動

前端界面:

 

 

JS代碼:

   
//點擊進行二三維聯動
function esMapAs() {
    $("#cesiumContainer").css('width','47%');
    $("#mapContainer").css('width','47%');
    $("#mapContainer").css('left','53%');
    $("#toolbar2").css('display','block');
    $("#mapContainer").css('z-index', '1');
    $("#cesiumContainer").css('z-index', '1');
    $("#cesiumContainer").css('opacity', '1');
    $("#mapContainer").css('opacity', '1');
    $("#hideValue").val("as23D");
    setTimeout(mapenlarge, 1);
    }
    
    // 二維聯動三維
    mapPan=function () {
        // 添加地圖監聽事件
        baseLayer.events.on({"moveend": MaptoScene});
             // 移除場景鼠標事件
             handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
             handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);

    };
    // 三維聯動二維
   scenePan =function () {
        // 注銷地圖監聽事件
       baseLayer.events.unregister("moveend", undefined, MaptoScene);
       handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
       handler.setInputAction(function(movement) {
       var camera=viewer.scene.camera;
       var cameraPosiion=camera.position;
       var cartographic = Cesium.Cartographic.fromCartesian(cameraPosiion);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;
        var size = _calculateSizeFromAltitude(height);
        size = size * 0.5;
       // 設置地圖顯示范圍
       var bounds = new SuperMap.Bounds(longitude - size, latitude - size, longitude + size, latitude + size);
       map.zoomToExtent(bounds, false);
   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
   // 添加場景鼠標事件
   handler.setInputAction(function(movement) {
       var camera=viewer.scene.camera;
       var cameraPosiion=camera.position;
       var cartographic = Cesium.Cartographic.fromCartesian(cameraPosiion);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;
        var size = _calculateSizeFromAltitude(height);
        size = size * 0.5;
       // 設置地圖顯示范圍
       var bounds = new SuperMap.Bounds(longitude - size, latitude - size, longitude + size, latitude + size);
       map.zoomToExtent(bounds, false);
   }, Cesium.ScreenSpaceEventType.WHEEL);
    };
    function MaptoScene() {
        // 獲取當前地圖范圍
        var bounds = map.getExtent();
        // 根據給定的地圖范圍計算場景的高度
        var altitude = _calculateAltitudeFromBounds(bounds);
        // 獲取地圖中心點
        var center = map.getCenter();
        // 設置場景相機
        viewer.scene.camera.setView({
           destination : new Cesium.Cartesian3.fromDegrees(center.lon, center.lat, altitude)
       });
    
    }


// 二維map的viewBoundsChanged事件的回調函數
function viewBoundsChangedHandler() {

var viewBounds = map.get_viewBounds();
var altitude = _calculateAltitudeFromBounds(viewBounds);
var camera = sceneControl.get_scene().get_camera();
camera.set_altitude(altitude);
sceneControl.get_scene().set_camera(camera);
}

// / <summary>
// / 根據給定的地圖范圍計算場景的高度
// / </summary>
// / <param name="bounds">地圖范圍</param>
// / <returns>場景高度</returns>
function _calculateAltitudeFromBounds(bounds) {
var _PI = 3.1415926;
var _earthRadius = 6378137;
var altitude = _earthRadius;
var boundsWidth = bounds.right - bounds.left;
if (boundsWidth >= 120) {
altitude = _earthRadius * boundsWidth / 60 - _earthRadius;
}
else if (boundsWidth != 0) {
var angle1 = (boundsWidth / 360) * _PI;
var height = Math.sin(angle1) * _earthRadius;
var a = height / Math.tan(angle1);
var b = height / Math.tan(_PI / 6);
altitude = a + b - _earthRadius;
}
return altitude;
}


// / <summary>
// / 根據給定的場景高度計算地圖中顯示范圍的寬度
// / </summary>
// / <param name="altitude">場景高度</param>
// / <returns>地圖顯示范圍尺寸</returns>
function _calculateSizeFromAltitude(altitude) {
var _PI = 3.1415926;
var _earthRadius = 6378137;
var size;
if (altitude >= _earthRadius) {// 當場景高度大於可全幅顯示整球的高度時
var ratio = (altitude + _earthRadius) * 0.5;
size = 120 * ratio / _earthRadius
}
else {// 當場景高度小於可全幅顯示整球的高度時，即無法看到整球時
var tan30 = Math.tan(_PI / 6);
// 設置方程組的a,b,c
var a = (Math.pow(tan30, 2) + 1) * Math.pow(_earthRadius, 2);
var b = -2 * (_earthRadius + altitude) * _earthRadius * Math.pow(tan30, 2);
var c = Math.pow(tan30, 2) * Math.pow(_earthRadius + altitude, 2) - Math.pow(_earthRadius, 2.0);
// 解一元二次方程，取銳角，因此余弦值較大
var cosd = (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / (2 * a);
var d = Math.acos(cosd);
var widthd = 2 * d * _earthRadius;
size = (widthd / (_PI * _earthRadius)) * 180;
}
return size;
}