二三维联动

前端界面:

 

 

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