第一步：添加3D建筑

Cesium.createOsmBuildingsAsync()

这是一个异步方法，所以要写在一个异步函数里
创建一个函数

  const create3DBuilding = async (viewer) => {try {// 添加3D建筑const tileset = await Cesium.createOsmBuildingsAsync();viewer.scene.primitives.add(tileset);} catch (error) {console.log(`Error creating tileset: ${error}`);}};

上述代码运行后的效果

第二步：设定样式

根据某些条件设定样式

首先点击页面中的建筑，右侧会出现信息框。信息框中有一些基本信息

这里，我们根据建筑的类型进行颜色设置

const tileset = await Cesium.createOsmBuildingsAsync({style: new Cesium.Cesium3DTileStyle({color: {// 设置条件conditions: [// 建筑为医院时["${feature['building']} === 'hospital'", "color('#0000FF')"],// 建筑为学校时["${feature['building']} === 'school'", "color('#00FF00')"],// 建筑为公寓时["${feature['building']} === 'apartments'", "color('#ffa600')"],// 除了上述条件以为，其他建筑的颜色[true, "color('#999999')"],],},}),});

以某一点为中心，向周围扩散设置样式

根据代码中设定的经纬度
const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);
设置在小于position经纬度0.01的范围设置特定的颜色。

const tileset = await Cesium.createOsmBuildingsAsync({style: new Cesium.Cesium3DTileStyle({defines: {distance:"distance(vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}),vec2(113.3191,23.109))",},color: {// 设置条件conditions: [['${distance} < 0.01', "color('rgba(123,15,110,.8)')"],['${distance} < 0.02', "color('rgba(23,125,110,.5)')"],['${distance} < 0.03', "color('rgba(99,121,110,.8)')"],[true, "color('#999999')"],],},}),});

直接设置所有建筑为蓝色

 const tileset = await Cesium.createOsmBuildingsAsync({style: new Cesium.Cesium3DTileStyle({color: "color('blue')",}),});

完整代码

const CesiumCreate: React.FC = () => {const cesiumRef = useRef<HTMLDivElement>(null);const create3DBuilding = async (viewer) => {try {// 添加3D建筑const tileset = await Cesium.createOsmBuildingsAsync({style: new Cesium.Cesium3DTileStyle({color: {// 设置条件conditions: [["${feature['building']} === 'hospital'", "color('#0000FF')"],["${feature['building']} === 'school'", "color('#00FF00')"],["${feature['building']} === 'apartments'", "color('#ffa600')"],[true, "color('#999999')"],],},}),});viewer.scene.primitives.add(tileset);} catch (error) {console.log(`Error creating tileset: ${error}`);}};// 初始化调用useEffect(() => {if (cesiumRef.current) {// 创建实例const viewer = new Cesium.Viewer(cesiumRef.current, {// infoBox: false, // 这里需要打开信息框，后续有用});// 隐藏logoviewer.cesiumWidget.creditContainer.style.display = 'none';create3DBuilding(viewer);const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000);viewer.camera.flyTo({destination: position,duration: 2,});return () => {if (!viewer.isDestroyed()) {viewer.destroy();}};}}, []);return (<div id={'cesiumContainer'} ref={cesiumRef} style={{ height: '100vh', width: '100vw' }}></div>);
};export default CesiumCreate;