cesium入門(八)
阿新 • • 發佈:2018-11-24
cesium入門(八)
互動
- 我們可以通過三種方式來通過滑鼠和cesium互動
- scene.pick 通過視窗座標來取一個物件
- scene.drillPick取一個物件列表
- Globe.pick 根據光線和地形取一個物件
// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity;
var handler = viewer.screenSpaceEventHandler ;
//監聽操作型別和處理函式
handler.setInputAction(function (movement) {
var pickedPrimitive = viewer.scene.pick(movement.endPosition);
var pickedEntity = Cesium.defined(pickedPrimitive) ? pickedPrimitive.id : undefined;
// Unhighlight the previously picked entity
if (Cesium.defined (previousPickedEntity)) {
previousPickedEntity.billboard.scale = 1.0;
previousPickedEntity.billboard.color = Cesium.Color.WHITE;
}
// Highlight the currently picked entity
if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
pickedEntity.billboard .scale = 2.0;
pickedEntity.billboard.color = Cesium.Color.ORANGERED;
previousPickedEntity = pickedEntity;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
相機模型
- 兩種一種是靜態的也是預設的給那在那,第二種是動態的可以自動根據參照物調整
// Create a follow camera by tracking the drone entity
function setViewMode() {
if (droneModeElement.checked) {
//自動跟
viewer.trackedEntity = drone;
} else {
//取消第一步先給值underfined第二個飛回預設
viewer.trackedEntity = undefined;
viewer.scene.camera.flyTo(homeCameraView);
}
}
var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');
// Create a follow camera by tracking the drone entity
function setViewMode() {
if (droneModeElement.checked) {
viewer.trackedEntity = drone;
} else {
viewer.trackedEntity = undefined;
viewer.scene.camera.flyTo(homeCameraView);
}
}
freeModeElement.addEventListener('change', setViewMode);
droneModeElement.addEventListener('change', setViewMode);
viewer.trackedEntityChanged.addEventListener(function() {
if (viewer.trackedEntity === drone) {
freeModeElement.checked = false;
droneModeElement.checked = true;
}
});
展現
-我們可以通過entity控制單個的,同樣我們也可以控制它周邊的。如下一般用不到沒有研究
var shadowsElement = document.getElementById('shadows');
var neighborhoodsElement = document.getElementById('neighborhoods');
shadowsElement.addEventListener('change', function (e) {
viewer.shadows = e.target.checked;
});
neighborhoodsElement.addEventListener('change', function (e) {
neighborhoods.show = e.target.checked;
});
// Finally, wait for the initial city to be ready before removing the loading indicator.
var loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'block';
city.readyPromise.then(function () {
loadingIndicator.style.display = 'none';
});