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

前端动态旋转地球背景

效果图

贴下源码

<template><div class="map-bg"><div class="canvas" id="canvs"></div><canvas class="canvasxk" id="canv"></canvas></div>
</template><script setup name="mapBg">import * as echarts from "echarts"import {stars_nest} from '@/xk.js'const initCanvBg = () => {let myEcharts = echarts.init(document.getElementById("canvs"));fetch('/dq.json').then(response => response.json()).then(data => {data = data.filter(function(dataItem) {return dataItem[2] > 0;}).map(function(dataItem) {return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];});myEcharts.setOption({globe: {show: false,globeOuterRadius: 100,shading: 'color',displacementScale: 0.1,displacementQuality: 'high',realisticMaterial: {// 纹理贴图相关roughness: 0.7, // 材质的粗糙度  越粗糙反光度越低metalness: 0.5, // 金属质感 0为金属  1为非金属, 在这之间设置},viewControl: {autoRotate: true,distance: 138,targetCoord: [123.38, 6]},light: {// main: {//     intensity: 5,//     shadow: false// },ambient: {intensity: 2,},// ambientCubemap: {//     texture: 'data-gl/asset/pisa.hdr',//     diffuseIntensity: 5// }},},series: [{type: 'scatter3D',coordinateSystem: 'globe',blendMode: 'lighter',symbolSize: 1,silent: true,itemStyle: {color: '#00aaff',opacity: 1,},data: data,}, ],});})window.onresize = function() {//自适应大小myEcharts.resize();};};onMounted(() => {initCanvBg();stars_nest();})
</script><style lang="scss" scoped>.map-bg {width: 100%;height: 100%;position: relative;.canvas{width: 100%;height: 80%;position: absolute;top: 8%;z-index: 2;}.canvasxk{width: 100%;height: 100%;position: absolute;left: 0;z-index: 1;top: 0;opacity: .2;}}
</style>

相关文章:

前端动态旋转地球背景

效果图 贴下源码 <template><div class"map-bg"><div class"canvas" id"canvs"></div><canvas class"canvasxk" id"canv"></canvas></div> </template><script setup …...

MySQL中的子查询

子查询,在一个查询语句中又出现了查询语句 子查询可以出现在from和where后面 from 表子查询(结果一般为多行多列)把查询结果继续当一张表对待 where 标量子查询(结果集只有一行一列)查询身高最高的学生,查询到一个最高身高 列子查询(结果集只有一行多列) 对上表进行如下操作 …...

Unity打开安卓设备不同的设置面板

1&#xff0c;打开安卓设备不同的设置面板&#xff0c;我还贴心的把Android官网的链接放下面了 2&#xff0c;使用也很方便&#xff1a;unity按钮事件上拖这个脚本&#xff0c;注册MyOpenAndroidSettings方法&#xff0c;参数 填 和枚举值相应的数字 // 功能&#xff1a;打开…...

低空经济+无人机:低空物资运输技术详解

随着科技的飞速发展和航空产业的日益壮大&#xff0c;低空经济已成为全球经济的重要组成部分。无人机作为低空经济的重要载体&#xff0c;其在低空物资运输领域的应用逐渐凸显&#xff0c;为物流、救援等多个领域带来了革命性的变革。 一、低空经济概述 低空经济是指在垂直高度…...

全场景智能终端RK3288主板在智能垃圾回收项目的应用,支持鸿蒙,支持全国产化

全场景智能终端主板AIoT-3588A推出的智能化垃圾回收项目&#xff0c;旨在解决城市化进程中日益突出的垃圾处理问题。智能垃圾分类箱具备触屏操作、自动称重、分类投放以及电子语音播报提示等多项功能&#xff0c;居民能够经过分类积分卡、手机扫码、人脸识别等多种途径进行投放…...

QT设计模式:建造者模式

基本概念 建造者模式是一种创建型设计模式&#xff0c;它允许你创建复杂对象的过程独立于该对象的组成部分以及它们的组装方式。这样可以构造出不同的对象表示。 在建造者模式中&#xff0c;将创建对象的过程和对象的表示分离&#xff0c;通过一步步的构建&#xff0c;可以得…...

个人微信api

简要描述&#xff1a; 退出群聊 请求URL&#xff1a; http://域名地址/quitChatRoom 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/json Authorization&#xff1a;login接口返回 参数&#xff1a; 参数名 必选 类型 …...

使用Ownips工具获取海外电商网站wish商品价格

一、引言 在数字化浪潮汹涌的今天&#xff0c;互联网已经成为我们生活、工作中不可或缺的一部分。而在这个虚拟的世界里&#xff0c;每一个设备都需要一个独特的标识来确保信息的准确传递&#xff0c;这个标识就是IP地址。而在众多IP地址中&#xff0c;静态IP因其独特的稳定性…...

【FFmpeg】调用ffmpeg进行H264软解

调用FFmpeg库实现264软件解码 1. FFmpeg的编译2. 调用FFmpeg实现H264软解2.1 基本框架2.2 代码实现2.3 测试结果 3. 分析工具3.1 码流分析3.2 YUV分析 示例工程 【FFmpeg】调用FFmpeg库实现264软编 1. FFmpeg的编译 FFmpeg在Windows下的编译参考&#xff1a;http://t.csdni…...

网络安全防护:抵御DDoS和CC攻击

在当今数字化时代&#xff0c;网络安全已成为任何组织或个人不可忽视的重要议题。DDoS&#xff08;分布式拒绝服务&#xff09;攻击和CC&#xff08;命令与控制&#xff09;攻击作为两种最为常见的网络攻击方式&#xff0c;给网络运营者和用户带来了巨大的威胁和影响。本文将介…...

初次查询大数据信用报告,需要注意哪些问题?

随着大数据的普及&#xff0c;基于大数据技术的大数据信用也变得越来越重要&#xff0c;比如在申贷之前&#xff0c;不少地方都会查询申贷人的大数据信用&#xff0c;作为风险控制的必要手段&#xff0c;那对于初次查询大数据信用报告的人来说&#xff0c;需要注意哪些问题呢?…...

最短路径[floyd算法]-----视频讲解+代码实现

求最短路径&#xff0c;一般有三种方法&#xff1a; 单源最短路径--Dijkstra算法 此算法只能求不带负权值的有向无环图 单源最短路径--Bellman-Ford算法&#xff08;少考&#xff09; 此算法优点在于&#xff1a;可以求带权值的右向无环图 但只是缺点明显&#xff0c;时间复杂度…...

图像/视频恢复和增强CodeFormer

github&#xff1a;https://github.com/sczhou/CodeFormer 尝试增强旧照片/修复人工智能艺术 面部修复 面部色彩增强和恢复 脸部修复...

WPF中ObservableCollection

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;ObservableCollection<T> 是一个非常重要的类&#xff0c;它用于实现动态数据绑定功能。这个类位于 System.Collections.ObjectModel 命名空间中&#xff0c;是 ICollection<T>, IList…...

如何用鼠标点击在picturebox的图像上做标记

鼠标点击图像&#xff0c;在点击处画一个圆。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Drawing.Drawing2D; using System.Linq; using System.Text; using System.Threading.T…...

k8s介绍

一、前言 Kubernetes&#xff08;通常简称为 K8s&#xff09;是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序&#xff0c;它提供了丰富的功能使得用户能够轻松地管理大规模的容器集群&#xff0c;包括自动化部署和扩展、服务发现和负载均衡、存…...

K-means聚类模型:深入解析与应用指南

K-means聚类是一种广泛使用的无监督学习算法&#xff0c;它通过迭代过程将数据集划分为K个聚类。以下是一篇关于K-means聚类模型的技术文章&#xff0c;将从不同的角度进行详尽的描述。 1. 引言 K-means聚类算法是一种简单且高效的聚类方法&#xff0c;广泛应用于数据挖掘、市…...

CTF-密码学基础

概述 密码学(Cryptolopy)&#xff1a;是研究信息系统安全保密的科学 密码学研究的两个方向&#xff1a; 密码编码学(Cryptography)&#xff1a;主要研究对信息进行编码&#xff0c;实现对信息的隐蔽密码分析学(Cryptanalytics)&#xff1a;主要研究加密信息的破译或消息的伪造…...

代码随想录算法训练营day22 | 654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

654.最大二叉树 和构造二叉树差不多&#xff0c;本题使用索引的方式 class Solution:def constructMaximumBinaryTree(self, nums: List[int]) -> Optional[TreeNode]:return self.traversal(nums, 0, len(nums)-1)def traversal(self, nums, left, right):if left > r…...

企业信息防泄漏软件分析:盘点常用企业信息防泄漏软件

在当今数字化时代&#xff0c;企业信息防泄漏软件已成为保障企业数据安全不可或缺的一环。市面上众多的防泄漏软件各具特色&#xff0c;如何从中挑选出最适合自己企业的产品&#xff0c;成为了一个值得深入探讨的话题。 一、企业信息防泄漏软件分析 首先&#xff0c;我们需要…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...