echarts geo地图加投影两种方法

方法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.mfbz.cn/a/469654.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机VMware上 centos7 的网络配置

第一步:权限的切换 由普通用户切换到管理者/超级用户 用户名为:root 密码为:自己安装 linux 时第一次设置的密码 su -root管理者/超级用户的命令提示符是“#”,普通用户的命令提示符是“$”。当看到你的命令提示符为“$”时&…

VScode 设置个性化背景(保姆级教程)

VS Code设置个性化背景的作用主要体现在以下几个方面: 提升编程体验:个性化背景能够让编程环境更符合个人的审美和习惯,使得长时间在VS Code中进行代码编辑时,能够保持愉悦的心情,从而提高编程效率。减少视觉疲劳&…

微隔离是什么,有什么作用

传统的网络安全架构通常是基于较大的安全区域(如子网或虚拟局域网),在这些区域内的设备可以相互通信。然而,这也意味着一旦内部的设备被威胁或遭到入侵,攻击者可能会在整个安全区域内进行横向移动和渗透。 微隔离通过…

GNSS载波相位平滑伪距基本原理

相位平滑技术:削弱伪距欢测值的随机误差影响 差分技术:削弱欢测方程中的系统误差影响 相位平滑伪距原理: GPS接收机除了提供伪距测量外,可同时提供载波相位测量,由于载波相位测量的精度比码相位的测量精度高2个数量…

蓝桥杯嵌入式第十届省赛 真题+代码

led.c文件 #include "led.h"void Led(uint16_t addr,uint16_t enable) {static uint16_t temp 0x0000;static uint16_t temp_old 0xffff;HAL_GPIO_WritePin(GPIOC, GPIO_PIN_All, GPIO_PIN_SET);if(enable)temp | 0x0100 << addr;elsetemp & ~(0x0100 &…

在sql server 2016 always on集群里新增一个数据库节点

本篇博客有对应的word版本&#xff0c;有需要的可以点击这里下载。 一 环境介绍 二 操作步骤 2.1 在新节点上安装sql server软件 略 2.2 在新节点上开启‘故障转移群集功能’ 打开‘服务管理器’&#xff1a; 点击‘添加角色和功能’&#xff1a; 勾选’DNS服务器’&#…

【Godot4.2】2D导航01 - AStar2D及其使用方法

概述 对于2D平台跳跃或飞机大战&#xff0c;以及一些直接用键盘方向键操控玩家的游戏&#xff0c;是根本用不到寻路的&#xff0c;因为只需要检测碰撞就可以了。 但是对于像RTS或战棋这样需要操控玩家到地图指定位置的移动方式&#xff0c;就绝对绕不开寻路了。 导航、碰撞与…

企业培训考试系统数字化解决方案优势有哪些?

企业员工内部培训考试系统&#xff0c;用数字技术和互联网平台&#xff0c;为企业提供高效、便捷、个性化的员工培训服务的解决方案。 企业员工培训考试数字化解决方案不仅能够提供更加高效、灵活和互动的学习体验&#xff0c;还能够帮助企业实现长期的人才发展战略&#xff0…

好委屈,东方甄选为何总是被供应商骗?

东方甄选最近很委屈。 315晚会过后&#xff0c;知名打假人王海爆料&#xff0c;称315晚会曝光的槽头肉扣肉在东方甄选和小杨哥的直播间里销售过。 东方甄选赶忙去问了问供应商情况。 供应商的回答让他感到暖心&#xff0c;表示虽然315晚会曝光了我们公司违规使用糟头肉&…

如何在三个简单步骤中为对象检测标注图像

初始通过彻底清洗和处理原始图像数据来奠定有效对象检测注释的基础。选择适合的工具、方法和清晰的注释过程指南来建立注释工作空间。通过在图像中划定对象并附上类别标签来执行注释&#xff0c;随后进行细致的核验&#xff0c;以确保数据集的精确性和完整性。 图像注释是计算…

极大似然估计和最大参数后验估计

概率是已知模型和参数&#xff0c;推数据&#xff1b;统计&#xff08;似然&#xff09;是已知数据&#xff0c;推模型和参数。对于函数 x表示某一个具体的数据&#xff1b;θ表示模型的参数。 如果θ是已知确定的&#xff0c;x 是变量&#xff0c;这个函数叫做概率函数(prob…

MYSQL概念和编译安装

目录 一、数据库概述 1.1数据 1.2表 1.3数据库 总结&#xff1a; 2.数据库管理系统&#xff08;DBMS&#xff09; 3.DBMS工作模式 4.数据库系统原理 二、数据库发展史 三、主流数据库 四、关系型数据库和非关系型数据库 1.关系型数据库 2.非关系数据库 MYSQL数据…

蓝桥杯--全球气温变暖

import java.util.Scanner;public class top7 {//全球边暖//思路&#xff0c;就是找出上下左右都是#的地方&#xff0c;如果这个地方是的&#xff0c;那么此时countstatic int count0;public static void main(String[] args) {Scanner scanner new Scanner(System.in);int ns…

Day14 代码随想录(1刷) 42接雨水+二叉树遍历

42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…

【C++】用红黑树模拟实现set、map

目录 前言及准备&#xff1a;一、红黑树接口1.1 begin1.2 end1.3 查找1.4 插入1.5 左单旋和右单旋 二、树形迭代器&#xff08;正向&#xff09;2.1 前置 三、模拟实现set四、模拟实现map 前言及准备&#xff1a; set、map的底层结构是红黑树&#xff0c;它们的函数通过调用红…

【CSS练习】万年历 html+css+js

效果图 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title><style>bod…

车辆运动学和动力学模型

参考&#xff1a;路径规划与轨迹跟踪系列算法学习_第9讲_车辆运动学和动力学模型 1 车辆运动学模型和动力学模型概述 要控制车辆的运动&#xff0c;首先要对车辆的运动建立数字化模型&#xff0c;模型建立的越准确&#xff0c;对车辆运动的描述越准确&#xff0c;对车辆的跟踪…

Django分页器

Django分页器 分页器前瞻之url urls.py不需要做修改 urlpatterns [path(test/, views.test,nametest), ]假设此时在原有的路径http://127.0.0.1:8000/app01/test后面添加/?page2 然后再后端获取到page def test(request):page request.GET.get(page)print(page) # 2retu…

Linux--如何在Linux上运行一个helloworld

一.安装vim和gcc sudo --是进入管理员模式 apt --是 Advanced Package Tool&#xff08;高级软件包工具&#xff09;的缩写&#xff0c;这是用于管理软件包的一种工具。 install --是安装的意思 后面跟软件的名称 完整的意思&#xff1a;在管理员的模式下安装 某个软件 …

使用jQuery的autocomplete实现数据查询一次,联想自动补全

书接上回&#xff0c;上次说到在jsp页面中&#xff0c;通过监听输入框的数值变化&#xff0c;实时查询数据库&#xff0c;得到返回值使用autocomplete属性自动补全&#xff0c;实现一个联想补全辅助操作&#xff0c;链接&#xff1a;使用jquery的autocomplete属性实现联想补全操…
最新文章