[email protected],创建3D瓦片，修改样式

第一步：添加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, // 这里需要打开信息框，后续有用
      });
      // 隐藏logo
      viewer.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;