Cesium气泡事件
一、数据准备
准备shp数据,下载cesiumlab的插件:https://www.cesiumlab.com/#downloadurl,将shp数据转换成b3dm格式数据。
转换后的数据文件包含一个总的title.json文件,将这些文件放到Tomcat服务器发布。
在数据转换时,记录好shp数据的属性之后要在代码中进行调用。
二、代码调用
在加载代码中,主要用的方法是:Cesium中的Cesium3DTileset方法进行加载b3dm文件。在点击事件部分用到的方法是screenSpaceEventHandler的点击、移动事件。
主要参考的代码是Demo:
var tileset = new Cesium.Cesium3DTileset({
url: 'localhost:8088/Building/title.json'
});
viewer.scene.primitives.add(tileset);
代码部分进行设置移动事件进行提示:
var nameOverlay = document.createElement('div');
viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop';
nameOverlay.style.display = 'none';
nameOverlay.style.position = 'absolute';
nameOverlay.style.bottom = '0';
nameOverlay.style.left = '0';
nameOverlay.style['pointer-events'] = 'none';
nameOverlay.style.padding = '4px';
nameOverlay.style.backgroundColor = 'black';
在鼠标移动到白膜上显示蓝色、点击时显示绿色。
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('name');
if (!Cesium.defined(name)) {
name = pickedFeature.getProperty('id');
}
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;
}
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>建筑名称</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +
'<tr><th>建筑ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +
'<tr><th>建筑高度</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +'(m)'+
'</tbody></table>';
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
查看运行效果:
关注公众号可以看运行效果: