当前位置: 首页 > news >正文

广告牌和标签学习

效果:

知识学习:

entities添加标签label和广告牌billboard

label:

        text:文本添加

        font:字体大小和字体类型

        fillColor:字体颜色

        outlineColor:字体外轮廓颜色

        outlineWidth:字体外轮廓宽度

        style:标签样式

        pixelOffset:文字偏移量

        horizontalOrigin:水平文字显示位置

        verticalOrigin:垂直文字显示位置

billboard:

        image:图片路径,放在public路径

        width:宽度

        height:高度

        verticalOrigin:垂直图片位置

        horizontalOrigin:水平图片位置

代码应用:

<template><div id="cesiumContainer"></div>
</template><script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
import planceImage from './assets/plance.png';
onMounted(() => {// 使用Cesium的Ion服务进行认证Cesium.Ion.defaultAccessToken ="认证码";// 创建一个Viewer实例const viewer = new Cesium.Viewer("cesiumContainer", {// 使用默认的影像图层和地形图层terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true }),// 查找位置工具geocoder: false,// 返回首页按钮homeButton: false,// 场景视角sceneModePicker: false,// 图层选择baseLayerPicker: false,// 导航帮助信息navigationHelpButton: false,// 动画播放速度animation: false,// 时间轴timeline: false,// 全屏按钮fullscreenButton: false,// VR按钮vrButton: false,});// 去除logoviewer.cesiumWidget.creditContainer.style.display = "none";// 飞入// WGS84转笛卡尔坐标系var destination = Cesium.Cartesian3.fromDegrees(116.390, 39.890, 1000.0);viewer.camera.flyTo({destination: destination,orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-10.0),roll: 0.0,},duration: 5,  // 飞行持续时间,单位秒});// 添加文字标签和广告牌var label = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.391, 39.917, 70),label: {text: "北京故宫",font: "24px sans-serif",fillColor: Cesium.Color.WHITE,outlineColor: Cesium.Color.BLACK,outlineWidth: 4,// FILL填充文字,OUTLINE勾勒标签,FILL_AND_OUTLINE填充文字和勾勒标签style: Cesium.LabelStyle.FILL_AND_OUTLINE,// 设置文字的偏移量pixelOffset: new Cesium.Cartesian2(0, -15),// 设置文字的显示位置,LEFT /RIGHT /CENTERhorizontalOrigin: Cesium.HorizontalOrigin.CENTER,// 设置文字的显示位置verticalOrigin: Cesium.VerticalOrigin.BOTTOM,},billboard: {
//推荐:将静态资源放在 public 目录下,并直接使用 URL 形式加载图片,因为在 Cesium 中使用广告牌时,image 属性需要直接使用可以被浏览器访问的路径(URL)image: "public/plance.png",
// 如果图片路径存放到src下的assets,需要import引入,因为使用相对路径引用该图片cesium会找不到资源// image: planceImage,width: 50,height: 50,// 设置广告牌的显示位置verticalOrigin: Cesium.VerticalOrigin.TOP,// 设置广告牌的显示位置horizontalOrigin: Cesium.HorizontalOrigin.CENTER,},});viewer.zoomTo(label)
});</script>

相关文章:

广告牌和标签学习

效果&#xff1a; 知识学习&#xff1a; entities添加标签label和广告牌billboard label&#xff1a; text&#xff1a;文本添加 font&#xff1a;字体大小和字体类型 fillColor&#xff1a;字体颜色 outlineColor&#xff1a;字体外轮廓颜色 outlineWidth&#xff1a;字体外轮…...

GDB 从裸奔到穿戴整齐

无数次被问道&#xff1a;你在终端下怎么调试更高效&#xff1f;或者怎么在 Vim 里调试&#xff1f;好吧&#xff0c;今天统一回答下&#xff0c;我从来不在 vim 里调试&#xff0c;因为它还不成熟。那除了命令行 GDB 裸奔以外&#xff0c;终端下还有没有更高效的方法&#xff…...

WPF的触发器(Trigger)

WPF&#xff08;Windows Presentation Foundation&#xff09;是微软.NET框架的一部分&#xff0c;用于构建Windows客户端应用程序。在WPF中&#xff0c;触发器&#xff08;Triggers&#xff09;是一种强大的功能&#xff0c;允许开发者根据控件的状态或属性值来动态改变控件的…...

全能大模型GPT-4o体验和接入教程

GPT-4o体验和接入教程 前言一、原生API二、Python LangchainSpring AI总结 前言 Open AI发布了产品GPT-4o&#xff0c;o表示"omni"&#xff0c;全能的意思。 GPT-4o可以实时对音频、视觉和文本进行推理&#xff0c;响应时间平均为 320 毫秒&#xff0c;和人类之间对…...

详解Apache版本、新功能和技术前景

文章目录 一、 版本溯源二、新功能和特性举例1. 模块化和可扩展性增强2. 多处理模块&#xff08;MPMs&#xff09;3. 异步支持4. 更细粒度的日志级别控制5. 通用表达式解析器6. HTTP/2支持7. Server Push8. Early Hints9. 更好的SSL/TLS支持10. 更安全的默认设置 三、 技术前景…...

Docker Redis集群3主3从模式

主从集群 docker run -d --name redis-node1 --net host --privilegedtrue -v /home/redis/node1:/data redis:7.0 --cluster-enabled yes --appendonly yes --port 9371docker run -d --name redis-node2 --net host --privilegedtrue -v /home/redis/node2:/data redis:7.0 …...

【Go语言】

type关键字的用法 定义结构体定义接口定义类型别名类型定义类型判断 别名实际上是为了更好地理解代码/ 这里要分点进行记录 使用传值的例子&#xff0c;当两个类型不一样需要进行类型转换 type Myint int // 自定义类型&#xff0c;基于已有的类型自定义一个类型type Myin…...

【Spring Boot】元注解

元注解 1.元注解1.1 Target1.2 Retention1.3 Inherited1.4 Documented1.5 interface 2.自定义注解2.1 创建自定义注解类2.2 实现业务逻辑2.3 使用自定义注解 1.元注解 元注解就是定义注解的注解&#xff0c;是 Java 提供的用于定义注解的基本注解。 注解 说明 Retention是注解…...

基于信号分解和多种深度学习结合的上证指数预测模型

大家好&#xff0c;我是带我去滑雪&#xff01; 为了给投资者提供更准确的投资建议、帮助政府和监管部门更好地制定相关政策&#xff0c;维护市场稳定&#xff0c;本文对股民情绪和上证指数之间的关系进行更深入的研究&#xff0c;并结合信号分解、优化算法和深度学习对上证指数…...

基于Spring Boot的酒店住宿管理平台

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理酒店客房管理系统的相关信息成为必然。开发…...

游聚对战平台 三国战纪2012CE修改器修改地址

游聚对战平台 三国战纪2012比较全的一次地址。 工具 ce修改器 自行百度下载 1袖箭 2褐色鸡蛋 3毒堂 4飞盘 5火焰弹 6绿色鸡蛋 7金珠 8毒蝎 9毒镖 10铁莲花 11张陵剑 12张角巾 13太清丹经 14黄石公 15九节杖 16隐身衣 17神仙笔 18 玉蜂术&#xff08;效果不明&#xff09;19天师…...

Qt Creator中的项目栏

shadow build: [基础]Qt Creator 的 Shadow build(影子构建)-CSDN博客 影子构建&#xff1a;将源码路径和构建路径分开&#xff08;生成的makefile文件和其他产物都不放到源码路径&#xff09;&#xff0c;以此来保证源码路径的清洁。 实验1&#xff1a; 我创建了两个项目:…...

keepalived+web 实现双机热备

环境&#xff1a;利用keeplived实现web服务器的双机热备(高可用) 注意&#xff1a; (1) 利用keeplivedweb做双击热备&#xff08;高可用&#xff09;&#xff0c;最少需要两台服务器&#xff0c;可以实现多域名对应一个VIP,并且访问不同域名&#xff0c;显示不同主页&#xf…...

关于python的import

在Python中&#xff0c;import语句用于导入其他模块或模块中的特定部分&#xff0c;以便在代码中使用它们。这就可以重用代码&#xff0c;而不是每次都从头开始编写所有的功能。 基本用法 导入整个模块&#xff1a; import module_name 例如&#xff1a; import math print(…...

帕金森后期吞咽困难:破解难题,重拾生活美味!

在这个快节奏的时代&#xff0c;健康成为了我们最宝贵的财富。然而&#xff0c;对于帕金森病患者及其家庭而言&#xff0c;随着病情的进展&#xff0c;尤其是进入后期阶段&#xff0c;吞咽困难成为了他们不得不面对的严峻挑战。今天&#xff0c;就让我们一起走进这个温暖而坚韧…...

android 添加USB网卡并配置DNS

工作需要&#xff0c;需要使用TBox分享的网络&#xff0c;Android将TBox当作一个USB网卡&#xff0c;接下来就简单了&#xff0c;配置这个网卡的信息即可。 加载默认网卡的信息在frameworks/opt/net/ethernet/java/com/android/server/ethernet/EthernetTracker.java中 Ethern…...

【面试经典150】day 8

#1024程序员节 | 征文# 作为一个未来的程序员&#xff0c;现在我要继续刷题了。 力扣时刻。 目录 1.接雨水 2.罗马数字转整数 3.最后一个单词的长度 4.最长公共前缀 5.反转字符串中的单词 1.接雨水 好好好好好好&#xff0c;一开始就接雨水。我记得接了n次了。。。 痛苦战…...

Python -- 网络爬虫

Python – 网络爬虫 流程&#xff1a; 1. 连接链接获取页面内容&#xff08;html文件&#xff09;&#xff1b; 2. 过滤获取需要信息&#xff08;正则&#xff09; [可能重复步骤1&#xff0c;2] &#xff1b; 3. 存储文件到本地。一&#xff09;网络连接获取页面内容 # 网络…...

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-5

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…...

设计模式4 适配器 (adapter)

一句话&#xff0c;适配器按照客户的需求, 适配当前已有的接口。 目标接口&#xff1a;reqeust() public interface Target {void request(); //this is client needed interface }已有接口&#xff1a;specificRequest package com.example.adapter;import android.uti…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...