当前位置: 首页 > news >正文

Cesium@1.126.0,创建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;

相关文章:

  • 微信小程序网络请求与API调用:实现数据交互
  • Part-DB部署
  • 探索浮点数在内存中的存储(附带快速计算补码转十进制)
  • 网易云音乐分布式KV存储实践与演进
  • 博客系统完整开发流程
  • 观成科技:海莲花“PerfSpyRAT”木马加密通信分析
  • RK3399 Android10双WiFi功能实现
  • ubuntu+aarch64+dbeaver安装【亲测,避坑】
  • low rank decomposition如何用于矩阵的分解
  • Jenkins protoc: command not found
  • Redis面试题----Redis 的持久化机制是什么?各自的优缺点?
  • 计算机毕业设计SpringBoot+Vue.js中小型医院网站(源码+文档+PPT+讲解)
  • Go语言中的信号量:原理与实践指南
  • 岳阳市美术馆预约平台(小程序论文源码调试讲解)
  • opencv边缘检测
  • 利用机器学习实现实时交易欺诈检测
  • 学习Java数据类型:全面解析与实践指南
  • 【HarmonyOS Next】鸿蒙应用公钥和证书MD5指纹的获取
  • 客户端进程突然结束,服务端read是什么行为?
  • 计算机三级网络技术备考
  • 做英德红茶的网站/企业网络组建方案
  • 两江新区建设管理局网站/如何做好线上营销
  • 桂林dj网站/产品网络营销分析
  • 深圳企业网站app开发/百度手机助手最新版下载
  • 网站跳出/河北网络科技有限公司
  • 网站开发工程师招聘要求/基本seo技术在线咨询