获取当前放大的Cesium

时间:2015-10-20 12:46:05

标签: cesium

我需要在Cesium中创建一个setZoom()函数。为此,我认为我需要评估当前缩放,以便我可以决定是否必须使用zoomInzoomOut来显示用户要求的内容。

有人知道在使用Cesium时是否可以从地图中获取缩放级别?或任何其他解决方案......非常欢迎任何提示。

函数getMagnitude()是否有效?

谢谢!

解决方案:

我把emackey给我的所有提示放在一起,并得到以下代码:

var iniPos = new Cesium.Cartesian3();
iniPos = this.viewer.camera.position;
var cartographic = new Cesium.Cartographic();
cartographic.height = zoom * 1000;
cartographic.longitude = iniPos.x;
cartographic.latitude = iniPos.y;
var newPos = new Cesium.Cartesian3();
Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic, newPos);
this.viewer.camera.setView({
    position: newPos
});

通过这种方式,我可以将摄像机的高度定义为用户定义的缩放参数。

1 个答案:

答案 0 :(得分:2)

Cesium的默认视图是具有透视视图的3D地球仪。典型的2D缩放级别编号并未完全描述Cesium相机可以看到的不同分辨率。请花一点时间阅读Determining the Map Scale of the Viewed Globe的完整答案,以获得更好的解释。

编辑1: camera.getMagnitude函数获取“摄像机位置的大小”,这实际上意味着到地球中心的距离。这可能不是您想要的,而是您想要制图位置的高度。

编辑2:我在这里添加了一个代码片段,上面有按钮,可以将摄像机的高度设置为各种高度。点击底部的“运行代码段”以查看此操作,或将其中的JavaScript部分复制到Sandcastle以在其中运行。请注意,当相机正向下看时,这种效果最佳,因为它会将相机移动到特定高度而不会改变纬度/经度。如果摄像机是离轴的,鼠标可以沿着外观矢量“缩放”相机,同时改变所有三个制图坐标(lat,lon和alt)。将摄像机沿着该线移动到特定高度是一个比较棘手的计算,我没有那么方便的代码,也可能不是你想要的。试一试,看看它是否适合你。

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationHelpButton: false,
    animation: false,
    timeline: false
});

var cartographic = new Cesium.Cartographic();
var cartesian = new Cesium.Cartesian3();
var camera = viewer.scene.camera;
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
var toolbar = document.getElementById('toolbar');
toolbar.innerHTML = '<div id="hud"></div>' +
    '<button type="button" class="cesium-button" id="h1km">1km height</button>' +
    '<button type="button" class="cesium-button" id="h10km">10km height</button>' +
    '<button type="button" class="cesium-button" id="h500km">500km height</button>';

toolbar.setAttribute('style', 'background: rgba(42,42,42,0.9); border-radius: 5px;');

var hud = document.getElementById('hud');

viewer.clock.onTick.addEventListener(function(clock) {
    ellipsoid.cartesianToCartographic(camera.positionWC, cartographic);
    hud.innerHTML =
        'Lon: ' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(3) + ' deg<br/>' +
        'Lat: ' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(3) + ' deg<br/>' +
        'Alt: ' + (cartographic.height * 0.001).toFixed(1) + ' km';
});

function setHeightKm(heightInKilometers) {
    ellipsoid.cartesianToCartographic(camera.position, cartographic);
    cartographic.height = heightInKilometers * 1000;  // convert to meters
    ellipsoid.cartographicToCartesian(cartographic, cartesian);
    camera.position = cartesian;
}

document.getElementById('h1km').addEventListener('click', function() {
    setHeightKm(1);
}, false);

document.getElementById('h10km').addEventListener('click', function() {
    setHeightKm(10);
}, false);

document.getElementById('h500km').addEventListener('click', function() {
    setHeightKm(500);
}, false);
html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif; color: #edffff;
}
#toolbar {
    padding: 2px 5px;
    position: absolute;
    top: 5px;
    left: 5px;
}
<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>