从0到1完成一个Vue后台管理项目(十八、基础地图绘制)

news2024/11/26 9:56:44

往期

从0到1完成一个Vue后台管理项目(一、创建项目)

从0到1完成一个Vue后台管理项目(二、使用element-ui)

从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

从0到1完成一个Vue后台管理项目(四、引入axios、配置路由)

从0到1完成一个Vue后台管理项目(五、登录页(表单校验的使用和封装))

从0到1完成一个Vue后台管理项目(五、登录页,mock,token,axios封装)

从0到1完成一个Vue后台管理项目(六、404页)

从0到1完成一个Vue后台管理项目(七、Header、Footer、页面布局)

从0到1完成一个Vue后台管理项目(八、Menu改造完善、子组件创建、配置路由)

从0到1完成一个Vue后台管理项目(九、引入Breadcrumb面包屑,更改bug)

从0到1完成一个Vue后台管理项目(十、列表API封装、Table列表渲染、表格数据转换)

从0到1完成一个Vue后台管理项目(十一、前端分页实现)

从0到1完成一个Vue后台管理项目(十二、学生table列表删除、查询、重置)

从0到1完成一个Vue后台管理项目(十三、信息列表页面实现:对话框新增、DateTimePicker 日期时间选择器)

从0到1完成一个Vue后台管理项目(十四、对话框封装、接口联通、api优化 很重点(封装思想))

从0到1完成一个Vue后台管理项目(十五、作业列表、表格数据方法的封装)

从0到1完成一个Vue后台管理项目(十六、后端分页方法以及分页组件的封装以及复用)

从0到1完成一个Vue后台管理项目(十七、使用Echarts:柱状图、折线图)

获取中国地图的json

我们首先需要获取中国地图的数据,通常这种数据是json格式的

我们有两种获取数据的方式

  1. DataV.GeoAtlas网站获取
  2. 在echarts的包下获取

这里我们在DataV.GeoAtlas网站获取,另一种方式会在后面用到
官网:DataV.GeoAtlas

在这里插入图片描述
我们下载或者复制即可
在这里插入图片描述
然后我们把这个json放到assets下
在这里插入图片描述

使用

在这里插入图片描述
在这里插入图片描述

OK,我们拿到数据了

绘制地图

在这里插入图片描述
在这里插入图片描述
完成

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

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

相关文章

spring restTemplate的坑----会对String类型的url中的特殊字符进行转义

📢 📢 📢 📣 📣 📣哈喽!大家好,我是「奇点」,江湖人称 singularity。刚工作几年,想和大家一同进步 🤝 🤝一位上进心十足的【Java ToB端…

基于OpenCV实现两种方法测量圆弧长度(步骤 + 源码)

导 读 本文主要介绍基于OpenCV实现两种方法测量圆弧长度(步骤 + 源码)。 背景介绍 要求:如上所示,分别用OpenCV计算出图1和图2中圆弧的长度。因为OpenCV中没有提供现成计算圆弧的方法,所以需要自己编写,本文将提供2种不同的方法来实现,仅供参考。 实现步骤 首…

mmsegmentation 训练Binary segmentation

1.一天最无聊的事从搭环境开始 1.conda create -n swin python3.7 2.conda activate swin 3.conda install pytorch1.7.0 torchvision0.8.0 torchaudio0.7.0 cudatoolkit11.0 4.pip install mmcv-full -f https://download.openmmlab.com/mmcv/dist/cu110/torch1.7.0/index.h…

Keil + STM32学习嵌入式数据结构-01

视频链接 初识数据结构,十天搞定嵌入式数据结构_哔哩哔哩_bilibili 课程目的 学会嵌入式经常使用的数据结构 具备基础知识 具有C语言基础(结构体、指针、内存(malloc)) 具有数据结构的基础知识,因此提及到的基础…

Android 深入系统完全讲解(8)

2 Smali 调试 Smali 是安卓 Apk 反编译出来的格式,类似于我们 PC 上面的汇编语言。语法可以参考这个文 章:https://blog.csdn.net/yuanguozhengjust/article/details/80493963 PC 上的反编译调试工具用 OD 和 IDA(这个也可以调试 Android &…

Java 调用 扫描仪的技术该如何选择?

文章目录Java 调用 扫描仪的技术该如何选择?详细介绍;(1)TWAIN(2)Kodakimg(3)Dynamic TWAIN ActiveX(4)WIA(用于桌面应用程序)开发应用程序,您可…

计算机组成原理习题一

计算机组成原理习题一 文章目录计算机组成原理习题一题目答案题目 1.某数的IEEE单精度浮点数存储形式为C1F00000H,则其所表示的十进制数真值是多少?要求写出详细求解过程以及最终结果。 2.求出数据10010100110的海明码,可检/纠错一位错&…

【实战篇】40 # 如何实现3D地球可视化?

说明 【跟月影学可视化】学习笔记。 如何实现一个 3D 地球 学习笔记源码实现&#xff1a;https://github.com/kaimo313/visual-learning-demo 整体实现效果如下&#xff1a; 1、绘制一个 3D 球体 <!DOCTYPE html> <html lang"en"><head><m…

五、数据导入与基本的 SELECT 语句

文章目录一、数据导入指令二、基本查询语句2.1 SELECT ...2.2 使用 SELECT 语句查询一个数据表2.3 查询表中的一列或多列三、单表查询3.1 用 DISTINCT 关键字去除结果中的重复行3.2 使用 AS 设置别名3.3 着重号3.4 运算符3.4.1 算术运算符3.4.2 比较运算符3.4.3 逻辑运算符3.4.…

k8s之Deployment

写在前面 本文一起看下Deployment API对象&#xff0c;该对象的作用是保证POD的高可用&#xff0c;即保证POD的可用数量一直维持在某个期望状态中&#xff0c;比如期望状态是有3个POD&#xff0c;当有一个POD意外终止时&#xff0c;则会自动再启动一个新POD&#xff0c;所以De…

Makefile 如何构建Go项目

前言 &#x1f4da; 请问你是如何打包Go语言开发的项目呢&#xff1f; 是直接命令行输入&#xff1f; go build . 开发调试时&#xff1f; go run main.go 但是我们看到开源的Go语言项目运行时是&#xff1a; make build || make install 我们打包运行的这个过程&#xff0…

Mask RCNN网络源码解读(Ⅵ) --- Mask分支及Loss计算

目录 0.先决知识 1.简介 2.mask_rcnn.py解析 2.1 初始化函数 2.2 MaskRCNNHeads类 2.3 MaskRCNNPredictor类 3.RoIHeads类解析 3.1 正向传播过程 3.2 mask部分损失 3.3 maskrcnn_inference 0.先决知识 学习此篇博客之前&#xff0c;读者应有&#xff1a; ①一定的p…

MySQL常用命令 (这些命令专属于MySQL 不属于标准SQL语句)

1、查看MySQL版本 &#xff1a;select version(); ​​​​​​​ ​​​​​​​ ​​​​​​​ 2、创建数据库 &#xff1a;create database 数据库名称; 3、使用/指定数据库&#xff1a;use 数据库名称; 4、查看当前使用的数据库…

硬件系统工程师宝典(3)-----信号完整性分析是个啥?

各位同学大家好&#xff0c;欢迎继续做客电子工程学习圈&#xff0c;今天我们继续来讲这本书&#xff0c;硬件系统工程师宝典。上篇我们读到硬件电路的概要设计需要考虑的问题&#xff0c;相关的可行性分析可以使开发工作事半功倍。信号完整性分析概述今天我们开始学习在高速电…

上海亚商投顾:两市震荡引分化 汽车产业链获青睐

上海亚商投顾前言&#xff1a;无惧大盘大跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。市场情绪大小指数今日走势分化&#xff0c;沪指全天弱势震荡&#xff0c;创业板指在权重股助力下&#xff0c;午后一度冲高涨…

靶机测试 0s-hackNos-2笔记

简介靶机地址https://www.vulnhub.com/entry/hacknos-os-hacknos-2,403/#Difficulty : Easy to IntermediateFlag : 2 Flag first user And second rootLearning : Web Application | Enumeration | Password Cracking测试过程信息收集nmap扫描端口nmap -p- -A 192.168.1.103 -…

如何在 Zorin OS 上安装 ONLYOFFICE 桌面编辑器

ONLYOFFICE 桌面应用是一款开源办公套件&#xff0c;包括用于文本文档、电子表格、演示文稿和表单的编辑器。除了离线工作&#xff0c;您还可以将该应用连接到云端进行在线文档协作。这款套件的源代码可在 GitHub 上获得&#xff0c;是根据 AGPL v.3.0 许可。 ONLYOFFICE桌面编…

golang中new与make的区别

new和make new // The new built-in function allocates memory. The first argument // is a type,not a value, and the value returned is a pointer to a // newly // allocated zero value of that type. func new(Type) *Type对于官方是这么解释new的&#xff1a;这个…

(6)go-micro微服务consul配置、注册中心

文章目录一 Consul介绍1. 注册中心Consul基本介绍2.注册中心Consul关键功能3.注册中心Consul两个重要协议二 Consul安装1.使用docker拉取镜像三 Config配置四 Consul代码编写1.设置consul配置中心2.获取consul配置中心的数据3.consul可视化界面数据编写4. main.go代码编写五 最…

微信小程序-页面导航

小程序实现页面导航的两种方式 声明式导航(tabBar 页面&#xff0c;在app.json中配置) 在页面上声明一个<navigator>导航组件通过点击<navigator> 组件实现页面跳转 app.json中 "tabBar": {"list": [{"pagePath": "pages/home…