Cesium@1.126.0,创建3D瓦片,修改样式

第一步:添加3D建筑

复制代码
Cesium.createOsmBuildingsAsync()

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

创建一个函数

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

上述代码运行后的效果

第二步:设定样式

根据某些条件设定样式

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

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

ts 复制代码
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的范围设置特定的颜色。

ts 复制代码
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')"],
         ],
       },
     }),
   });

直接设置所有建筑为蓝色

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

完整代码

ts 复制代码
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;
相关推荐
passer9812 分钟前
列表项切换时同步到可视区域
前端
FogLetter4 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元5 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api6 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
整点可乐7 分钟前
cesium实现鹰眼图
javascript·cesium
艾小码8 分钟前
Web存储指南:彻底掌握localStorage与sessionStorage
javascript
子林super14 分钟前
y1新建cluster集群redis
前端
BUG创建者20 分钟前
openlayer根据不同的状态显示不同的图层颜色
android·java·javascript
Pedantic34 分钟前
swift 日期与时间的三个结构体
前端
南方kenny34 分钟前
Mock.js:前端开发的假数据神器
前端·javascript