vue cesium加载点与定位到指定位置

2024-03-02 12:36

本文主要是介绍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, // defaultheightReference: 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加载点与定位到指定位置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766148

相关文章

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

java -jar example.jar 产生的日志输出到指定文件的方法

《java-jarexample.jar产生的日志输出到指定文件的方法》这篇文章给大家介绍java-jarexample.jar产生的日志输出到指定文件的方法,本文给大家介绍的非常详细,对大家的... 目录怎么让 Java -jar example.jar 产生的日志输出到指定文件一、方法1:使用重定向1、

基于Python实现数字限制在指定范围内的五种方式

《基于Python实现数字限制在指定范围内的五种方式》在编程中,数字范围限制是常见需求,无论是游戏开发中的角色属性值、金融计算中的利率调整,还是传感器数据处理中的异常值过滤,都需要将数字控制在合理范围... 目录引言一、基础条件判断法二、数学运算巧解法三、装饰器模式法四、自定义类封装法五、NumPy数组处理

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二