前端动态旋转地球背景

效果图

贴下源码

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/695562.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开源即时通讯IM框架 MobileIMSDK v6.5 发布

一、更新内容简介 本次更新为次要版本更新&#xff0c;进行了bug修复和优化升级&#xff08;更新历史详见&#xff1a;码云 Release Notes、Github Release Notes&#xff09;。 MobileIMSDK 可能是市面上唯一同时支持 UDPTCPWebSocket 三种协议的同类开源IM框架。轻量级、高…

STM32 PWM 计数器模式和对齐

STM32 PWM 计数器模式和对齐 1. TIM高级定时器简介2. TIM计数模式2.1 向上计数2.2 向下计数2.3 中心对齐模式&#xff08;向上/向下计数&#xff09;2.4 重复计数 3. PWM输出模式3.1 举例看下PWM中心对齐模式&#xff0c;设置参数如下&#xff1a; 4. FOC中PWM相关设置说明4.1 …

【话题】软件开发的航海图:程序员的实用神器探秘

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景一、代码编写二、版本控制三、测试与调试四、部署与运维五、总结文章推荐 背景 在软件开发的广阔海洋中&#xff0c;每一位程序员都是一位勇敢的航海家&#xff0c…

ROS控制器插件及机器人模型

ROS中的控制器插件 ros_control 1、ROS为开发者提供的机器人控制中间件 2、包含一系列控制器接口、传动装置接口、硬件接口、控制器工具箱等 3、可以帮助机器人应用功能包更快速落地&#xff0c;提高开发效率 一、控制器管理 提供一种通用的接口来管理怒同的控制器 二、控…

教育部公示!9所“新大学”,来了

5月13日&#xff0c;教育部公示一批拟同意设置的本科高等学校。 根据《中华人民共和国高等教育法》《普通高等学校设置暂行条例》《普通本科学校设置暂行规定》《本科层次职业学校设置标准&#xff08;试行&#xff09;》等有关规定以及第八届全国高等学校设置评议委员会考察评…

SpringAMQP 发布订阅-TopicExchange

根据这个模型编写代码: RabbitListener(bindings QueueBinding(value Queue(name "topic.queue1"),exchange Exchange(name "itcast.topic",type ExchangeTypes.TOPIC),key {"china.#"}))public void listenTopicQueue1(String msg){Syst…

【一触即发】快来围观C3安全大会酷炫九宫格!

C3安全大会2024 2024年5月18日 南京扬子江国际会议中心 C3安全大会2024 即将揭幕&#xff01; 图解C3 | 九宫格 数智变革&#xff0c;“AI”正以其颠覆性力量&#xff0c;重塑我们对未来的定义。亚信安全邀您共襄盛举&#xff0c;见证这场于5月18日盛大开幕的C3安全大会2024…

【C++】详解STL的适配器容器之一:优先级队列 priority_queue

目录 堆算法 概述 向下调整建堆 向上调整建堆 建堆算法 仿函数 概述 使用介绍 emtpy size top push pop 模拟实现 仿函数 框架 向下调整算法 向上调整算法 pop push empty top 要理解优先级队列&#xff0c;需要有如下知识 STL容器之一的vector&#xf…

《我瞎编功法你们怎么都成仙了》短剧

《我瞎编功法你们怎么都成仙了》 &#xff08;舞台&#xff1a;一座山间小屋&#xff0c;屋内摆满了古朴的书架和烛台&#xff0c;桌上放着几本破旧的书籍。&#xff09; &#xff08;人物&#xff1a;王大锤&#xff0c;一个平凡的年轻人&#xff0c;手拿一本破旧的书&#xf…

Python自动化测试实现的思路

Python自动化测试常用于Web应用、移动应用、桌面应用等的测试 Python自动化实现思路通常分为以下几步&#xff1a;1. 确定自动化测试的范围和目标&#xff1a; 首先需要明确需要进行自动化测试的范围和目标&#xff0c;包括测试场景、测试用例、测试数据等。 2. 选择自动化测…

java学习之zip炸弹攻击

一、概述 Zip炸弹是一种特殊类型的Zip文件&#xff0c;它包含了大量的无用数据。Zip文件格式允许使用压缩算法来减小文件的大小&#xff0c;但是如果Zip文件中的某些内容被重复压缩&#xff0c;就会导致文件大小急剧增加。Zip炸弹利用这个特性&#xff0c;将一些无用的数据多次…

软件2班20240513

第三次作业 package com.yanyu;import java.sql.*; import java.util.ResourceBundle;public class JDBCTest01 {public static void main(String[] args) {ResourceBundle bundle ResourceBundle.getBundle("com/resources/db");// ctrl alt vString driver …