Vue2 uses cesium [Part 2 - camera perspective movement + adding model]
I have been working on cesium for a while, and I am getting started with Xiaobai. This thing is awesome, but I feel that this thing is very laborious! There is not much information on the Internet, and everyone's usage is different. It is really perfect to operate. I wrote a blog post about vue2 using cesium before, but I didn’t finish it. I wanted to continue writing it. After thinking about it, I’d better start a new one. The last article talked about events. I don’t want to write about events today. Let’s write something else first, some basic operations. Note: For reference only, do not do your best.
Secondly, this blog post is based on the vue2 using cesium blog post, so let’s talk about how cesium is placed in the vue project, how to load layers and so on. The ones that are not outdated are all available for personal testing. These blog posts are all written, typed, and screenshots at the same time.
camera angle movement
This section talks about the movement of the camera's perspective. For example, if we want the earth to automatically go to a position after loading, we can use a method provided by cesium to move the camera to where we need it.
This part of the code is very simple, first post the relevant API on the official website . This camera movement, which vieweris camerabelow the camera, has a flyTo (options)method .
My code is written for a relatively simple case. If it is more complicated, modify it according to the official api.
First, we encapsulate a camera movement function, and then call the encapsulated function directly when using it.
/**
* 相机视角移动函数 - 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 // 飞行时间
})
}
Then it is very simple to use, just call it directly.
// 比如说两秒之后，视角移动到目标区域
setTimeout(() => {
// 相机视角移动至目标位置
this.flyToTarget(117.000923, 36.675807, 12000000, 0, -90, 0, 2)
}, 2000)
In this case, the basic implementation of the camera movement angle of view is completed, let's take a look at the effect. Make a complaint, CSDN is very unfriendly to upload gif pictures, some effect screenshots are not good, gif is better, but the size of the picture is limited, I recorded a lot of them and imported them and found that they are too big to allow me to upload, angry!
Look, I refreshed the page, and the globe initially showed North America, but after a while, the perspective of the globe rotated to the target area we set, um, that's it.
add model
Well, when it comes to adding models, everyone has their own habits and methods, so I will simply write it here.
First of all, if you want to load a real model on Bluestar, you need to find a model. If it is a serious project development, adding a model or something, there will definitely be a model file designed and made by yourself, or you can entrust a third party to purchase it. But what if you play by yourself, it’s okay, my friends, I recommend a website called Sketchfab , this website is foreign, and there are many models in it that can be downloaded for free, although some exquisite ones need to be paid, but if you play by yourself, it doesn’t matter up.
For example, if we search for "satellite", the English name is "satellite". Search, the searched model, with a download button in the upper right corner, can be downloaded for free:
Click the download button in the upper right corner, and a window will pop up to select the file type. I chose the gltf format. After making sure, click the blue download button to download.
The download is a compressed package, which contains our model files:
After decompression, it looks like this:
We introduced this gltf file into the project, but other files are called by the gltf text, so we have to ask for them all. But some files are only gltf files, which have no textures, and all data are stored in gltf, without separate mutual references. So it's all the same.
Then put the decompressed folder directly in public -> static -> modelsthe folder . Of course, you can change the name as needed. This is no problem.
The next step is to add this model to the project and let it be loaded on Bluestar.
Everyone has a different coding method. I wrote the model separately as a TModels.js file and imported it:
/**
* 普通卫星模型
* @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 {
// 模型id
id: 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,
// // 模型轮廓大小，单位px
silhouetteSize: 0,
},
// 添加描述
description: description
}
}
It is like the above, and then it throws a method, and the passed parameters are modified according to the actual needs of the project. Some comments I wrote are okay, and should be understandable. If you need other parameters or effects, you can check the manual on the official website.
This is just a method of creating a model, through which a model can be read out. The next step is to put this model on the blue star. Put a model on top of the blue star.
First, you need a longitude and latitude information, which is where to put the model;
then a height, which is how high the model is from the sea level after placing the model at this position;
and then the parameters related to the direction angle, because the model is three-dimensional, where does it face at this position , how much the center point rotates;
First introduce the model from the previous step
import {
satelliteModel } from './TModels'
Then write a method to encapsulate the model loading:
/**
* 添加卫星模型 - 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
}
In this way, the method of adding models to Bluestar is encapsulated, and we can pass parameters and call them.
this.addModel('wjw-001', '测试模型', 117, 36, 1000000, 0, 0, 0)
Then our small satellite is loaded into the blue star.
Well, this is the easiest way to load the model to Bluestar, and there are other ways, if necessary, you can take a look and study it yourself.
remove model
The previous section talked about loading the model, and it needs to be removed after loading.
The general logic, didn't we set an id for the model when we added the model? This is unique. We obtain this model object according to this unique identifier id. If we obtain it, it means that Bluestar does have a model with this id. We can delete it directly. If not, then It means that there is no model with this id on Bluestar, so there is no need to deal with it, because there is no need to delete it.
Packaging method:
/**
* 根据 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)
}
Said ha, in fact, can be written in one way, right? But here I have divided them into two. There must be a reason for doing this. Everyone’s business is different, so there must be a difference in the packaging. Some bloggers were scolded before, saying that my packaging was wrong. That’s because of the specific The business requirements are different, so I will simply write a demo and package it myself according to my actual situation. Don't spray if you don't like it!
Then it's simple, just call it.
// 添加卫星
this.addModel('wjw-001', '测试模型', 117, 36, 1000000, 0, 0, 0)
// 根据 id 获取模型
let model = this.getModelById('wjw-001')
console.log(model)
A model with the id wjw-001 was added before , let's get it first:
The console prints out.
If you query an id that doesn't exist, take a look at the effect:
// 添加卫星
this.addModel('wjw-001', '测试模型', 117, 36, 1000000, 0, 0, 0)
// 根据 id 获取模型
let model = this.getModelById('wjw-002')
console.log('获取到的模型对象------->> ', model)
There is no model whose id is wjw-002 , check it out to see the result:
No, it matches the logic we thought.
Then just delete it:
// 添加卫星
this.addModel('wjw-001', '测试模型', 117, 36, 1000000, 0, 0, 0)
// 根据 id 获取模型
let model = this.getModelById('wjw-001')
if (model) {
setTimeout(() => {
this.removeModel(model) // 四秒后删除
}, 4000)
}
Take a look at the effect:
Well, that's it.
This article will be like this first, and then continue.