vue 3d echarts scatter3D元素塌陷,图标塌陷进地图完美解决方案

news2024/11/21 19:49:12

当我们手机用 scatter3D 类型时,最小值因为渲染问题会塌陷进模型里面,所以只要让value固定,再将label formatter 配合 boxHeight属性即可解决,(代码附带自定义label图标解决办法)
在这里插入图片描述
解决:
在这里插入图片描述

<template>
  <div ref="chartRef" class="map-3d-container" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import * as echarts from 'echarts'
  import 'echarts-gl'
  import { user } from '@/store/modules/user'
  import shadowImg from '@/assets/shadow.png'
  import marker from '@/assets/3DMap-marker.png'
  const userStore = user()

  const emits = defineEmits(['click'])

  const chartRef = ref<HTMLDivElement | null>(null)


  onMounted(async () => {
     const testData = [
       { lat: '30.257572', lng: '120.189438', guns: '1', deptId: 1 },
       { lat: '30.300447', lng: '119.922606', guns: '351', deptId: 2 },
       { lat: '30.337124', lng: '120.434121', guns: '51', deptId: 3 },
       { lat: '30.284913', lng: '119.715042', guns: '52', deptId: 4 },
     ]

    let chartData: { value: any[] }[] = []

    testData .forEach((e) => {
      if (e.lng && e.lat && e.guns) {
        chartData.push({
          value: [e.lng, e.lat, { ...e }],
        })
      }
    })


    const myChart = echarts.init(chartRef.value as HTMLDivElement)

    echarts.registerMap('map', userStore.mapData)

    const option = {
      backgroundColor: 'rgba(0,0,0,0)',
      animation: true,
      tooltip: {
        trigger: 'axis',
      },
      geo3D: {
        map: 'map',
        show: true,
        shading: 'realistic',
        regionHeight: 4,
        width: '100%',
        height: '100%',
        boxHeight: 8,
        realisticMaterial: {
          oughness: 1,
          textureTiling: 1,
          roughness: 1,
          detailTexture: shadowImg, // 地图表面贴图
        },
        viewControl: {
          rotateSensitivity: 2,
          alpha: 40,
          beta: 60,
          autoRotate: true,
          autoRotateAfterStill: 30,
          autoRotateSpeed: 6, // 旋转速度
          distance: 60,
          minDistance: 80,
          maxDistance: 200,
          minBeta: null, // 确保可以完全旋转
          maxBeta: null,
          center: [20, 0, 0],
          panMouseButton: 'left',
          animation: true, // 确保动画开启
        },
        itemStyle: {
          color: 'rgb(55,155,255)',
          opacity: 1,
          borderWidth: 3,
          borderColor: 'rgb(58,255,255)',
        },
        emphasis: {
          show: false,
          itemStyle: {
            color: 'rgb(55,155,255)',
          },
        },
        label: {
          show: true,
          color: 'rgb(250,250,250)',
          fontWeight: '600',
          fontSize: 14,
        },
        light: {
          // 光照阴影
          main: {
            color: 'rgb(26,92,211)', // 光照颜色
            intensity: 2, // 光照强度
            shadowQuality: 'high', //阴影亮度
            shadow: true, // 是否显示阴影
            alpha: 10,
            beta: 90,
          },
          ambient: {
            intensity: 0.8,
          },
        },
      },
      series: [
        {
          type: 'scatter3D',
          coordinateSystem: 'geo3D',
          opacity: 1,
          symbol: 'circle',
          symbolSize: 40,
          itemStyle: {
            color: 'rgb(20,20,20)',
          },
          emphasis: {
            itemStyle: {
              color: '#fff',
            },
          },
          data: chartData.map((it) => {
            return {
              value: [it.value[0], it.value[1], 100, it.value[2]],
            }
          }),
          label: {
            distance: -88,
            show: true,
            position: 'top',
            color: '#fff',
            height: 28,
            fontSize: 14,
            fontWeight: 600,
            padding: [28, 20],
            backgroundColor: {
              image: marker,
            },
            formatter: (res: any) => {
              const value = Number(res.value[3].guns) > 999 ? 999 : Number(res.value[3].guns)
              const leftNbsp = value >= 100 ? '' : 0
              const rightNbsp = value >= 10 ? '' : 0

              return `${leftNbsp}${rightNbsp}${value}`
            },
          },
        },
      ],
    }
    myChart.setOption(option)

    myChart.on('click', (params) => {
      if (params.seriesType === 'scatter3D') {
        emits('click', params?.value[3])
      }
      console.log(params, 'paramsparams')
    })
  })
</script>
<style>
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
  }

  .container {
    background: url('./assets/background.png') no-repeat 100%;
  }
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

np.pad各种方式的图文解释

‘constant’——表示连续填充相同的值&#xff0c;每个轴可以分别指定填充值&#xff0c;constant_values&#xff08;x,y&#xff09;时前面用x填充&#xff0c;后面用y填充&#xff0c;缺省值填充0 ‘edge’——表示用边缘值填充 ‘linear_ramp’——表示用边缘递减的方式填…

Windows编程:图标资源、光标资源、字符串资源、加速键资源、WM_PAINT消息、绘图

承接前文&#xff1a; win32窗口编程windows 开发基础win32-注册窗口类、创建窗口win32-显示窗口、消息循环、消息队列win32-鼠标消息、键盘消息、计时器消息、菜单资源 本文目录 图标资源光标资源WM_SETCURSOR 消息 字符串资源加速键资源WM_PAINT 消息绘图绘图编程绘图基础基…

后端Web之分层解耦(控制反转IOC-依赖注入DI)

目录 1.三层架构 2.IOC-DI引入 3.IOC-DI使用 4.IOC细节 5.DI细节 内聚&#xff08;Cohesion&#xff09;和耦合&#xff08;Coupling&#xff09;是软件工程中两个重要的概念&#xff0c;它们衡量了软件组件的组织方式和组件之间的相互依赖程度。高内聚性意味着模块内的元…

2024真无线蓝牙耳机怎么选?24年四款性价比畅销爆款机型盘点

2024年&#xff0c;真无线蓝牙耳机的市场依旧竞争激烈&#xff0c;各种品牌和型号如雨后春笋般涌现&#xff0c;面对琳琅满目的选择&#xff0c;2024真无线蓝牙耳机怎么选&#xff1f;消费者在寻找具备高性价比和优秀性能的耳机时往往会感到困惑&#xff0c;那么我将针对大家的…

Nature Medicine | 常规机器学习构建蛋白质组衰老时钟!对于数学基础不好的同学,好好思考一下这种研究模式如何借鉴?

今天给各位老铁们分享一篇于2024年08月08号发表在 Nature Medicine [58.7] 的文章&#xff1a;"Proteomic aging clock predicts mortality and risk of common age-related diseases in diverse populations"&#xff0c;蛋白质组衰老时钟可预测不同人群的死亡率和常…

机器学习-卷积神经网络(CNN)

机器学习-卷积神经网络&#xff08;CNN&#xff09; 1. 卷积神经网络的基本概念1.1 卷积层&#xff08;Convolutional Layer&#xff09;1.1.1 卷积操作1.1.2 特征图&#xff08;Feature Map&#xff09; 1.2 激活函数&#xff08;Activation Function&#xff09;1.2.1 ReLU&a…

JavaEE从入门到起飞(八) ~ Git

git 概括 Git是一个分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件(Java类、xml文件、html页面等)。 学了git能干什么&#xff1f; 代码回溯 查看历史提交记录并恢复到之前的某个状态。这在发现错误或需要查看特定版本时非常有用。和CtrlZ的区别在于g…

【图机器学习系列】(一)图机器学习简介

微信公众号&#xff1a;leetcode_algos_life&#xff0c;代码随想随记 小红书&#xff1a;412408155 CSDN&#xff1a;https://blog.csdn.net/woai8339?typeblog &#xff0c;代码随想随记 GitHub: https://github.com/riverind 抖音【暂未开始&#xff0c;计划开始】&#xf…

Qt找不到QSound头文件,头文件QSoundEffect

目录 Qt找不到QSound头文件 CMake qmke 可能版本不同更新&#xff0c; 找不到QSound头文件 Qt找不到QSound头文件 #include <QSound> CMake 可以看一下这篇来自网上的文章 CMake中添加Qt模块的合理方法 - wjbooks - 博客园 (cnblogs.com) qmke 打开.pro文件&am…

Flowise在ubuntu22.04上的安装

之前我写过一篇FastGPT的文章&#xff0c;这里我再介绍另外一个开源的低代码工具&#xff0c;他提供开发人员可定制的LLM编排流程和AI代理。开发 LLM 应用程序通常涉及无数次迭代。Flowise的低代码和拖放式 UI 方法支持快速迭代&#xff0c;帮助您更快地从测试到生产。 推荐它的…

鸿蒙(API 12 Beta3版)【AVSession Kit简介】 音视频播控服务

AVSession Kit&#xff08;Audio & Video Session Kit&#xff0c;音视频播控服务&#xff09;是系统提供的音视频管控服务&#xff0c;用于统一管理系统中所有音视频行为&#xff0c;帮助开发者快速构建音视频统一展示和控制能力。 能力范围 提供音视频统一管控能力&…

Windows Server 域控制服务器安装及相关使用

目录 1.将客户机加入域 2.安装域控制器 3.新建域用户 4.设置用户登录时间&#xff0c;账户过期时间 5.软件分发 ​编辑 6.换壁纸 7.OU与GPO的概念 域为集中控制&#xff0c;拿下域控是拿下目标的关键 以Windows Server 2022为例 1.将客户机加入域 前提&#xff1a;客…

通过调整JVM的默认内存配置来解决内存溢出(‌OutOfMemoryError)‌或栈溢出(‌StackOverflowError)‌等错误

文章目录 引言I 调整JVM的默认堆内存配置java命令启动jar包Tomcat服务器部署java应用引言 问题: org.springframework.web.util.estedServletException: Handlerdispatch failed: nested exception isjava.lang.0utOfMemoryError: Java heap space原因分析: 查询查询平台所…

python 之可视化数据(地形图练习)

一、按要求构建疫情情况数据的地形图 二、代码展示 from pyecharts.charts import Map from pyecharts.options import VisualMapOptsmap Map() data [("北京市" , 994),("上海市" , 199),("湖南省" , 299),("台湾省" , 12),(&qu…

[游戏开发] LuaTable转string存读二进制文件

UE5和Unity通用此方案&#xff0c;只不过读写文件的接口略有不同&#xff0c;lua代码的处理是相同的。 下面两个方法是 LuaTable和字符串互相转换的代码 function XUtils.luaTableToString(tab, sp)sp sp or ""local s ""for k,v in pairs(tab) doif t…

高斯泼溅综合指南

高斯泼溅&#xff08;Gaussian Splatting&#xff09;是一种表示 3D 场景和渲染新视图的方法&#xff0c;在“实时辐射场渲染的 3D 高斯泼溅” 中引入。它可以被认为是 NeRF 类模型的替代品&#xff0c;就像当年的 NeRF 一样&#xff0c;高斯泼溅引发了大量新的研究工作&#x…

Android Kotlin - 通过 URL Scheme 打开应用

在 Android 应用中&#xff0c;可以通过自定义 URL Scheme 或 Deep Links 打开应用。这允许你定义一个自定义的 URL 格式&#xff0c;使得当用户点击包含这个 URL 的链接时&#xff0c;系统可以识别并打开你的 APP。以下是详细的实现步骤和一些注意事项。 1. 配置 AndroidMani…

RISC-V特权架构 - 时钟中断处理

RISC-V特权架构 - 时钟中断处理 1 MTI中断处理1.1 触发中断1.2 查询mie.MTIE与mip.MTIE1.3 若运行在M模式下1.4 若运行在S模式下1.5 若运行在U模式下 2 STI中断处理2.1 触发中断2.2 查询mie.STIE与mip.STIE2.3 若运行在M模式下2.4 若运行在S模式下2.5 若运行在U模式下 3 知识总…

Transformer架构的演进之路探究

1 引言 在2017年的开创性论文《Attention is All You Need&#xff08;注意力就是你所需要的一切&#xff09;》中&#xff0c;Vaswani等人提出了Transformer架构&#xff0c;这不仅在语音识别领域引起了一场革命&#xff0c;也对其他多个领域产生了深远的影响。本文将探讨Tra…

【早鸟优惠券】PostgreSQL 16 专栏优惠券

PostgreSQL 从入门到熟悉&#xff0c;本专栏只能做到从入门到熟悉。本专栏以 Markdown 格式书写&#xff0c;格式精美。有需要的朋友可以看下&#xff0c;使用的版本是 16。本专栏大约 20 万字左右&#xff0c;目前已完成了 18 万多字了。还有两篇&#xff08;事务、性能调优&a…