Vue3.x使用Echarts绘制世界地图并进行定点

news/2024/3/29 5:36:27/文章来源:https://blog.csdn.net/baoyin0822/article/details/129146028

Vue3.x使用Echarts绘制世界地图并进行定点

一、需求

  • 绘制世界地图并根据返回经纬度数据进行定点
  • 将定点数据展示在世界地图内

二、解决

  • 绘制世界地图,利用Echarts图表组件时间,需要世界地图Geojson数据的可以在资源中下载世界地图Geojson数据-Javascript文档类资源-CSDN文库,世界地图Geojson文件存储在前端本地的静态资源文件夹下,代码如下:
<template><div>...<div id="worldgraph"></div></div>
</template><script setup>
import * as echarts from 'echarts';
import worldData from '@/assets/json/world.json';
import { ref, onMounted, onUnmounted } from 'vue';// 世界地图画布
const worldGraph = ref(null);/* 挂载 */
onMounted(() => {initData()
})
/* 卸载 */
onUnmounted(() => {if (worldGraph.value) {worldGraph.value.dispose();worldGraph.value = null;}
});
/* 初始化IP画像数据 */
const initData = () => {if (worldGraph.value) {worldGraph.value.dispose();worldGraph.value = null;}const point = []// 添加美国坐标点point.push({name: '美国',value: [-97.822, 37.751],type: 'iconData'})drawnWorldChart(point)
};
/* 绘制世界地图图谱 */
const drawnWorldChart = (point) => {if (!document.getElementById('ipprotrait-worldgraph')) {return;}echarts.registerMap('world', JSON.stringify(worldData));worldGraph.value = echarts.init(document.getElementById('ipprotrait-worldgraph'));let option = {grid: {width: '100%',height: '100%',left: '0%',right: '0%',bottom: '0%',containLabel: true},geo: {type: 'map',map: 'world',aspectScale: 0.85,emphasis: {label: {show: false},itemStyle: {areaColor: '#F6FBFF',borderColor: '#CEE0E7',}},zoom: 1.2,itemStyle: {areaColor: '#F6FBFF',borderColor: '#CEE0E7',},},series: [// 标记点{type: 'scatter',coordinateSystem: 'geo',symbolSize: 30,symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAAE+ElEQVRYCbVYTWhUVxQ+b+a9mUk0hAhGDFiS2grusgpGMHFRaAQjAYm2G6lOEFQIXbiYhRQUF110UYpiSgMSN63GRYqLttiNP2gpgbitaWMpXdREsTTNZP7evH7fzWQySe59P9PJhce775zvfOe799177ryxpI7meV47wkYln/9Qksm3vYWFrDc/L7g7pLN27ixa7e28NwMzB8zXMH9hWdY8/VGaFQUMYduAvyium/FevJDivXsp98kTCtPSQKDEDx4UZ3AwZ3V1icTjnwL4GYQuaQM0xtACIa7Ty+d/kDdv3ipcv55yHz3S0JlN8UOHJHHhQk7a2v6wksn3IfJ3M3rNE0ogxPVKqfSd+/Rpc/7qVQevbY0hSi+ZlOSlS8V4b29WbHsAIn8KCg8UCHFdEDdTunu3pTA2FgsiDONPnDtXto8fX4TI7qCZ9E3INYfX+j1nrlHiOIDCjRsxcnLJMIffoHwFIvAi15x6rX4sdfgUJ7hVDp94o0CMrJ27tXDtWqruNeeTmJyKmxVhpWxp0UaBQI+ylLiPH2sDG2EkN3Mwl4nPLBBFmHXOFNgou8rBgm9o2l2MKX8H+Nnl4WFjEa7li3V3i3PypMT27VPm8vPnUrx9W8rPntXCtH0W86bJSfrexY7+dSPI3mioPPfg6MrihGg2+Ktm5/RpsU+dEpBXbahzEjtwQEq3bknx5s2qXdfhKYQrC6E98G8SaHrFu03HV20SztxGcat+CqaPmKDGcxxttw7nJ1Ad/LqgVRtfa+3MrdpX7/QRE9QwGcwVSaCNErP2zgwZVtecwa3MYTCVXNrlZprB11ZbW9EvcSN9lVyvdZwmgbOxzk4dfp2NuzWohcFUcs3quEwCp2XHjiZpbdXFVG3FO3cEJan6vLFDH8uNb2MO5hKZ1uFMAn/DUfQq3sOdb27lmRlVSnQiaWOZCaqFKkc+v4ANtanEMLN2YQLsea47aR8+nHbv30+YJYqqcy4KsnPiRF2FGjkK4jiqUuvyGHcqZqAfu+vH7NCQLYuLutj/b2tpkeapqRI+Bd7DpDzQEZpeMevbA69U+tMeGNDFNcRGbuYwiWMSo0A68e3wOQptDiPkY2MbOMnNHH7EvgIR+JXV2rpsHznix1GXj5zkZg4/Al+BmPosFvDlRDqdw92PJ5oPXBXOyyqHT7SvwErcmGzfvmgfPepDE82luMCJqLGgyECBGGEes/eJc+ZMXrb5ft8E5Vrxg8NJpxWn4g6IChRYiR+3Eom5xNmzbgBfoJscluPMATgeCAYglECMtIT/Vz6KDw5asf37w/BqMYwlB7kUpxa13hhKIENA+DPOly+TmUx9ZQdlJZHJ5MlBrvUyzE+hBSqKeDxjdXQs2TjWojbGxDo6/kVNzUSJjSQQI/8HGybtjIy41t69ofMQyxjGKo7QkSHXYC0fEnxrlcsTqStXcpLw/R2xEgYMsYxhbC1XmH6kGawSOs4ovsL+Spw/H7iriSEWs2f8OK/yajp1CcRMLGH2hu1jx7x4X5+GdsVEHzHEqhgj0uyoSyDpkHBaYrGP+X+ftWfPpgy00UeMwm5ChDMYfw+GCxfxCoVvvJcvh5ZHRpKSy62EpVLSND6et3btmkKB/yAs15bg8MOW//P9Unr4sLDU3+/xYp82+rYkaVRSCOnyisW/CxMTZV7s0xaVZ0vxENSH75iiutBvVLL/APCb6OqC62Y+AAAAAElFTkSuQmCC',// rippleEffect: { // 坐标点动画//   period: 2,//   scale: 4,//   brushType: 'fill'// },label: {show: false,},data: point,// itemStyle: { // 坐标点颜色//   show: true,//   color: '#F53F3F',//   shadowColor: '#fff'// }}]};worldGraph.value.setOption(option);
};
</script>
  • 最后效果图如下:
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2022FALL嵌入式大纲

Jamslade 部分内容有遗漏&#xff0c;可结合 超文本 2022FALL《嵌入式系统原理》期末复习笔记 一起观看 文章目录嵌入式系统片上系统实时系统硬实时系统软实时系统伪指令DMA传输波特率单/半双/全双工通信&#xff1b;对齐/非对齐访问地址译码代码临界区RISCBIOSUARTSPII2CWDTRO…

2.5|shell简介|Linux支持的网络协议|Linux的网络服务

shell简介shell是一种具备特殊功能的程序&#xff0c;它是介于使用者和Unix/Linux操作系统内核间的一个接口。操作计算机需要通过命令&#xff08;command&#xff09;或是程序&#xff08;program&#xff09;&#xff1b;程序需要编译器&#xff08;compiler&#xff09;将程…

东南大学研究生英语18-19秋试卷解析

写在前面 作者&#xff1a;夏日 博客地址&#xff1a;https://blog.csdn.net/zss192 本文为东南大学研究生英语上学期18-19年期末试卷解析&#xff0c;答案来源于 ChatGPT International Conference 单选题 1.A presenter is supposed to do the following in an introdu…

【数据结构趣味多】八大排序

目录 1.直接插入排序 基本思想 代码实现&#xff1a; 直接插入排序的特性总结&#xff1a; 2.希尔排序 基本思想 代码实现 &#xff08;递归实现&#xff09; 希尔排序的特性总结 3.直接选择排序 基本思想 代码实现&#xff1a; 直接选择排序的特性总结 4.堆排序 …

Springboot 全局异常处理类

全局异常处理 在开发过程中&#xff0c;不管是Dao、Servie、Controller,层都有可能发生异常&#xff0c;对于异常处理&#xff0c;通常是try&#xff0d;catch或者直接throw&#xff0c;这会让try&#xff0d;catch的代码在代码中任意出现&#xff0c;系统的代码耦合度高&…

深入Spring底层透析bean生命周期及循环引用的醍醐灌顶篇

目录前言一.Bean的生命周期1.1 Bean的实例化阶段1.2 Bean的初始化阶段&#xff08;重点&#xff09;1.3 Bean的完成阶段二.循环引用问题(面试常问题&#xff09;三.Spring的三级缓存&#xff08;重点来了&#xff09;四.完整的Spring IoC整体总结前言 本篇是接着bean的创建基本…

2023/02/21 事件循环-eventloop 宏任务 微任务 讲解

1 JS是单线程 js是单线程的。也就是说&#xff0c;同一个时间只能做一件事。作为浏览器脚本语言&#xff0c;与它的用途有关。JavaScript的主要用途是和用户互动&#xff0c;以及操作DOM&#xff0c;这决定了它只能是单线程。 js是单线程的。也就是说&#xff0c;同一个时间只…

非常优秀的网站设计案例,设计师必备

厚积才能薄发&#xff0c;一个优秀的设计师的天性一定是想要获得更多网站设计灵感&#xff0c;擅于为新项目寻找创意切入点、搜索设计参考资源、最新的设计趋势。今天为大家带来了一组免费可商用的网站设计案例&#xff0c;通过这些网站设计案例&#xff0c;你可以获得&#xf…

CF707C Pythagorean Triples 题解

CF707C Pythagorean Triples 题解题目链接字面描述题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2样例 #3样例输入 #3样例输出 #3样例 #4样例输入 #4样例输出 #4样例 #5样例输入 #5样例输出 #5提示思路代码实现题目 链接 http…

华为OD机试 - 最短耗时(C++) | 附带编码思路 【2023】

刷算法题之前必看 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:https://blog.csdn.net/hihell/category_12199283.html 华为OD详细说明:https://dream.blog.csdn.net/article/details/128980730 华为OD机试题…

算法笔记(十一)—— 并查集、KMP

并查集 支持集合快速合并 所有数据生成各自的集合&#xff0c;需要提供查询两个两素是不是属于一个集合&#xff0c;和集合合并操作&#xff0c;并查集能够在常数时间级别上对两个操作进行实现 1. 构造结构&#xff08;数据指针&#xff09;&#xff0c;将自己的指针指向自己…

事件流、事件冒泡、阻止冒泡

1、事件流 2、事件冒泡&#xff1a;从小到大 概念&#xff1a; 当一个元素的事件被触发时&#xff0c;同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡 <style> .father{width: 300px;height: 300px;background-color: pink; } .son{width:…

Zookeeper框架

Zookeeper框架概述 1.Zookeeper介绍 Zookeeper&#xff08;以下简称ZK&#xff09;是用来管理和协调其他框架的&#xff0c;很多框架需要依赖ZK&#xff08;例如Hadoop-HA&#xff0c;Kafka&#xff0c;HBase等&#xff09;ZK本身也是一个集群ZK本身也可以存数据(一般保存配置…

koa中间件的实现原理

koa中间件的实现原理如何&#xff1f;先来看一个例子。koa的执行顺序是这样的&#xff1a;const middleware asyncfunction (ctx, next) {console.log(1)await next()console.log(6) }const middleware2 asyncfunction (ctx, next) {console.log(2)await next()console.log(5…

LeetCode 535. TinyURL 的加密与解密

TinyURL 是一种 URL 简化服务&#xff0c; 比如&#xff1a;当你输入一个 URL https://leetcode.com/problems/design-tinyurl 时&#xff0c;它将返回一个简化的URL http://tinyurl.com/4e9iAk 。请你设计一个类来加密与解密 TinyURL 。 加密和解密算法如何设计和运作是没有限…

产品新说 | 指标异常?怎么做能更好配合业务变化(一)

​ 背景&#xff1a; 企业业务运营的平稳&#xff0c;常常要依靠智能运维在后方保驾护航。熟悉运维的肯定都知道&#xff0c;在智能运维中有一环是通过监控指标来判断系统、云、业务应用、网络设备等运行的是否健康&#xff0c;以便及时排障维稳后台。在指标异常检测中&#xf…

读书笔记//来自公众号(2)

非常喜欢阅读同行的文章&#xff0c;彷佛进行一场隔空交流。大家都是数据分析师&#xff0c;有许多共鸣&#xff1b;了解数据分析在不同行业的应用&#xff0c;往往很有收获。 这位朋友在零售行业、工业物联网、汽车互联网、2G电商等做个数据分析&#xff0c;有10多工作经验。…

opencv在windows下环境搭建遇到问题

文章目录debug模式下执行到cv::imshow()报内存异常qt配置opencv环境出现的问题debug模式下执行到cv::imshow()报内存异常 原因是&#xff1a;在添加静态库的时候opencv_world460.lib和opencv_world460d.lib都导入了。 在debug模式下只能导入opencv_world460d.lib动态库&#xf…

OpenGL 渲染管线与显卡可执行程序

渲染管线的六个步骤 OpenGL 渲染管线的六个步骤&#xff0c;从指定几何图元到帧缓冲区写入像素&#xff0c;图像就被 OpenGL 引擎一步步地渲染到屏幕&#xff08;FBO&#xff09;上去了。 指定几何对象 OpenGL 引擎会根据开发者的指令去绘制几何图元。OpenGL&#xff08;ES&…

IMX6ULL学习笔记(17)——工程管理

一、简介 之前我们把所有源码文件放在一个文件夹下。 这样做存在两个主要问题&#xff0c;第一&#xff0c;代码存放混乱不易阅读。第二&#xff0c;程序可移植性差。如果工程源文件达到几十、甚至数百个的时候&#xff0c;这样一股脑全部放到根目录下就会使工程显得混乱不堪。…