Cesium地图绘制红色圆形及获取圈内图层要素与建筑数据方法咨询

一、绘制红色圆形 #

直接用Cesium自带的DrawHandler工具就能实现，步骤如下：

1. 初始化Cesium Viewer（基础代码）

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

2. 创建圆形绘制工具并设置红色样式

// 创建绘制处理器，指定绘制圆形
const drawHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.CIRCLE);

// 设置绘制过程中的临时样式
drawHandler.drawEvt.addEventListener(function(result) {
    result.object.material = Cesium.Color.RED.withAlpha(0.3);
    result.object.outlineColor = Cesium.Color.RED;
});

// 绘制完成后固定红色圆形
drawHandler.completeEvt.addEventListener(function(result) {
    // 移除临时绘制对象
    viewer.entities.remove(result.object);
    // 添加正式的红色圆形实体
    const circleEntity = viewer.entities.add({
        position: result.position,
        ellipse: {
            semiMajorAxis: result.semiMajorAxis,
            semiMinorAxis: result.semiMajorAxis,
            material: Cesium.Color.RED.withAlpha(0.3),
            outline: true,
            outlineColor: Cesium.Color.RED
        }
    });
    // 存储圆形参数，用于后续查询
    window.selectedCircle = {
        center: result.position,
        radius: result.semiMajorAxis
    };
    // 关闭绘制工具
    drawHandler.deactivate();
});

// 激活绘制工具
drawHandler.activate();

操作示意：

点击地图拖拽即可画出红色半透明圆形，松开鼠标完成绘制

二、查询圆形范围内的要素/建筑数据 #

1. 查询自定义矢量图层（如GeoJSON/CZML加载的要素） #

如果是自己加载的矢量要素，遍历要素并判断是否在圆形范围内：

// 假设已加载的数据源存储在window.customDataSource中
const queryResults = [];

// 遍历所有要素
window.customDataSource.entities.values.forEach(entity => {
    // 获取要素的位置点（面要素可取中心点或遍历顶点判断）
    const entityPosition = entity.position.getValue(viewer.clock.currentTime);
    if (entityPosition) {
        // 判断点是否在圆形范围内
        const isInside = Cesium.Circle.contains(window.selectedCircle.center, window.selectedCircle.radius, entityPosition);
        if (isInside) {
            queryResults.push(entity.properties.getValue(viewer.clock.currentTime));
        }
    }
});

// 输出查询结果
console.log('范围内矢量要素数据:', queryResults);

2. 查询Cesium 3D Tiles建筑数据 #

针对Cesium自带或自定义加载的3D Tiles建筑，用空间查询API：

// 加载示例建筑数据集（可替换为自己的tileset地址）
const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188)
    })
);

// 执行空间查询
const queryOptions = {
    boundingSphere: new Cesium.BoundingSphere(window.selectedCircle.center, window.selectedCircle.radius)
};

tileset.queryFeatures(queryOptions).then(results => {
    const buildingData = results.map(result => {
        return result.getProperty('name') || result.getProperty('id'); // 根据tileset属性调整
    });
    console.log('范围内建筑数据:', buildingData);
});

查询结果示意：

控制台会输出范围内所有符合条件的要素/建筑属性数据

内容的提问来源于stack exchange，提问作者JYuan94