echarts地图绘制并实现下钻功能

news2024/9/22 11:25:31

本文参考网址

使用echarts地图需要先准备好echarts地图渲染需要的json数据,数据可以从阿里云地址中下载自己需要的,下载之后直接引入即可使用,本文针对全国地图做一个简单的demo

阿里云界面如图
在这里插入图片描述

// 1、准备echarts地图容器
  <div class="map" ref="myChart" style="width:500px;height:500px;">
  </div>
// js部分
  import * as echarts from 'echarts'
  // 阿里云地址里下载下来全国的json数据,存储为china.json
  import china from './china.json'
let map_level = 'china'
data() {
      return {
       		myChart: null,
       		option: {}
      }
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        this.myChart = echarts.init(document.querySelector('.map'));
        echarts.registerMap('china', china);
        this.myChart.hideLoading();
        this.option = {
          animation : false,
          backgroundColor: 'transparent',
          geo: {
            map: 'china',
            layoutCenter: ["50%", "50%"], //地图位置
            // aspectScale: 1.55, //长宽比
            // layoutSize: '140%',
            zoom: 1,
            // center: [109.975625,39.654296],
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            roam: false,// 是否开启鼠标缩放和平移漫游
            label:{
              show: true,// 设为false时不显示区域名称
              color:'#1EBAA4',
              fontSize: 10
            },
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'transparent' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'transparent' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              borderColor: 'red',
              shadowColor: 'transparent',
              shadowOffsetX: 10,
              shadowOffsetY: 11

            },
            emphasis: {
              itemStyle: {
                areaColor: 'transparent'
              },
              label:{
                show: false,
                color:'#1EBAA4'
              },
            },
           
          },

          series: [
    
          ]
        };
        this.myChart.setOption(this.option, true);
        let that = this;
        // 添加下钻功能
        this.myChart.on('click', function (params) {
          // console.log(params);
          // 判断地图类型,中国地图则变为省地图,省地图变为市区地图
          map_level = map_level === 'china' ? 'province' : map_level === 'province' ? 'city' : null;
          if (!map_level) return
          if (map_level === 'province') {
            that.createMap('geometryProvince', that.getProvinceId(mapList, params.name), params.name)
          } else if (map_level === 'city') {
            that.createMap('geometryCouties', that.getcityId(cityinfo, params.name), params.name)
          }
        })
      },
      createMap(url, id, name) {
        if (map_level === 'province') {
          // let newJson = provinceList[id];
          // cityinfo = chinaJson
          this.option.geo.map = name;
          echarts.registerMap(name, provinceList[id]);
          // provinceList为省份数据集合,格式为{
          // '省份1id': data1,
          // '省份2id': data2
		  // }
          this.myChart.setOption(this.option, true);
        } else {

        }
      },
      // 获取省份id
      getProvinceId(mapList, name) {
      // mapList为从阿里云下载下来的具体某个省份的经纬度数据,具体逻辑根据自己的实际情况修改
        for (let i in mapList) {
          if (name.indexOf(mapList[i].label)!==-1) {
            return mapList[i].value
          }
        }
      },
      // 获取市区id
      getcityId(cityinfo, name) {
      // 具体逻辑根据自己的实际情况修改
        for (let i in cityinfo.features) {
          if (cityinfo.features[i].properties.name == name) {
            return cityinfo.features[i].properties.id + '00'
          }
        }
      }
    }

最终效果如下
在这里插入图片描述
此时会发现,地图下方有个南海诸岛,有时候不需要它需要把它去掉,
使用geo时,可以在geo中设置

regions: [ // 对某块地区的特殊处理,此处可以隐藏掉南海诸岛
			    {
			      name: '南海诸岛', 
			      value: 0,
			      itemStyle: {
			        normal: {
			          opacity: 0, //透明度
			          label: {show: false}
			      }
			    }
			  }
		    ],
除了使用geo来实现外,还可以使用series来实现,关键代码如下:
// option中的geo去掉,使用series
series: [
            {
              name: 'map',
              type: "map",
              mapType: 'china',
              roam: false,
              zoom: 1,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#000",
                  },
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "#B79891",
                  borderWidth: "1",
                  areaColor: "transparent",
                },
                emphasis: {
                  areaColor: 'transparent',
                }
              },
              // 去掉南海诸岛
              data: [{ name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, label: { show: false } },
                  emphasis: { opacity: 0, label: { show: false } } } }]
            }
          ]

此时效果如下图
在这里插入图片描述
如想把底部边界线也给去掉,可以在china.json中找到以下代码,给注释掉或删除掉
在这里插入图片描述
删除之后效果如下:
在这里插入图片描述

注意

使用series来实现时,下钻时的方法需要修改下,createMap中的
this.option.geo.map = name;需要改为this.option.series[0].mapType = name;

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

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

相关文章

如何借助AI快速筛选和整理文献?

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在撰写毕业论文时&#xff0c;文献综述是必不可少的部分。它不仅为你的研究提供理论背景&#xff0c;还展示了你对研究领域的深入理解。然而&#xff0c;文献综述的撰写过程常常让学生感到头疼&#xff0c;…

基于JAVA+SpringBoot+Vue的大学校园回忆录系统

基于JAVASpringBootVue的大学校园回忆录系统 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345; …

ElasticSearch-聚合操作

聚合的分类 aggsMetric Aggregation min, max, avg, sumstats, cardinality Bucket Aggregation terms ordertext -> fielddatarangehistogramtop_hits Pipeline Aggregation min_bucketstats_bucketpercentiles_bucketcumulative_sum 聚合的作用范围 Filter, Post Filter,…

5.1.数据结构-c/c++二叉树详解(上篇)(遍历,几种二叉树)

本章所有代码请见&#xff1a;5.3.数据结构-c/c二叉树代码-CSDN博客 目录 一. 二叉树的基本介绍 1.2 满二叉树 1.3 完全二叉树 1.4 搜索二叉树 1.5 平衡二叉搜索树 二. 二叉树的常用操作 2.1 二叉树的定义 2.2 创建一个新的节点 2.3 构建一颗树 2.5 销毁一棵树 三.…

One-Shot Imitation Learning with Invariance Matching for Robotic Manipulation

发表时间&#xff1a;5 Jun 2024 论文链接&#xff1a;https://readpaper.com/pdf-annotate/note?pdfId2408639872513958656&noteId2408640378699078912 作者单位&#xff1a;Rutgers University Motivation&#xff1a;学习一个通用的policy&#xff0c;可以执行一组不…

Linux学习笔记6 值得一读,Linux(ubuntu)软件管理,搜索下载安装卸载全部搞定!(中)

Linux学习笔记5 值得一读&#xff0c;Linux&#xff08;ubuntu&#xff09;软件管理&#xff0c;搜索下载安装卸载全部搞定&#xff01;(上)-CSDN博客 一、前文回顾 上一篇文章我们了解了软件管理的基本概念和软件管理的几种常用工具。我们了解了软件包是由什么形式存在&#…

srt字幕文件怎么制作?分享几个简单步骤,新手必学

srt字幕文件怎么制作&#xff1f;随着短视频平台的发展&#xff0c;现在很多小伙伴喜欢用视频记录生活&#xff0c;分享美好瞬间。在将视频上传到视频平台的时候&#xff0c;我们需要对视频进行剪辑处理。而字幕的使用对提高视频内容的可理解性与传播性变得愈发重要。srt字幕文…

OpenCV 旋转矩形边界

边界矩形是用最小面积绘制的&#xff0c;所以它也考虑了旋转。使用的函数是**cv.minAreaRect**()。 import cv2 import numpy as npimgcv2.imread(rD:\PythonProject\thunder.jpg) img1cv2.cvtColor(img,cv2.COLOR_BGR2GRAY) print(img.dtype) ret,threshcv2.threshold(img1,1…

基于SpringBoot+Vue的美术馆管理系统(带1w+文档)

基于SpringBootVue的美术馆管理系统(带1w文档) 基于SpringBootVue的美术馆管理系统(带1w文档) 本课题研究和开发美术馆管理系统管理系统&#xff0c;让安装在计算机上的该系统变成管理人员的小帮手&#xff0c;提高美术馆管理系统信息处理速度&#xff0c;规范美术馆管理系统信…

【高等数学学习记录】集合

1 知识点 1.1 集合的概念 集合 指具有某种特定性质的事物的总称。集合的元素 组成集合的事物称为集合的元素&#xff08;简称元&#xff09;。有限集、无限集 含有限个元素的集合&#xff0c;则称为有限集&#xff1b;反之&#xff0c;称为无限集。子集 设 A A A、 B B B是两…

HTTP Cookie 和 session

HTTP Cookie HTTP协议本身是无状态&#xff0c;无连接的。 无状态是指&#xff0c;客户每次发起请求&#xff0c;服务器都不认识客户是谁&#xff0c;它只会根据请求返回对应的资源响应。 无连接不是指TCP的无连接&#xff0c;通常指的是HTTP协议本身不在请求和响应之间维护…

哪款宠物空气净化器能更好的清理浮毛?希喂、352、IAM测评分享

家里这三只可爱的小猫咪&#xff0c;已然成为了我们生活中不可或缺的家庭成员&#xff0c;陪伴我们度过了说长不长说短不短的五年时光。时常庆幸自己当年选择养它们&#xff0c;在我失落的时候总能给我安慰&#xff0c;治愈我多时。 但这个温馨的背后也有一点小烦恼&#xff0…

使用Redis实现记录访问次数(三种方案)

目录 0. 前言1. 使用Filter实现2. 使用AOP实现 1. 导入依赖 2. 写一个切面类&#xff0c;实现统计访问次数。 3. 开启AOP 4. 测试 5. plus版本 (1) 新建一个bean类 (2) 新增一个controller方法 (3) 新增一个循环增强方法 (4) 测试…

龙芯+FreeRTOS+LVGL实战笔记(新)——04开启主任务

本专栏是笔者另一个专栏《龙芯RT-ThreadLVGL实战笔记》的姊妹篇&#xff0c;主要的区别在于实时操作系统的不同&#xff0c;章节的安排和任务的推进保持一致&#xff0c;并对源码做了改进和优化&#xff0c;各位可以先到本人主页下去浏览另一专栏的博客列表&#xff08;目前已撰…

基于OGC300工业级LORA网关与OM201L数传终端的化工厂人员定位系统解决方案

化工行业作为高风险的行业之一&#xff0c;其安全管理一直备受关注。化工生产过程中涉及到各种危险品和复杂的工艺&#xff0c;一旦发生事故&#xff0c;往往会造成严重的人员伤亡和财产损失。因此&#xff0c;化工企业急需一套可靠的安全管理系统来监测安全隐患、预防事故发生…

【2024数模国赛赛题思路公开】国赛A题思路丨附可运行代码丨无偿自提

2024年国赛A题解题思路 【题目分析】 问题1&#xff1a;舞龙队沿螺距为55 cm的等距螺线顺时针盘入&#xff0c;给出300秒内舞龙队每秒的位置和速度 分析思路&#xff1a; 螺线方程&#xff1a; 需要建立螺线方程&#xff0c;以便描述龙头及每节板凳的位置。螺线是基于极坐标系…

图形几何算法 -- 凸包算法

前言 常用凸包算法包括Graham Scan 算法和Jarvis March (Gift Wrapping) 算法&#xff0c;在这里要简单介绍的是Graham Scan 算法。 1、概念 凸包是一个点集所包围的最小的凸多边形。可以想象用一根绳子围绕着一群钉子&#xff0c;绳子所形成的轮廓便是这些钉子的凸包。在计算…

谈谈AI领域的认知误区、机会点与面临的挑战

谈谈AI领域的认知误区、机会点与面临的挑战 最近2年&#xff0c;AI 技术的火爆&#xff0c;到处都能看到大家在讨论AI 的发展与机会。这里我们讨论一下AI 认知的误区&#xff0c;机会点和面临的挑战。 by kimmking AI 认知的误区 这年头掀起了所有人讨论AI热潮的同时&#xf…

使用C语言实现字符推箱子游戏

使用C语言实现字符推箱子游戏 推箱子&#xff08;Sokoban&#xff09;是一款经典的益智游戏&#xff0c;玩家通过移动角色将箱子推到目标位置。本文将带你一步步用C语言实现一个简单的字符版本的推箱子游戏。 游戏规则 玩家只能推箱子&#xff0c;不能拉箱子。只能将箱子推到…

【内容审核】对审核结果进行封装

目录 1、分析返回结果示例 2、自定义封装类 在【内容审核】Java实现七牛云内容审核功能七牛 java 审核-CSDN博客 中实现了文本、图片和视频的审核功能&#xff0c;但是这些功能灵活性不够&#xff0c;既不能自己设置审核的强度&#xff0c;也不能内容违规的详细信息&#xff…