Cesium 鼠标响应事件交互代码示例大全

 Cesium上的entity点击相应事件怎么触发，怎么显示弹窗，怎么处理呢？ 以下为一些示例代码

// 获取默认的左键单击处理程序，用于在左键单击时未拾取要素 
var clickHandler = viewer.screenSpaceEventHandler.getInputAction( 
Cesium.ScreenSpaceEventType.LEFT_CLICK 
); 
  
// 如果支持剪影，则鼠标上方的剪影功能为蓝色，鼠标单击的剪影功能为绿色 
// 如果不支持轮廓，请将特征颜色更改为鼠标悬停时为黄色，单击鼠标时为绿色 
if ( 
Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene) 
) { 
// 支持轮廓 
var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); 
silhouetteBlue.uniforms.color = Cesium.Color.BLUE;//蓝色 
silhouetteBlue.uniforms.length = 0.01; 
silhouetteBlue.selected = []; 
  
var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage(); 
silhouetteGreen.uniforms.color = Cesium.Color.LIME; 
silhouetteGreen.uniforms.length = 0.01; 
silhouetteGreen.selected = []; 
  
viewer.scene.postProcessStages.add( 
Cesium.PostProcessStageLibrary.createSilhouetteStage([ 
silhouetteBlue, 
silhouetteGreen, 
]) 
); 
  
// 在悬停时勾勒出蓝色的轮廓 
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove( 
movement 
) { 
// 如果先前高亮显示了某个要素，请撤消该高亮显示 
silhouetteBlue.selected = []; 
  
//点击新要素 
var pickedFeature = viewer.scene.pick(movement.endPosition); 
if (!Cesium.defined(pickedFeature)) { 
nameOverlay.style.display = "none"; 
return; 
} 
  
//要素被点击，显示它的覆盖内容 
nameOverlay.style.display = "block"; 
nameOverlay.style.bottom = 
viewer.canvas.clientHeight - movement.endPosition.y + "px"; 
nameOverlay.style.left = movement.endPosition.x + "px"; 
var name = pickedFeature.getProperty("BIN"); 
nameOverlay.textContent = name; 
  
// 突出显示尚未选定的功能 
if (pickedFeature !== selected.feature) { 
silhouetteBlue.selected = [pickedFeature]; 
} 
}, 
Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
  
// 在信息框中显示选定内容和元数据 
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick( 
movement 
) { 
// 如果先前选择了某个特征，请撤消高亮显示 
silhouetteGreen.selected = []; 
  
// 点击新要素 
var pickedFeature = viewer.scene.pick(movement.position); 
if (!Cesium.defined(pickedFeature)) { 
clickHandler(movement); 
return; 
} 
  
// Select the feature if it's not already selected 
if (silhouetteGreen.selected[0] === pickedFeature) { 
return; 
} 
  
// 保存选定要素的原始颜色 
var highlightedFeature = silhouetteBlue.selected[0]; 
if (pickedFeature === highlightedFeature) { 
silhouetteBlue.selected = []; 
} 
  
// 高亮新选择要素 
silhouetteGreen.selected = [pickedFeature]; 
  
// 设置要素信息框描述 
var featureName = pickedFeature.getProperty("name"); 
selectedEntity.name = featureName; 
selectedEntity.description = 
'Loading <div class="cesium-infoBox-loading"></div>'; 
viewer.selectedEntity = selectedEntity; 
selectedEntity.description = 
'<table class="cesium-infoBox-defaultTable"><tbody>' + 
"<tr><th>BIN</th><td>" + 
pickedFeature.getProperty("BIN") + 
"</td></tr>" + 
"<tr><th>DOITT ID</th><td>" + 
pickedFeature.getProperty("DOITT_ID") + 
"</td></tr>" + 
"<tr><th>SOURCE ID</th><td>" + 
pickedFeature.getProperty("SOURCE_ID") + 
"</td></tr>" + 
"</tbody></table>"; 
}, 
Cesium.ScreenSpaceEventType.LEFT_CLICK); 
} else { 
// 不支持轮廓。相反，更改特征颜色 
// 有关当前突出显示的功能的信息 
var highlighted = { 
feature: undefined, 
originalColor: new Cesium.Color(), 
}; 
  
// 鼠标移动显示黄色 
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove( 
movement 
) { 
// 如果先前高亮显示了某个要素，请撤消该高亮显示 
if (Cesium.defined(highlighted.feature)) { 
highlighted.feature.color = highlighted.originalColor; 
highlighted.feature = undefined; 
} 
// 点击新要素 
var pickedFeature = viewer.scene.pick(movement.endPosition); 
if (!Cesium.defined(pickedFeature)) { 
nameOverlay.style.display = "none"; 
return; 
} 
// 要素被点击，显示它的覆盖内容 
nameOverlay.style.display = "block"; 
nameOverlay.style.bottom = 
viewer.canvas.clientHeight - movement.endPosition.y + "px"; 
nameOverlay.style.left = movement.endPosition.x + "px"; 
var name = pickedFeature.getProperty("name"); 
if (!Cesium.defined(name)) { 
name = pickedFeature.getProperty("id"); 
} 
nameOverlay.textContent = name; 
// Highlight the feature if it's not already selected. 
if (pickedFeature !== selected.feature) { 
highlighted.feature = pickedFeature; 
Cesium.Color.clone( 
pickedFeature.color, 
highlighted.originalColor 
); 
pickedFeature.color = Cesium.Color.YELLOW; 
} 
}, 
Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
  
//为所选内容上色并在信息框中显示元数据 
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick( 
movement 
) { 
// 如果先前选择了某个特征，请撤消高亮显示 
if (Cesium.defined(selected.feature)) { 
selected.feature.color = selected.originalColor; 
selected.feature = undefined; 
} 
// 点击新要素 
var pickedFeature = viewer.scene.pick(movement.position); 
if (!Cesium.defined(pickedFeature)) { 
clickHandler(movement); 
return; 
} 
// Select the feature if it's not already selected 
if (selected.feature === pickedFeature) { 
return; 
} 
selected.feature = pickedFeature; 
// Save the selected feature's original color 
if (pickedFeature === highlighted.feature) { 
Cesium.Color.clone( 
highlighted.originalColor, 
selected.originalColor 
); 
highlighted.feature = undefined; 
} else { 
Cesium.Color.clone(pickedFeature.color, selected.originalColor); 
} 
// Highlight newly selected feature 
pickedFeature.color = Cesium.Color.LIME; 
// Set feature infobox description 
var featureName = pickedFeature.getProperty("name"); 
selectedEntity.name = featureName; 
selectedEntity.description = 
'Loading <div class="cesium-infoBox-loading"></div>'; 
viewer.selectedEntity = selectedEntity; 
selectedEntity.description = 
'<table class="cesium-infoBox-defaultTable"><tbody>' + 
"<tr><th>BIN</th><td>" + 
pickedFeature.getProperty("BIN") + 
"</td></tr>" + 
"<tr><th>DOITT ID</th><td>" + 
pickedFeature.getProperty("DOITT_ID") + 
"</td></tr>" + 
"<tr><th>SOURCE ID</th><td>" + 
pickedFeature.getProperty("SOURCE_ID") + 
"</td></tr>" + 
"<tr><th>Longitude</th><td>" + 
pickedFeature.getProperty("longitude") + 
"</td></tr>" + 
"<tr><th>Latitude</th><td>" + 
pickedFeature.getProperty("latitude") + 
"</td></tr>" + 
"<tr><th>Height</th><td>" + 
pickedFeature.getProperty("height") + 
"</td></tr>" + 
"<tr><th>Terrain Height (Ellipsoid)</th><td>" + 
pickedFeature.getProperty("TerrainHeight") + 
"</td></tr>" + 
"</tbody></table>"; 
}, 
Cesium.ScreenSpaceEventType.LEFT_CLICK);