vue3.2+ts+cesium制作3DGIS效果的大屏（下）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3.2+ts+cesium制作3DGIS效果的大屏（下）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

cesium用于三维可视化，在城市场景工业场景巡航等场景用处多，接下来我们初始地址是图五的效果，我们镜头跟随视角函数flyto来到山西阳泉，定位其中的一个建筑并正射这个建筑，给这个建筑打上tip控制相机视角高度为2000，我们从图一的效果执行代码

viewer.camera.flyTo( {
  destination: Cesium.Cartesian3.fromDegrees(113.572642,37.86694,2000),//山西阳泉
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0 ),
    range:10000
  }});

然后我们定位到了我们所需要的位置，然后我们设置tip，并给tip设置开启关闭气泡弹窗功能（tip的箭头太丑了没找到合适的），此后视角无论如何转动弹窗都跟随你的镜头

vue3.2+ts+cesium制作3DGIS效果的大屏（下）

我们写一个tip实体类里面inage属性可以放base64 我没有图片就用的自带的蓝色图标，总体代码如下只需实列化一个对象，生产tip调用addEntity函数，参数传入弹窗所需要的数据

export default class DragEntity{
    constructor(val,Cesium){
        this.viewer = val.viewer
        this.Cesium = Cesium
    }
    addEntity(value){
        let pinBuilder = new this.Cesium.PinBuilder();
        let poin = this.viewer.entities.add({
            id:value.id,
            name: value.name,
            position: this.Cesium.Cartesian3.fromDegrees(parseFloat(value.position.x), parseFloat(value.position.y)),
            billboard: {
                image:  pinBuilder.fromColor(this.Cesium.Color.ROYALBLUE, 48).toDataURL(),
                verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
            },
            monitoItems:{
                data:value
            },
        });
        return poin
    }

}

然后简单封装一个fetch对象函数作为我们接口的调用，大屏展示接口暂时只有get

export default function (url:string,method:string = "get",data?:Array<any>|Object) {
    let headers:{ Authorization: string; "tenant-id": string }={
        "Authorization": opener["filter"]["Authorization"],
        "tenant-id":  opener["filter"]["tenant-id"]+""
    }
    return fetch(url, {headers,method}).then(
        (response:Response)=>{
        if(response.status === 200){
            return response.json();
        }else{
            return {}
        }
    },(error)=>{
        return {}
    })
}

在setup后面我们定义一些数据和一些响应式数据文章来源地址https://www.toymoban.com/news/detail-416848.html

let viewer:any=null
let map:any=null
let citys:Array<number>=[]
let views:Array<any>=[]
let twinkles:Array<any>=[]
interface ttcObject { value?: boolean }
interface msgObject { value?: string|number }
interface videoP extends Object {switch: boolean; readonly type: string}
const alarmRankDataMax:number=232;
const devs: Array<any> = react

到了这里，关于vue3.2+ts+cesium制作3DGIS效果的大屏（下）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！