echarts geo地图加投影两种方法

news2025/1/22 17:58:31

方法1,geo中加多个地图图形,叠加。缩放时 可能会不一致,需要捕捉georoam事件,使下层的geo随着上层的geo一起缩放拖曳

 geo: [
          {
            zlevel: 3,//geo显示级别,默认是0 【最顶层图形】
            map: 'BJ',//地图名
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,

            label: {
              show: true,
              fontSize: 12,
              color: "#000000"
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1.5,
              // emphasis:
            },
            emphasis: {
              label: {
                fontSize: 12,
                color: '#fff',
                fontWeight: 'bold'
              },
              itemStyle: {
                areaColor: "#008A8A",
                shadowColor: "rgba(0,10,10,0.53)",
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: "none",
                label: {
                  show: true,
                },
                borderWidth: 3,
                borderColor: '#fff'
              }
            },
            select: {
              label: {
                fontSize: 12,
                color: '#fff',
                fontWeight: 'bold'
              },
              itemStyle: {
                areaColor: "#008A8A",
                shadowColor: "rgba(0,10,10,0.53)",
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: "none",
                label: {
                  show: true,
                },
                borderWidth: 3,
                borderColor: '#fff'
              }
            },

            selectedMode: 'single',
          },
          {
            zlevel: 2,//geo显示级别,默认是0 【第二层图形】
            map: "BJ",
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,
            label:{
              show:false
            },
            itemStyle: {
              //此处border设置你想要显示的地图外边框样式,可设置border颜色,阴影等
              borderColor: '#fff',
              borderWidth: 4,
              shadowColor: '#008A8A',
              shadowOffsetY: 6,
              shadowOffsetX: 3,
            },
            emphasis: {
              disabled: true
            }
          },
          {
            zlevel: 1,//geo显示级别,默认是0 【最底层层图形】
            map: "BJ",
            roam: true,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.2,
            label:{
              show:false
            },
            itemStyle: {//底层地图样式
              //此处border设置你想要显示的地图外边框样式,可设置border颜色,阴影等
              borderColor: '#fff',
              borderWidth: 4,
              shadowColor: '#AAD8D9',
              shadowOffsetY: 10,
              shadowOffsetX: 6,
            },
            emphasis: {
              disabled: true
            }
          }
        ],
        series: [
          {
            name: "xxx量",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]
 //捕捉georoam事件,使下层的geo随着上层的geo一起缩放拖曳
      this.myChart.on('georoam', function (params) {
        var option = _this.myChart.getOption();//获得option对象
        if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变


          option.geo[2].zoom = option.geo[0].zoom;
          option.geo[2].center = option.geo[0].center;

        } else {//捕捉到拖曳时
          option.geo[1].center = option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变
          option.geo[2].center = option.geo[0].center;
        }
        _this.myChart.setOption(option);//设置option
      });

方法2,直接加阴影。这样会在最上层显示出阴影的分界线,效果不好

geo: {
          map: "BJ",
          roam: true,
          scaleLimit: {
            min: 1,
            max: 4
          },
          zoom: 1.2,
          label: {
            show: true,
            fontSize: "11",
            color: "#000000"
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 2,
            shadowColor: '#008A8A',
            shadowOffsetY: 8,
            shadowOffsetX: 6,
            emphasis: {
              areaColor: "#008A8A",
              shadowColor: "rgba(0,10,10,0.53)",
              shadowBlur: 10,
              shadowOffsetY: 8,
              shadowOffsetX: 6,
              focus: "none",
              label: {
                show: true,
              },
              borderWidth: 3,
              borderColor: '#fff'
            }
          },
          emphasis: {
            label: {
              fontSize: 12,
              color: '#fff',
              fontWeight: 'bold'
            },
          },
          selectedMode: 'single',
        },



series: [
          {
            name: "xxx量",
            type: "map",
            geoIndex: 0,
            data: this.dataList
          }
        ]

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

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

相关文章

[AIGC] MySQL与PostgreSQL:两种流行的数据库系统的对比

数据库是存储和查询数据的重要工具。在选择数据库时,两个经常被考虑的选项都是开源的:MySQL和PostgreSQL。这两个数据库都与许多应用程序一起使用,但它们在某些方面存在显著的不同。在本文中,我们将比较MySQL和PostgreSQL的一些关…

基金分析之与行业间的相关系数计算

这几年买了非常多的基金,一直很好奇基金在非业绩披露期都持有了什么东西?所以写了一个基金净值和各申万一级行业相关系数(以及和市场主流指数)的代码看看能否分析出点东西。 这里依然用了wind API,复现前记得安装。 …

超快速排序(蓝桥杯,归并排序,acwing)

题目描述: 在这个问题中,您必须分析特定的排序算法----超快速排序。 该算法通过交换两个相邻的序列元素来处理 n 个不同整数的序列,直到序列按升序排序。 对于输入序列 9 1 0 5 4,超快速排序生成输出 0 1 4 5 9。 您的任务是确…

JavaScript基础知识2

求数组的最大值案例 let arr[2,6,1,7,400,55,88,100]let maxarr[0]let minarr[0]for(let i1;i<arr.length;i){max<arr[i]?maxarr[i]:maxmin>arr[i]?minarr[i]:min}console.log(最大值是&#xff1a;${max})console.log(最小值是&#xff1a;${min}) 操作数组 修改…

企业专业化管理金字塔:技能进阶与案例分析

在纷繁复杂的企业管理领域中&#xff0c;一套行之有效的管理技能体系对于企业的稳健发展至关重要。本文将深入探讨企业专业化管理金字塔的五个层次&#xff1a;基本的管理技能、业务操作管理技能、组织管理技能、组织开发技能以及管理转变技能&#xff0c;并结合实际案例&#…

Java后端八股------设计模式

Coffee可以设计成接口。 b

代码随想录算法训练营第27天|93.复原IP地址、78.子集、90.子集二

目录 一、力扣93.复原IP地址1.1 题目1.2 思路1.3 代码1.4 总结 二、力扣78.子集2.1 题目2.2 思路2.3 代码2.4 总结 三、力扣90.子集二3.1 题目3.2 思路3.3 代码3.4 总结 一、力扣93.复原IP地址 &#xff08;比较困难&#xff0c;做起来很吃力&#xff09; 1.1 题目 1.2 思路 …

30.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据搜索功能

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;29.数据推测功能…

解决MySQL “Lock wait timeout exceeded; try restarting transaction“ 错误

在处理MySQL数据库时&#xff0c;我们偶尔会遇到一个棘手的错误消息&#xff1a;“Lock wait timeout exceeded; try restarting transaction”。这通常表明我们的一个事务在尝试获取资源时被阻塞了太长时间。在并发环境中&#xff0c;多个事务同时竞争相同的资源可能会导致这种…

前端 - 基础 表单标签 -- 表单元素( input - type属性) 文本框和密码框

表单元素 &#xff1a; 在表单域中可以定义各种表单元素&#xff0c;这些表单元素就是允许用户在表单中输入或选择 的内容控件。 表单元素的外观也各不一样&#xff0c;有小圆圈&#xff0c;有正方形&#xff0c;也有方框&#xff0c;乱七八糟的&#xff0c;各种各样&#xf…

关系数据库:关系数据结构基础与概念解析

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

2024/03/19总结

算法&#xff1a; 简单的一个dfs就能过 ac: #include "iostream" #include "algorithm" #include "cstring" #include "queue" using std::cin; using std::cout; using std::endl; #define N 110 char a[N][N]; int abook[N][N]; i…

算法|基础算法|二分和双指针

数学与数论|二分 1.基础二分 2.双指针 心有猛虎&#xff0c;细嗅蔷薇。你好朋友&#xff0c;这里是锅巴的C\C学习笔记&#xff0c;常言道&#xff0c;不积跬步无以至千里&#xff0c;希望有朝一日我们积累的滴水可以击穿顽石。 基础二分 模板 bool check(int x){/*...*/} …

spring suite搭建springboot操作

一、前言 有时候久了没开新项目了&#xff0c;重新开发一个新项目&#xff0c;搭建springboot的过程都有点淡忘了&#xff0c;所有温故知新。 二、搭建步骤 从0开始搭建springboot 1&#xff0e;创建work空间。步骤FileNewJava Working Set。 2.选择Java Working Set。 3.自…

Java八股文(RabbitMQ)

Java八股文のRabbitMQ RabbitMQ RabbitMQ RabbitMQ 是什么&#xff1f;它解决了哪些问题&#xff1f; RabbitMQ 是一个开源的消息代理中间件&#xff0c;用于在应用程序之间进行可靠的异步消息传递。 它解决了应用程序间解耦、消息传递、负载均衡、故障恢复等问题。 RabbitMQ …

SpringCloud Bus 消息总线

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第八篇&#xff0c;即介绍 Bus 消息总线。 二、概述 2.1 遗留的问题 在上一篇文章的最后&#xff0c;我…

Gradle v8.5 笔记 - 从入门到进阶(基于 Kotlin DSL)

目录 一、前置说明 二、Gradle 启动&#xff01; 2.1、安装 2.2、初始化项目 2.3、gradle 项目目录介绍 2.4、Gradle 项目下载慢&#xff1f;&#xff08;万能解决办法&#xff09; 2.5、Gradle 常用命令 2.6、项目构建流程 2.7、设置文件&#xff08;settings.gradle.…

15|BabyAGI:根据气候变化自动制定鲜花存储策略

一种新型的代理——Autonomous Agents&#xff08;自治代 理或自主代理&#xff09;&#xff0c; 在 LangChain 的代理、工具和记忆这些组件的支持下&#xff0c;它们能够在无需外部干预的情况下自主 运行&#xff0c;这在真实世界的应用中具有巨大的价值。 AutoGPT 它的主要…

晶圆制造过程中常用载具的类型

晶圆载具用于硅片生产、晶圆制造以及工厂之间晶圆的储存、传送、运输以及防护。晶圆载具种类很多,如FOUP用于晶圆制造工厂中晶圆的传送;FOSB用于硅片生产与晶圆制造工厂之间的运输;CASSETTE载具可用于工序间运送以及配合工艺使用。 OPEN CASSETTE OPEN CASSETTE主要在晶圆…

机器视觉系统选型-镜头基础知识

广角镜头&#xff1a;焦距小于标准焦距50mm的。例如&#xff1a;16mm 景深大&#xff0c;聚焦距离更近 远距照像镜头&#xff1a;焦距大于标准焦距50mm的。例如&#xff1a;75mm 景深浅&#xff0c;放大远距离物体 变焦镜头&#xff1a;镜头焦距可调节&#xff0c;焦距有范围&a…