优秀网站建设设计,如何设计自己公司网页,网站名称价格,wordpress安装 后vue2 使用 cesium 【第二篇-相机视角移动添加模型】 搞了一阵子 cesium#xff0c;小白入门#xff0c;这东西很牛逼#xff0c;但是感觉这东西好费劲啊#xff01;网上资料不多#xff0c;每个人的用法又不一样#xff0c;操作起来真的是绝绝子。之前写了一篇 vue2 使用…vue2 使用 cesium 【第二篇-相机视角移动添加模型】 搞了一阵子 cesium小白入门这东西很牛逼但是感觉这东西好费劲啊网上资料不多每个人的用法又不一样操作起来真的是绝绝子。之前写了一篇 vue2 使用 cesium 的博文没有写完本来想继续写来着想了一下还是重新开一篇吧。上一篇说到了事件今天不想写事件了先写一点儿别的吧一些基本的操作。注意仅供参考切勿尽心。 其次这篇博文是基于 vue2 使用 cesium 这篇博文继续的所以说关于 cesium 怎么放到 vue 项目里面怎么加载图层啥的去看上一篇博文起码到我写的时候这个博文是没有过时的都是亲测可用的这几篇博文都是一边写、一边敲、一边截图的。 相机视角移动
这小节说一下相机视角的移动就比如说我们想让地球加载完之后自动转到一个位置我们可以使用 cesium 提供的一个方法把相机移动到我们需要的地方。
这部分的代码就很简单了首先贴一下官网相关 API。这个相机移动是在 viewer 下面的 camera 相机下面有一个 flyTo (options) 方法。 我代码写的是比较简单的案例了如果比较复杂的话根据官方给出的 api 去修改。
首先我们封装一个相机移动的函数然后在使用的时候直接调用这个封装好的函数就可以了。 /*** 相机视角移动函数 - by wjw* param lon 目标经度* param lat 目标纬度* param height 相机高度* param heading 航向角* param pitch 俯仰角* param roll 距中心的距离以米为单位* param duration 飞行时间*/flyToTarget(lon, lat, height, heading, pitch, roll, duration) {this.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(lon, lat, height), // 经纬度以及相机离地高度orientation: {heading: Cesium.Math.toRadians(heading), // 航向角pitch: Cesium.Math.toRadians(pitch), // 俯仰角roll: roll // 距中心的距离以米为单位},duration: duration // 飞行时间})}然后使用的话也很简单直接调用一下子就可以了。
// 比如说两秒之后视角移动到目标区域
setTimeout(() {// 相机视角移动至目标位置this.flyToTarget(117.000923, 36.675807, 12000000, 0, -90, 0, 2)
}, 2000)这样的话相机移动视角的基本实现就完成了看一下效果哈。吐槽一下CSDN 这个上传 gif 图片很不友好有些效果截图效果不好gif 更好但是图片大小有限制好多我录好了导入发现太大了不让我上传气 看我刷新一下页面地球最开始显示的是北美区域但是过了一会儿地球视角旋转到了我们设定的目标区域嗯就是这个样子。
添加模型
嗯添加模型这个东西每个人的方式都有自己的习惯和方式我这边就简单的写一下哈。
首先如果想要一个真实的模型加载在蓝星就需要去找一个模型如果是正经项目开发添加模型什么的肯定会有自己设计制作好的模型文件提供或者是委托第三方采购但是如果是自己玩怎么办没关系宝子们我推荐一个网站叫做 Sketchfab这个网站是国外的里面有很多模型可以免费下载尽管有些精致的需要付费但是自己玩的话这都不重要了。 比如我们搜索 “卫星” 英文就是 “satellite”。搜索一下搜出来的模型右上角带有下载按钮的就是可以免费下载的了 点击了右上角的下载按钮会弹窗选择文件类型我是选择 gltf 格式的确定好点击蓝色的下载按钮就可以下载下来了。 下载下来就是个压缩包里面是我们的模型文件 解压后 是这个样子的 我们在项目里面引入的就是这个 gltf 文件但是其他文件是 gltf 文中调用的所以说呢都得要。但是有的文件哈只有 gltf 文件他是没有贴图的所有的数据都保存在 gltf 中了没有分开相互引用。所以说呢都一样。
然后把这个解压后的文件夹直接放在项目的 public - static - models 文件夹中就可以了当然可以根据需要随便改改名字这个是没有问题的。 接下来就是在项目中添加这个模型让他加载到蓝星上面去。
每个人编码方式不一样哈我把模型单独写了一个 TModels.js 文件引入的
/*** 普通卫星模型* param id 模型唯一标识ID* param position 位置信息* param orientation 方向信息* param description 模型描述* returns {{orientation, description, model: {minimumPixelSize: number, show: boolean, scale: number, maximumSize: number, uri: string}, id, position}}*/
export const satelliteModel function (id, position, orientation, description, modelData) {return {// 模型idid: id,// 模型类型modelType: wx,// 模型位置position: position,// 模型自定义数据modelData: modelData,// 模型方向orientation: orientation,// 模型资源model: {// 模型路径uri: /static/models/weixing/scene.gltf,scale: 1000.0, //放大倍数// 模型是否可见show: true,// 模型最小刻度minimumPixelSize: 150,// 模型最大刻度maximumSize: 150,// // 模型轮廓颜色silhouetteColor: Cesium.Color.WHITE,// // 模型轮廓大小单位pxsilhouetteSize: 0,},// 添加描述description: description}
}
就是上边这个样子然后这是抛出了一个方法传的参数根据自己项目的实际需要进行修改。一些注释我写的也算可以应该是可以看懂的如果需要其他的参数或者是效果可以去官网查一下手册。
这只是创建模型的方法通过这个方法可以读取出一个模型出来。接下来就是把这个模型放到蓝星上面。把一个模型放到蓝星上面。
首先需要一个经纬度信息就是把模型放到哪里 然后一个高度就是把模型放着这个位置后距离海平面多高 然后方向角相关参数因为模型是三维的他在这个位置朝向哪里中心点旋转多少
首先引入上一步的模型
import { satelliteModel } from ./TModels然后编写封装一下模型加载的方法 /*** 添加卫星模型 - by wjw* param lon 经度* param lat 纬度* param height 高度* param heading 航向角* param pitch 俯仰角* param roll 转向角度* param id 模型唯一标识符* param description 描述*/addModel(id, description, lon, lat, height, heading, pitch, roll) {// 模型位置信息let position Cesium.Cartesian3.fromDegrees(lon, lat, height);// 设置模型方向let hpRoll new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));let orientation Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);// 向蓝星添加模型返回模型对象let model this.viewer.entities.add(satelliteModel(id, position, orientation, description));return model}这样想蓝星添加模型的方法就封装好了我们传参调用一下就可以了。
this.addModel(wjw-001, 测试模型, 117, 36, 1000000, 0, 0, 0)然后我们的小卫星就加载到蓝星了。 好了这是最简单的加载模型到蓝星的方式还有其他的方式如果需要的话可以自己看一下研究一下。
移除模型
上一小节说了一下加载模型加载上了还需要移除。
大体逻辑哈我们添加模型的时候不是给模型设置了一个 id 吗这是唯一的我们根据这个唯一的标识符 id 去获取到这个模型对象如果获取到了就说明蓝星确实有这个 id 的模型我们直接删除就可以了如果没有获取到那么就说明蓝星上没有这个 id 的模型那就不用处理了因为没有就不需要删除。
封装方法 /*** 根据 ID 查询模型 - by wjw* param id 模型唯一标识符 id* returns {Entity}*/getModelById(id) {let model this.viewer.entities.getById(id)return model}/*** 删除模型 - by wjw* param model 模型实体对象*/removeModel(model) {this.viewer.entities.remove(model)}说哈其实可以一个方法写完是吧但是这里我分了两个这么做肯定有原因的每个人业务不一样所以说呢封装起来肯定有区别之前有博客被人骂了说我封装的不对那是因为具体的业务需求不一样我就简单写个 demo根据自己的实际情况自己封装哈。不喜勿喷
然后就简单了调用一下就可以了。 // 添加卫星this.addModel(wjw-001, 测试模型, 117, 36, 1000000, 0, 0, 0)// 根据 id 获取模型let model this.getModelById(wjw-001)console.log(model)之前添加了一个 id 是 wjw-001 的模型我们先获取一下看看 控制台打印出来了。
如果查询一个没有的 id 看一下效果 // 添加卫星this.addModel(wjw-001, 测试模型, 117, 36, 1000000, 0, 0, 0)// 根据 id 获取模型let model this.getModelById(wjw-002)console.log(获取到的模型对象------- , model)没有 id 是 wjw-002 的模型查询出来看结果 没有和我们想的逻辑对起来了。
然后删除就可以了 // 添加卫星this.addModel(wjw-001, 测试模型, 117, 36, 1000000, 0, 0, 0)// 根据 id 获取模型let model this.getModelById(wjw-001)if (model) {setTimeout(() {this.removeModel(model) // 四秒后删除}, 4000)}看一下效果 好了就这样。
这篇文章先这样后边继续。
