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;
相关推荐
像风一样自由202041 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码3 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github