当前位置: 首页 > 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…...

终极指南:如何将danger-js与Webpack集成实现自动化代码审查

终极指南&#xff1a;如何将danger-js与Webpack集成实现自动化代码审查 【免费下载链接】danger-js ⚠️ Stop saying "you forgot to …" in code review 项目地址: https://gitcode.com/gh_mirrors/da/danger-js Danger JS是一个强大的自动化代码审查工具&a…...

玩转openrgb

缘由我的asus b760m有rgb&#xff0c;但是华硕Armoury Crate 确实比较臃肿&#xff0c;经常啥也没干它占用3-5%。而开源界有个openrgb&#xff0c;虽然看似简陋但是它小啊。于是采用python脚本openrgb来玩转它。本方案应该也适用于其他rgb主板。准备工作1、下载openrgb&#xf…...

【Java外部函数性能优化黄金法则】:20年JVM专家亲授JNI/FFM调优的7大致命误区与3步极速修复方案

第一章&#xff1a;Java外部函数优化的演进脉络与性能本质Java平台对外部函数调用&#xff08;Foreign Function & Memory API&#xff0c;即JEP 454/464/471/472&#xff09;的演进&#xff0c;标志着JVM从“纯Java世界”迈向系统级互操作的新纪元。其性能本质并非单纯降低…...

PyTorch 2.8镜像实战落地:教育机构AI教学平台(图文+视频+LLM)集成方案

PyTorch 2.8镜像实战落地&#xff1a;教育机构AI教学平台&#xff08;图文视频LLM&#xff09;集成方案 1. 教育AI平台的技术挑战与解决方案 现代教育机构在构建AI教学平台时面临三大技术难题&#xff1a;多模态内容生成、算力资源管理和教学场景适配。PyTorch 2.8深度学习镜…...

YOLO12快速部署指南:Gradio界面已配好,启动就能用

YOLO12快速部署指南&#xff1a;Gradio界面已配好&#xff0c;启动就能用 1. 为什么选择YOLO12镜像 YOLO12作为2025年最新发布的目标检测模型&#xff0c;带来了革命性的注意力为中心架构。这个预配置好的镜像让您无需任何复杂操作&#xff0c;就能立即体验最先进的目标检测技…...

告别‘夜盲症’:用Python+OpenCV手把手教你实现红外与可见光图像融合(附完整代码)

实战指南&#xff1a;PythonOpenCV实现红外与可见光图像融合技术 夜间监控画面总是模糊不清&#xff1f;自动驾驶系统在低光照环境下识别率骤降&#xff1f;这些问题本质上都是"视觉夜盲症"的表现。今天我们将用最实用的方式&#xff0c;带你用Python和OpenCV构建一个…...

Mermaid Live Editor终极指南:10个团队协作和项目管理的实用技巧

Mermaid Live Editor终极指南&#xff1a;10个团队协作和项目管理的实用技巧 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-l…...

08-多平台集成实战

OpenClaw 多平台集成实战 “让 AI 助手跨越每个通讯渠道,无处不在。” — OpenClaw 在当今多元化的通讯环境中,一个优秀的 AI 助手不应该被限制在单一平台上。OpenClaw 的核心优势之一就是其强大的多平台集成能力,能够同时连接 Discord、Telegram、飞书、企业微信、QQ、钉钉…...

Evolutionary Architecture by Example:如何避免过度工程化陷阱

Evolutionary Architecture by Example&#xff1a;如何避免过度工程化陷阱 【免费下载链接】evolutionary-architecture-by-example Navigate the complex landscape of .NET software architecture with our step-by-step, story-like guide. Unpack the interplay between m…...

FinalShell v4.5.12 安装避坑指南:为什么你的远程连接总是失败?

FinalShell 4.5.12 高效配置手册&#xff1a;从安装到稳定连接的进阶实践 远程终端工具的选择往往决定了运维效率的天花板。作为一款集SSH连接、文件传输、性能监控于一体的全能型工具&#xff0c;FinalShell近年来在开发者社区中积累了不错的口碑。但不少用户在初次接触时&…...