vue cesium加载点与定位到指定位置的实现方法

 更新时间:2024年03月05日 10:43:55   作者:不想上班只想要钱  
Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下

Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库。它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等。在本文中,我们将介绍如何使用Cesium进行定位。
要使用Cesium进行定位,首先需要准备地理空间数据。Cesium支持多种数据格式,包括GeoJSON、KML、Shapefile等。你可以选择适合你项目的数据格式,并使用Cesium提供的加载器加载地理数据。

下面介绍vue cesium加载点与定位到指定位置。

在这里插入图片描述

vue cesium定位到指定位置

window.viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(point.longDeg, point.latDeg, 6500000), orientation: {
                heading: 6.2079384332084935, roll: 0.00031509431759868534, pitch: -1.535
            }, duration: 3
        })

vue cesium加载点

// 加载点位
function addPoints(pointArr, point, show) {
    let shenhaiPoint = ''
    if (boatLayer.length != 0) {
        boatLayer.forEach(item => {
            window.viewer.entities.remove(item)
        })
    }
    pointArr.forEach((item, i) => {
        boatLayer[i] = window.viewer.entities.add({
            id: item.id, name: item.name, position: Cesium.Cartesian3.fromDegrees(item.jd, item.wd, 0), billboard: {
                // 图像地址,URI或Canvas的属性
                image: item.img || '/static/img/earth/boat_point.png', // image: item.img,
                // 设置颜色和透明度
                // color: Cesium.Color.WHITE.withAlpha(0.8),
                // 高度(以像素为单位)
                height: 20, // 宽度(以像素为单位)
                width: 15, // 逆时针旋转,表示Billboard绕其原点旋转的角度(弧度)
                rotation: -((item.hdg > 360 ? item.cog : item.hdg) * Math.PI / 180), // rotation:-Cesium.Math.PI_OVER_FOUR *2,
                // 大小是否以米为单位
                sizeInMeters: false, // 相对于坐标的垂直位置
                // verticalOrigin: Cesium.VerticalOrigin.CENTER,
                // 相对于坐标的水平位置
                // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
                // pixelOffset: new Cesium.Cartesian2(-7, 0),
                scaleByDistance: new Cesium.NearFarScalar(2000, 1, 100000000, 0.1), // 显示在距相机的距离处的属性,多少区间内是可以显示的
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000000), show: true,  // 是否显示
                alignedAxis: Cesium.Cartesian3.ZERO, // default
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            }, label: {
                text: item.name,
                show:true,
                font: "10px Source Han Sans CN", //字体样式
                fillColor: Cesium.Color.WHITE, //字体颜色
                backgroundColor: Cesium.Color.fromCssColorString('red').withAlpha(0), //背景颜色
                showBackground: true, //是否显示背景颜色
                style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
                outlineWidth: 3, // verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
                // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
                pixelOffset: new Cesium.Cartesian2(0, -15) //偏移
            }, clampToGround: true
        });
    })    
}

到此这篇关于vue cesium加载点与定位到指定位置的文章就介绍到这了,更多相关vue cesium加载点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用Vue3+Element Plus封装公共表格组件(带源码)

    利用Vue3+Element Plus封装公共表格组件(带源码)

    最近公司项目中频繁会使用到table表格,而且前端技术这一块也用到了vue3来开发,所以基于element plus table做了一个二次封装的组件,这篇文章主要给大家介绍了关于利用Vue3+Element Plus封装公共表格组件的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue.sync修饰符与$emit(update:xxx)详解

    Vue.sync修饰符与$emit(update:xxx)详解

    这篇文章主要介绍了Vue.sync修饰符与$emit(update:xxx),实现思路非常简单,文章介绍了.sync修饰符的作用和使用.sync修饰符的写法,实现代码简单易懂对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue实现无限消息无缝滚动

    vue实现无限消息无缝滚动

    这篇文章主要为大家详细介绍了vue实现无限消息无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解Vite的新体验

    详解Vite的新体验

    这篇文章主要介绍了详解Vite的新体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • AntV+Vue实现导出图片功能

    AntV+Vue实现导出图片功能

    AntV 组织图操作完毕以后,需要点击按钮将画布以图片的形式导出,这篇文章主要介绍了AntV结合Vue实现导出图片功能,需要的朋友可以参考下
    2023-01-01
  • Vue3中响应式解构props的使用

    Vue3中响应式解构props的使用

    本文主要介绍了Vue3中响应式解构props的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • Vue3使用setup如何定义组件的name属性详解

    Vue3使用setup如何定义组件的name属性详解

    vue3中新增了setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题,下面这篇文章主要给大家介绍了关于Vue3使用setup如何定义组件的name属性的相关资料,需要的朋友可以参考下
    2022-06-06
  • 解决vue中使用history.replaceState 更改url vue router 无法感知的问题

    解决vue中使用history.replaceState 更改url vue router 无法感知的问题

    这篇文章主要介绍了vue中使用history.replaceState 更改url vue router 无法感知的问题,本文给大家分享修复这个问题的方法,需要的朋友可以参考下
    2022-09-09
  • 如何封装一个类似微信通讯录带有字母检索功能的vue组件

    如何封装一个类似微信通讯录带有字母检索功能的vue组件

    这篇文章主要介绍了如何封装一个类似微信通讯录带有字母检索功能的vue组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 解决VUE-Router 同一页面第二次进入不刷新的问题

    解决VUE-Router 同一页面第二次进入不刷新的问题

    这篇文章主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论