Cesium + Blender 实现简单GIS

2 篇文章 0 订阅
本文介绍了如何通过Blender构建3D物体并导出为gltf2.0格式,然后在Cesium基础工程中加载和操作3D模型。通过设置模型坐标、旋转和缩放来实现模型在地图上的定位与动态调整。同时,提供了相关参考资料,包括Cesium的模型添加、修改和删除,以及Cesiumlab低代码平台。
摘要由CSDN通过智能技术生成

1.通过Blender构建3d物体

导入CAD/DAE素材,手工搭建。导出gltf2.0格式文件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.在Cesium的基础工程中加入gltf模型

    let x = 117.818372;
    let y = 39.000082;
    const viewer = new Cesium.Viewer("cesiumContainer");
    var scene = viewer.scene;
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
      Cesium.Cartesian3.fromDegrees(x, y, -10.0));
    var model = scene.primitives.add(Cesium.Model.fromGltf({
      url: '../Specs/Data/Models/CK/cck.gltf',//模型文件相对路径  
      modelMatrix: modelMatrix,
      scale: 80 //调整模型在地图中的大小  
    }));

模型旋转
x,y 移动,rz按Z轴旋转

var params = {
      tx: x - 0.0054,   //模型中心X轴坐标(经度,单位:十进制度)
      ty: y + 0.00001,    //模型中心Y轴坐标(纬度,单位:十进制度)
      tz: 0,    //模型中心Z轴坐标(高程,单位:米)
      rx: 0,    //X轴(经度)方向旋转角度(单位:度)
      ry: 0,    //Y轴(纬度)方向旋转角度(单位:度)
      rz: 270      //Z轴(高程)方向旋转角度(单位:度)
    };

    update3dtilesMaxtrix(model, params);

在这里插入图片描述

3.参考文献

1.cesium 添加model及其增删改
2.Cesium-Github
3.Cesiumlab , 基于Cesium开发,低代码平台,适合新手练习,不适合二次开发
4.Cesium中文网,安装步骤可以参考,后面文章需要充值,不推荐
— 以上建议仅代表个人观点,水平有限,欢迎补充。

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据提供的引用内容,Cesium是一个开源的JavaScript库,用于创建WebGL应用程序,可以用于创建三维地球和其他地球空间可视化应用程序。Vue.js是一个流行的JavaScript框架,用于构建用户界面和单页应用程序。在这里,我们可以使用Cesium和Vue.js来实现三维风场和风速热力图。 以下是实现步骤: 1.安装Cesium和Vue.js 在终端中运行以下命令来安装Cesium和Vue.js: ```shell npm install cesium vue --save ``` 2.创建Vue.js应用程序 在Vue.js应用程序中,我们需要使用Cesium Viewer组件来创建三维地球。在App.vue文件中,我们可以使用以下代码来创建Cesium Viewer组件: ```vue <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from 'cesium/Cesium' export default { name: 'App', mounted () { const viewer = new Cesium.Viewer('cesiumContainer') } } </script> ``` 3.添加风场数据 我们可以使用Cesium的ParticleSystem组件来添加风场数据。在mounted()方法中,我们可以使用以下代码来添加风场数据: ```javascript const particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: 'path/to/particle/image.png', startColor: Cesium.Color.RED, endColor: Cesium.Color.YELLOW, startScale: 1.0, endScale: 0.0, minimumSpeed: 5.0, maximumSpeed: 10.0, lifetime: 10.0, emitter: new Cesium.SphereEmitter(0.5), rate: 1000, bursts: [ new Cesium.ParticleBurst({ time: 0.0, minimum: 100, maximum: 200 }), new Cesium.ParticleBurst({ time: 1.0, minimum: 100, maximum: 200 }) ] })) ``` 4.添加风速热力图 我们可以使用Cesium的HeatmapImageryProvider组件来添加风速热力图。在mounted()方法中,我们可以使用以下代码来添加风速热力图: ```javascript const heatmapImageryProvider = new Cesium.HeatmapImageryProvider({ canvasSize: new Cesium.Cartesian2(2048, 2048), data: 'path/to/heatmap/data.json', gradientStops: [ { stop: 0.0, color: Cesium.Color.TRANSPARENT }, { stop: 0.2, color: Cesium.Color.BLUE }, { stop: 0.4, color: Cesium.Color.GREEN }, { stop: 0.6, color: Cesium.Color.YELLOW }, { stop: 0.8, color: Cesium.Color.ORANGE }, { stop: 1.0, color: Cesium.Color.RED } ] }) viewer.imageryLayers.addImageryProvider(heatmapImageryProvider) ``` 5.完整代码 以下是完整的App.vue文件代码: ```vue <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from 'cesium/Cesium' export default { name: 'App', mounted () { const viewer = new Cesium.Viewer('cesiumContainer') const particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: 'path/to/particle/image.png', startColor: Cesium.Color.RED, endColor: Cesium.Color.YELLOW, startScale: 1.0, endScale: 0.0, minimumSpeed: 5.0, maximumSpeed: 10.0, lifetime: 10.0, emitter: new Cesium.SphereEmitter(0.5), rate: 1000, bursts: [ new Cesium.ParticleBurst({ time: 0.0, minimum: 100, maximum: 200 }), new Cesium.ParticleBurst({ time: 1.0, minimum: 100, maximum: 200 }) ] })) const heatmapImageryProvider = new Cesium.HeatmapImageryProvider({ canvasSize: new Cesium.Cartesian2(2048, 2048), data: 'path/to/heatmap/data.json', gradientStops: [ { stop: 0.0, color: Cesium.Color.TRANSPARENT }, { stop: 0.2, color: Cesium.Color.BLUE }, { stop: 0.4, color: Cesium.Color.GREEN }, { stop: 0.6, color: Cesium.Color.YELLOW }, { stop: 0.8, color: Cesium.Color.ORANGE }, { stop: 1.0, color: Cesium.Color.RED } ] }) viewer.imageryLayers.addImageryProvider(heatmapImageryProvider) } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值