当前位置: 首页 > news >正文

Echarts地图registerMap使用的GeoJson数据获取

https://datav.aliyun.com/portal/school/atlas/area_selector

在这里插入图片描述
可以选择省,市,区。
也可以直接在地图上点击对应区域。

我的应用场景

我这里用到这个还是一个特别老的大屏项目,用的jq写的。显示中国地图边界区域
在这里插入图片描述

我们在上面的这个地区选择中国区域
在这里插入图片描述
点击复制,复制下来这个json数据。新建一个china.js
在这里插入图片描述

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define(['exports', 'echarts'], factory);} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {// CommonJSfactory(exports, require('echarts'));} else {// Browser globalsfactory({}, root.echarts);}
}(this, function (exports, echarts) {var log = function (msg) {if (typeof console !== 'undefined') {console && console.error && console.error(msg);}}if (!echarts) {log('ECharts is not Loaded');return;}if (!echarts.registerMap) {log('ECharts Map is not loaded')return;}echarts.registerMap('china', '这里是复制下来的json数据');
}));

接着在index.html中引入

<script src="./js/china.js"></script>

设置echarts
主要配置geomap属性,前面echarts.registerMap的第一个参数是啥,咱这里写啥就行了
在这里插入图片描述

var option = {backgroundColor: '#080a20',title: {left: 'left',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},geo: {map: 'china',zoom: 1,label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},
};
var myecharts = echarts.init($('.map .geo')[0])
myecharts.setOption(option)

html

<div class="map"><div class="geo"></div>
</div>

相关文章:

Echarts地图registerMap使用的GeoJson数据获取

https://datav.aliyun.com/portal/school/atlas/area_selector 可以选择省&#xff0c;市&#xff0c;区。 也可以直接在地图上点击对应区域。 我的应用场景 我这里用到这个还是一个特别老的大屏项目&#xff0c;用的jq写的。显示中国地图边界区域 我们在上面的这个地区选择…...

【JavaEE】Java中的多线程 (Thread类)

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…...

python中具名元组的使用

collections.namedtuple是一个工厂函数&#xff0c;它可以用来构建一个带字段名的元组和一个有名字的类。 from collections import namedtuple City namedtuple(City2, name country population coordinates) tokyo City(Tokyo, JP, 36.933, (35.689722, 139.691667)) pr…...

【开题报告】基于SpringBoot的婚纱店试妆预约平台的设计与实现

1.选题背景 婚礼是人生中的重要时刻&#xff0c;而试妆是婚礼准备过程中不可或缺的一环。传统的婚纱店试妆预约方式通常需要亲自到店或通过电话预约&#xff0c;这样的方式可能存在一些问题。首先&#xff0c;用户需要花费时间和精力到店进行预约&#xff0c;对于忙碌的现代人…...

Qt 布局讲解及举例

Qt布局是一个用于管理窗口部件位置和大小的机制&#xff0c;它使得开发人员能够轻松地创建可伸缩、可调整大小的界面。在Qt中&#xff0c;布局管理器是一种用于自动调整窗口部件大小的机制&#xff0c;它可以根据窗口大小的变化自动调整部件的位置和大小。 Qt布局管理器通过使…...

【微服务】java 规则引擎使用详解

目录 一、什么是规则引擎 1.1 规则引擎概述 1.2 规则引擎执行过程 二、为什么要使用规则引擎 2.1 使用规则引擎的好处 2.1.1 易于维护和更新 2.1.2 增强应用程序的准确性和效率 2.1.3 加快应用程序的开发和部署 2.1.4 支持可视化和可管理性 2.2 规则引擎使用场景 三、…...

HCIA-Datacom跟官方路线学习

通过两次更换策略。最后找到最终的学习方案&#xff0c;华为ICT官网有对这个路线的学习&#xff0c;hcia基础有这个学习路线&#xff0c;hcip也有目录路线。所以&#xff0c;最后制定学习路线&#xff0c;是根据这个认证的路线进行学习了&#xff1a; 官网课程&#xff1a;课程…...

MySQL三大日志详细总结(redo log undo log binlog)

MySQL日志 包括事务日志&#xff08;redolog undolog&#xff09;慢查询日志&#xff0c;通用查询日志&#xff0c;二进制日志&#xff08;binlog&#xff09; 最为重要的就是binlog&#xff08;归档日志&#xff09;事务日志redolog&#xff08;重做日志&#xff09;undolog…...

XXL-Job详解(二):安装部署

目录 前言环境下载项目调度中心部署执行器部署 前言 看该文章之前&#xff0c;最好看一下之前的文章&#xff0c;比较方便我们理解 XXL-Job详解&#xff08;一&#xff09;&#xff1a;组件架构 环境 Maven3 Jdk1.8 Mysql5.7 下载项目 源码仓库地址链接: https://github.…...

支持Arm CCA的TF-A威胁模型

目录 一、简介 二、评估目标 2.1 假定 2.2 数据流图 三、威胁分析 3.1 威胁评估 3.1.1 针对所有固件镜像的一般威胁 3.1.2 引导固件可以缓解的威胁...

【Web端CAD/CAE文字标注】webgl+canvas 2d实现文字标注功能

一、需求背景 在CAD/CAE领域经常会遇到显示节点编号这种需求&#xff0c;效果如下图&#xff1a; 本文介绍如何在WebGL中实现文字的显示&#xff0c;对于如何在OpenGL中实现请绕路。 二、实现原理 Canvas是HTML5提供的元素&#xff0c;用于在网页上绘制图形&#xff0c;其支…...

对话框、内部控件位置

一、了解下几个函数 1、movewindow 了解下&#xff1a;MoveWindow 自己塞进去的是屏幕坐标 CrvtFaultRodDlg* dlg new CrvtFaultRodDlg();if (dlg ! NULL){BOOL ret dlg->Create(IDD_DlgCrvtFaultRod, NULL);if (ret) //Create failed.{RECT rect;{RECT rect1;dlg->…...

【GraphQL 】将GraphQL API添加到Postgres数据库的六种简单方法,比较Hasura、Prisma和其他

PostgreSQL是世界上最流行的开源SQL数据库之一&#xff0c;GraphQL是一种日益流行的API规范。 将经过验证和众所周知的PostgreSQL与GraphQL带来的API创建新方式集成在一起不是很好吗&#xff1f; 在本文中&#xff0c;我们讨论了六个不同的项目&#xff0c;它们试图将SQL与Gr…...

每日一题(LeetCode)----哈希表--有效的字母异位词

每日一题(LeetCode)----哈希表–有效的字母异位词 1.题目&#xff08;242. 有效的字母异位词&#xff09; 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互…...

【设计模式】行为型模式-第 3 章第 6 讲【中介者模式】

目录 定义 场景描叙 目的 主要解决 实现 基本类图 案例代码...

Django 通过 Trunc(kind) 和 Extract(lookup_name) 参数进行潜在 SQL 注入 (CVE-2022-34265)

漏洞描述 Django 于 2022 年6月4 日发布了一个安全更新&#xff0c;修复了 Trunc&#xff08;&#xff09; 和 Extract&#xff08;&#xff09; 数据库函数中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 4.0.6 and 3.2.14 | Weblog | Djang…...

Vue3-toRef 和 toRefs 函数

Vue3-toRef 和 toRefs 函数 功能&#xff1a;可以简化语法调用。toRef 函数执行时会生成一个对象 ObjectRefImpl &#xff0c;是一个引用对象&#xff0c;具有value属性&#xff08;getter 和 setter 属性&#xff09;语法格式&#xff1a;toRef(对象名, 对象中的属性名) toRe…...

STM32---时钟树

写在前面&#xff1a;一个 MCU 越复杂&#xff0c;时钟系统也会相应地变得复杂&#xff0c;如 STM32F1 的时钟系统比较复杂&#xff0c;不像简单的 51 单片机一个系统时钟就 可以解决一切。对于 STM32F1 系列的芯片&#xff0c;其有多个时钟源&#xff0c;构成了一个庞大的是时…...

【功能测试】软件系统测试报告

1.引言 1.1.目的 本测试报告为 xxx 系统测试报告&#xff0c;本报告目的在于总结测试阶段的测试及测试结果分析&#xff0c;描述系统是否达到需求的目的。 本报告预期参考人员包括测试人员、测试部门经理、开发人员、项目管理人员等。 1.2.参考文档 《xxxx系统需求规格说明…...

CentOS一键安装docker脚本

CentOS安装Docker一键脚本 在CentOS上安装Docker是许多项目中常见的任务之一。为了简化这个过程&#xff0c;你可以使用下面的一键脚本。 #!/bin/bash# 卸载旧版本&#xff08;如果有&#xff09; sudo yum remove -y docker \docker-client \docker-client-latest \docker-c…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...