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

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加载区域地图,并标注点

效果如下&#xff0c;加载了南海区域的地图&#xff0c;并标注几个气象站点&#xff1b; 1、下载区域地图的JSON&#xff1a;DataV.GeoAtlas地理小工具系列 新建nanhai.json&#xff0c;把下载的JSON数据放进来 说明&#xff1a;如果第二步不打勾&#xff0c;只显示省的名字&a…...

echarts画风向杆

1.安装echarts 2.引入echarts 4.获取数据&#xff0c;转换数据格式 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&#xff0c;你需要反转字符串中所有的元音字母&#xff0c;并返回新的字符串。 元音字母是 a, e, i, o, u&#xff0c;这些字母的大小写都会被考虑。 示例 1: 输入: s "hello" 输出: "holle…...

蓝桥杯练习生第四天

小蓝每天都锻炼身体。 正常情况下&#xff0c;小蓝每天跑 11 千米。如果某天是周一或者月初&#xff08;11 日&#xff09;&#xff0c;为了激励自己&#xff0c;小蓝要跑 22 千米。如果同时是周一或月初&#xff0c;小蓝也是跑 22 千米。 小蓝跑步已经坚持了很长时间&#x…...

cesium 常见的 entity 列表

Cesium 是一个用于创建3D地球和地图的开源JavaScript库。它允许开发者在Web浏览器中展示地理空间数据,并且支持多种类型的空间实体(entities)。 Entities是Cesium中用于表示地面上或空中的对象的一种高层次、易于使用的接口。它们可以用来表示点、线、多边形、模型等,并且可…...

Java旅程(五)Spring 框架与微服务架构 了解 JVM 内部原理和调优

在现代企业级应用中&#xff0c;Spring 框架和微服务架构已经成为主流技术&#xff0c;而 Java 虚拟机&#xff08;JVM&#xff09;的理解和调优对于保证应用的高性能和稳定性也至关重要。本篇博客将深入讲解 Spring 框架与微服务架构&#xff0c;并进一步探讨 JVM 内部原理和调…...

Niushop-master靶场漏洞

靶场搭建 将 niushop-master.zip 压缩包放到网站的根目录&#xff0c;解压后访问 浏览器访问 install.php &#xff0c;根据提示安装即可 1.SQL注入漏洞 随便选择一种商品分类&#xff0c;发现有参数&#xff0c;测试注入 测试闭合发现页面报错有sql注入 应该是环境的问题&am…...

35道面向初中级前端的基础面试题

新鲜出炉的8月前端面试题 跨域资源共享 CORS 阮一峰 3. JSONP 是什么&#xff1f; 这是我认为写得比较通俗易懂的一篇文章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打包内存溢出问题

探索问题原因&#xff1a; 项目开发时正常运行不影响&#xff0c;打包出现上图错误&#xff0c;意味着打包过程中消耗了太多的内存导致的。 解决方法&#xff1a; 在 package.json中的打包命令替换如下&#xff1a; 解决前&#xff1a; "build:dev": "vite…...

Springboot高并发乐观锁

Spring Boot分布式锁的主要缺点包括但不限于以下几点&#xff1a; 性能开销&#xff1a;使用分布式锁通常涉及到网络通信&#xff0c;这会引入额外的延迟和性能开销。例如&#xff0c;当使用Redis或Zookeeper实现分布式锁时&#xff0c;每次获取或释放锁都需要与这些服务进行交…...

【WPS安装】WPS编译错误总结:WPS编译失败+仅编译成功ungrib等

WPS编译错误总结&#xff1a;WPS编译失败仅编译成功ungrib等 WPS编译过程问题1&#xff1a;WPS编译失败错误1&#xff1a;gfortran: error: unrecognized command-line option ‘-convert’; did you mean ‘-fconvert’?解决方案 问题2&#xff1a;WPS编译三个exe文件只出现u…...

pytorch MoE(专家混合网络)的简单实现。

专家混合&#xff08;Mixture of Experts, MoE&#xff09;是一种深度学习模型架构&#xff0c;通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络&#xff08;即子模型&#xff09;&#xff0c;然后根据门控网络&#xff08;gating network&#xff09;的输出…...

虚拟机VMware的安装问题ip错误,虚拟网卡

要么没有虚拟网卡、有网卡远程连不上等 一般出现在win11 家庭版 1、是否IP错误 ip addr 2、 重置虚拟网卡 3、查看是否有虚拟网卡 4、如果以上检查都解决不了问题 如果你之前有vmware 后来卸载了&#xff0c;又重新安装&#xff0c;一般都会有问题 卸载重装vmware: 第一…...

Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门hello world输出【入门一】

开发环境搭建&#xff1a;Linux-Ubuntu下搭建ESP32的开发环境的步骤&#xff0c;使用乐鑫最新稳定版的esp-idf-CSDN博客 一、安装好开发环境后&#xff0c;在esp目录下再创建一个esp32的目录【用于编程测试demo】 二、进入esp32目录&#xff0c;打开终端【拷贝esp-idf的hello工…...

重温设计模式--命令模式

文章目录 命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍 定义与概念 命令模式属于行为型设计模式&#xff0c;它旨在将一个请求封装成一个对象&#xff0c;从而让你可以用不同的请求对客户端进行参数化&#xff0c;将请求的发送者和接收者解耦&#xff0c;并且能…...

电力通信规约-104实战

电力通信规约-104实战 概述 104规约在广泛应用于电力系统远动过程中&#xff0c;主要用来进行数据传输和转发&#xff0c;本文将结合实际开发实例来讲解104规约的真实使用情况。 实例讲解 因为个人技术栈是Java&#xff0c;所以本篇将采用Java实例来进行讲解。首先我们搭建一…...

什么是事务

在数据库管理系统中&#xff0c;事务&#xff08;Transaction&#xff09;是执行一系列操作的最小工作单元&#xff0c;这些操作要么全部成功&#xff0c;要么全部失败。为了确保数据的一致性和完整性&#xff0c;事务被设计为具备四大特性&#xff0c;即原子性&#xff08;Ato…...

数据结构:双向循坏链表

目录 1.1双向循环链表的结构 2.双向链表功能的实现 2.1初始化链表 2.2销毁链表 2.3创建结点 2.4打印链表 2.5链表查找 2.6链表在pos的前面进行插入 2.7链表删除pos位置的节点 2.8链表的头插&#xff0c;头删 &#xff0c;尾插&#xff0c;尾删 1.1双向循环链表的结构 …...

3.1、SDH的5种标准容器

1、定义与作用 在 SDH&#xff08;同步数字体系&#xff09;中&#xff0c;标准容器&#xff08;C&#xff09;是一种用来装载各种速率的 PDH&#xff08;准同步数字系列&#xff09;信号的信息结构。它的主要作用是进行速率适配&#xff0c;使不同速率的 PDH 信号能够在 SDH 的…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...