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);

查看运行效果：

运行效果

关注公众号可以看运行效果：

公众号