echarts加载区域地图,并标注点
效果如下,加载了南海区域的地图,并标注几个气象站点;

1、下载区域地图的JSON:DataV.GeoAtlas地理小工具系列

新建nanhai.json,把下载的JSON数据放进来
说明:如果第二步不打勾,只显示省的名字,
如果打勾的话,会显示省下所有市的名字,看个人需求
如果要把多个省放在一起展示,则把多个JSON文件里的features数据合并即可

2、使用Echarts展示地图
<!--地图-->
<div ref="chartRef" class="chart"/><script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'
import nanhaiJson from '@/assets/map/nanhai.json'//地图json数据: https://datav.aliyun.com/portal/school/atlas/area_selector
const chartRef = ref()
const formRef = ref()
let myChart = null;
const stationData = ref([])//加载数据
onMounted(() => {//加载南海地图echarts.registerMap('nanhai', nanhaiJson)loadData()
})const loadData = () => {xxApi.xxPage().then((data) => {if (data && data.total > 0) {stationData.value = []
//拼接地图上需要标注的点
data.records.forEach((item) => {stationData.value.push({name: item.name,value: [item.longitude, item.latitude]})})}loadChart()})}//加载图表
const loadChart = () => {// 如果实例已经存在,则先销毁再重新创建if (myChart != null && myChart.dispose) {myChart.dispose();}myChart = echarts.init(chartRef.value)myChart.showLoading({text: 'loading'})const mapCenterLongitude = 105;const mapCenterLatitude = 36.2;let option = {geo: {map: 'nanhai',zoom: 1.8,//缩放比例roam: true, // 是否允许缩放和平移center: [mapCenterLongitude, mapCenterLatitude], // 设置地图的中心点,这里的longitude和latitude需要您根据实际需求填写itemStyle: {areaColor: 'lightskyblue',borderColor: '#404a59'},label: {show: true,color: 'rgba(0, 0, 0, 0.3)', // 设置为淡色(例如白色半透明)fontSize: 10, // 可根据需要调整字体大小fontWeight: 'normal' // 可根据需要调整字体粗细},},//气象站点列表series: [{type: 'scatter',coordinateSystem: 'geo',data: stationData.value,symbolSize: 10,label: {show: true,formatter: function (params) {return params.name; // 显示点的name},position: 'top', // 或其他位置color: '#FF4500', // 设置标签字体颜色为红色fontSize: 22, // 增大字体大小以突出显示fontWeight: 'bold' // 加粗字体以突出显示},itemStyle: {normal: {color: '#FFA500' // 设置为橘黄色}},}]}myChart.hideLoading()myChart.setOption(option)// 自适应屏幕window.addEventListener('resize', function () {myChart.resize()})
}</script><style scoped>
.chart {height: 550px;
}.detail-chart {height: 100%;overflow: auto;
}</style>
OK,大功搞定!!!
相关文章:
echarts加载区域地图,并标注点
效果如下,加载了南海区域的地图,并标注几个气象站点; 1、下载区域地图的JSON:DataV.GeoAtlas地理小工具系列 新建nanhai.json,把下载的JSON数据放进来 说明:如果第二步不打勾,只显示省的名字&a…...
echarts画风向杆
1.安装echarts 2.引入echarts 4.获取数据,转换数据格式 windProfile.title.text ${moment(time.searchTime[0], ‘YYYY-MM-DD HH:mm:ss’).format( ‘YYYY-MM-DD HH:mm’ )}-${moment(time.searchTime[1], ‘YYYY-MM-DD HH:mm:ss’).format(‘YYYY-MM-DD HH:mm’)…...
【LeetCode每日一题】LeetCode 345.反转字符串中的元音字母
LeetCode 345.反转字符串中的元音字母 题目描述 给定一个字符串 s,你需要反转字符串中所有的元音字母,并返回新的字符串。 元音字母是 a, e, i, o, u,这些字母的大小写都会被考虑。 示例 1: 输入: s "hello" 输出: "holle…...
蓝桥杯练习生第四天
小蓝每天都锻炼身体。 正常情况下,小蓝每天跑 11 千米。如果某天是周一或者月初(11 日),为了激励自己,小蓝要跑 22 千米。如果同时是周一或月初,小蓝也是跑 22 千米。 小蓝跑步已经坚持了很长时间&#x…...
cesium 常见的 entity 列表
Cesium 是一个用于创建3D地球和地图的开源JavaScript库。它允许开发者在Web浏览器中展示地理空间数据,并且支持多种类型的空间实体(entities)。 Entities是Cesium中用于表示地面上或空中的对象的一种高层次、易于使用的接口。它们可以用来表示点、线、多边形、模型等,并且可…...
Java旅程(五)Spring 框架与微服务架构 了解 JVM 内部原理和调优
在现代企业级应用中,Spring 框架和微服务架构已经成为主流技术,而 Java 虚拟机(JVM)的理解和调优对于保证应用的高性能和稳定性也至关重要。本篇博客将深入讲解 Spring 框架与微服务架构,并进一步探讨 JVM 内部原理和调…...
Niushop-master靶场漏洞
靶场搭建 将 niushop-master.zip 压缩包放到网站的根目录,解压后访问 浏览器访问 install.php ,根据提示安装即可 1.SQL注入漏洞 随便选择一种商品分类,发现有参数,测试注入 测试闭合发现页面报错有sql注入 应该是环境的问题&am…...
35道面向初中级前端的基础面试题
新鲜出炉的8月前端面试题 跨域资源共享 CORS 阮一峰 3. JSONP 是什么? 这是我认为写得比较通俗易懂的一篇文章jsonp原理详解——终于搞清楚jsonp是啥了。 4. 事件绑定的方式 嵌入dom 按钮 直接绑定 btn.onclick function(){} 事件监听 btn.addEventList…...
MFC用List Control 和Picture控件实现界面切换效果
添加List Control 和Picture控件 添加 3个子窗体 把子窗体边框设置为None, 样式设为Child 声明 CListCtrl m_listPageForm;void ShowForm(int nIndex);void CreatFormList();void CMFCApplication3Dlg::DoDataExchange(CDataExchange* pDX) {CDialogEx::DoDataExchange(pDX);DD…...
1. 解决前端vue项目 vite打包内存溢出问题
探索问题原因: 项目开发时正常运行不影响,打包出现上图错误,意味着打包过程中消耗了太多的内存导致的。 解决方法: 在 package.json中的打包命令替换如下: 解决前: "build:dev": "vite…...
Springboot高并发乐观锁
Spring Boot分布式锁的主要缺点包括但不限于以下几点: 性能开销:使用分布式锁通常涉及到网络通信,这会引入额外的延迟和性能开销。例如,当使用Redis或Zookeeper实现分布式锁时,每次获取或释放锁都需要与这些服务进行交…...
【WPS安装】WPS编译错误总结:WPS编译失败+仅编译成功ungrib等
WPS编译错误总结:WPS编译失败仅编译成功ungrib等 WPS编译过程问题1:WPS编译失败错误1:gfortran: error: unrecognized command-line option ‘-convert’; did you mean ‘-fconvert’?解决方案 问题2:WPS编译三个exe文件只出现u…...
pytorch MoE(专家混合网络)的简单实现。
专家混合(Mixture of Experts, MoE)是一种深度学习模型架构,通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络(即子模型),然后根据门控网络(gating network)的输出…...
虚拟机VMware的安装问题ip错误,虚拟网卡
要么没有虚拟网卡、有网卡远程连不上等 一般出现在win11 家庭版 1、是否IP错误 ip addr 2、 重置虚拟网卡 3、查看是否有虚拟网卡 4、如果以上检查都解决不了问题 如果你之前有vmware 后来卸载了,又重新安装,一般都会有问题 卸载重装vmware: 第一…...
Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门hello world输出【入门一】
开发环境搭建:Linux-Ubuntu下搭建ESP32的开发环境的步骤,使用乐鑫最新稳定版的esp-idf-CSDN博客 一、安装好开发环境后,在esp目录下再创建一个esp32的目录【用于编程测试demo】 二、进入esp32目录,打开终端【拷贝esp-idf的hello工…...
重温设计模式--命令模式
文章目录 命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍 定义与概念 命令模式属于行为型设计模式,它旨在将一个请求封装成一个对象,从而让你可以用不同的请求对客户端进行参数化,将请求的发送者和接收者解耦,并且能…...
电力通信规约-104实战
电力通信规约-104实战 概述 104规约在广泛应用于电力系统远动过程中,主要用来进行数据传输和转发,本文将结合实际开发实例来讲解104规约的真实使用情况。 实例讲解 因为个人技术栈是Java,所以本篇将采用Java实例来进行讲解。首先我们搭建一…...
什么是事务
在数据库管理系统中,事务(Transaction)是执行一系列操作的最小工作单元,这些操作要么全部成功,要么全部失败。为了确保数据的一致性和完整性,事务被设计为具备四大特性,即原子性(Ato…...
数据结构:双向循坏链表
目录 1.1双向循环链表的结构 2.双向链表功能的实现 2.1初始化链表 2.2销毁链表 2.3创建结点 2.4打印链表 2.5链表查找 2.6链表在pos的前面进行插入 2.7链表删除pos位置的节点 2.8链表的头插,头删 ,尾插,尾删 1.1双向循环链表的结构 …...
3.1、SDH的5种标准容器
1、定义与作用 在 SDH(同步数字体系)中,标准容器(C)是一种用来装载各种速率的 PDH(准同步数字系列)信号的信息结构。它的主要作用是进行速率适配,使不同速率的 PDH 信号能够在 SDH 的…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
