获取当前放大的铯
Get current zoom in Cesium
我需要在 Cesium 中创建一个 setZoom()
函数。为此,我认为我需要评估当前的缩放比例,以便我可以决定是否必须使用 zoomIn
或 zoomOut
来显示用户的要求。
有谁知道在使用 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
});
这样我就可以将相机的高度定义为用户定义的缩放参数。
Cesium 的默认视图是具有透视图的 3D 地球。典型的 2D 缩放级别数字并不能完全描述 Cesium 相机可以看到的不同分辨率。请花一点时间阅读我对 Determining the Map Scale of the Viewed Globe 的完整回答以获得更好的解释。
编辑 1: camera.getMagnitude
函数得到 "magnitude of the camera's position" 这实际上意味着到地球中心的距离。这可能不是您想要的,而是您想要制图位置的高度。
编辑 2: 我在这里添加了一个代码片段,上面有按钮可以将相机的高度设置为不同的高度。单击底部的 "Run code snippet" 以查看实际效果,或仅将其 JavaScript 部分复制到 Sandcastle 到 运行 中。请注意,当相机直视下方时效果最佳,因为它会将相机移动到特定高度而不改变 lat/lon。如果相机偏离轴,鼠标可以 "zoom" 相机沿观察矢量,同时改变所有三个制图坐标(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>
我需要在 Cesium 中创建一个 setZoom()
函数。为此,我认为我需要评估当前的缩放比例,以便我可以决定是否必须使用 zoomIn
或 zoomOut
来显示用户的要求。
有谁知道在使用 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
});
这样我就可以将相机的高度定义为用户定义的缩放参数。
Cesium 的默认视图是具有透视图的 3D 地球。典型的 2D 缩放级别数字并不能完全描述 Cesium 相机可以看到的不同分辨率。请花一点时间阅读我对 Determining the Map Scale of the Viewed Globe 的完整回答以获得更好的解释。
编辑 1: camera.getMagnitude
函数得到 "magnitude of the camera's position" 这实际上意味着到地球中心的距离。这可能不是您想要的,而是您想要制图位置的高度。
编辑 2: 我在这里添加了一个代码片段,上面有按钮可以将相机的高度设置为不同的高度。单击底部的 "Run code snippet" 以查看实际效果,或仅将其 JavaScript 部分复制到 Sandcastle 到 运行 中。请注意,当相机直视下方时效果最佳,因为它会将相机移动到特定高度而不改变 lat/lon。如果相机偏离轴,鼠标可以 "zoom" 相机沿观察矢量,同时改变所有三个制图坐标(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>