Vue 离线地图实现

效果图:

一、获取市的地图数据

DataV.geoAtlas 获取市地图数据

点击地图缩放至想要的市区域,通过右侧的链接打开网址,复制json数据。

二、获取镇地图数据

选择你想要的镇数据,点击下载

选择级别(清晰度)

三、合并市和镇的数据

通过 合并转化数据(geojson)geojson.io 网址合并json数据

首先将市json数据复制到这里

然后通过 open 打开镇文件夹中的 .kml 文件,即可实现镇和市的合并json操作

最后将合并好的json数据放到 map.json 文件夹中等待使用

将 json 数据复制放进Vue 项目的 /static/map.json 地址中

下载 echarts :

npm i echarts --save
npm i axios --save

main.js 注册

import { createApp } from 'vue'
import * as echarts from 'echarts';
import './style.css'
import App from './App.vue'const app = createApp(App)
app.config.globalProperties.$echarts = echarts;app.mount('#app')

组件内使用:

<template><div class="map"><div class="map_chart" ref="map_chart"></div></div>
</template><script>
import axios from "axios";
export default {name: "Map",data() {return {chartInstance: null,allData: null,mapData: {}, // 所获取的省份的地图矢量数据colorArr: ['#4ab2e5', "#4fb6d2", "#52b9c7", "#5abead", "#f56321", "#f34e2b", "#f56f1c", "#f56f1c", "#f58414", "#c1bb1f", "#f5a305", "#b9be23"],};},created() { },mounted() {this.initChart();window.addEventListener("resize", this.screenAdapter);this.screenAdapter();},destroyed() {window.removeEventListener("resize", this.screenAdapter);},methods: {async initChart() {this.chartInstance = this.$echarts.init(this.$refs.map_chart);// 获取中国地图的矢量数据// http://localhost:8999/static/map/china.json// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$httpconst ret = await axios.get("http://localhost:5173/static/map.json");console.log(ret, "22");this.$echarts.registerMap("shouguang", ret.data);const initOption = {// title: {//   text: "▎ 公墓分布",//   left: 20,//   top: 20,// },geo: {type: "map",map: "shouguang",top: "5%",bottom: "5%",label: {show: true,color: "#1DE9B6",},itemStyle: {areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: "#09132c", // 0% 处的颜色},{offset: 1,color: "#274d68", // 100% 处的颜色},],globalCoord: true, // 缺省为 false},shadowColor: "rgb(58,115,192)",shadowOffsetX: 1,shadowOffsetY: 1,},emphasis: {itemStyle: {areaColor: "rgb(46,229,206)",shadowColor: "rgb(12,25,50)",borderWidth: 0,},label: {show: true,color: "#fff",},},},legend: {left: "5%",bottom: "5%",orient: "vertical",},series: [// {//    type: 'map',//     map: 'shouguang' //使用// },{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 1,rippleEffect: {period: 10,scale: 3,brushType: 'fill'},silent: true,hoverAnimation: true,label: {// normal: {//     formatter:function(arg){//      return arg.data.title//     },//     position: 'top',//     offset: [0, -10],//     color: '#fff',//     show: true// },},emphasis: {//  label: {//    show:true,//   color: '#fff',//   formatter:function(arg){//      return arg.data.title//     },//     position: 'top',//     offset: [0, -20],//  }},itemStyle: {normal: {color: function () { //随机颜色return "#f56321"},shadowBlur: 10,shadowColor: '#333'}},tooltip: {show: true,formatter: function (arg) {return arg.data.title}},symbolSize: 12,data: [{title: '田柳镇',name: "田柳镇",value: [118.7712820426, 37.0142500629]},{title: '羊口镇',name: "羊口镇",value: [118.8566660426, 37.2021022859]}]}, //地图线的动画效果{type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度,值越小速度越快trailLength: 0.4, //特效尾迹长度[0,1]值越大,尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 7, //图标大小},lineStyle: {normal: {color: function () { //随机颜色['#f21347', '#f3243e', '#f33736', '#f34131', '#f34e2b','#f56321', '#f56f1c', '#f58414', '#f58f0e', '#f5a305','#e7ab0b', '#dfae10', '#d5b314', '#c1bb1f', '#b9be23','#a6c62c', '#96cc34', '#89d23b', '#7ed741', '#77d64c','#71d162', '#6bcc75', '#65c78b', '#5fc2a0', '#5abead','#52b9c7', '#4fb6d2', '#4ab2e5']return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);},width: 1, //线条宽度opacity: 0.1, //尾迹线条透明度curveness: .3 //尾迹线条曲直度}},data: [{coords: [[118.7712820426, 37.0142500629], [118.8566660426, 37.2021022859]]}]}]};this.chartInstance.setOption(initOption);this.chartInstance.on("click", async (arg) => {// arg.name 得到所点击的省份, 这个省份他是中文});},getData(ret) {// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表// const { data: ret } = await this.$http.get('map')this.allData = ret;console.log(this.allData);this.updateChart();},updateChart() {// 处理图表需要的数据// 图例的数据const legendArr = this.allData.map((item) => {return item.name;});const seriesArr = this.allData.map((item) => {// return的这个对象就代表的是一个类别下的所有散点数据// 如果想在地图中显示散点的数据, 我们需要给散点的图表增加一个配置, coordinateSystem:georeturn {type: "effectScatter",rippleEffect: {scale: 5,brushType: "stroke",},name: item.name,data: item.children,coordinateSystem: "geo",};});const dataOption = {legend: {data: legendArr,},series: seriesArr,};this.chartInstance.setOption(dataOption);},screenAdapter() {const titleFontSize = (this.$refs.map_chart.offsetWidth / 100) * 3.6;const adapterOption = {title: {textStyle: {fontSize: titleFontSize,},},legend: {itemWidth: titleFontSize / 2,itemHeight: titleFontSize / 2,itemGap: titleFontSize / 2,textStyle: {fontSize: titleFontSize / 2,},},};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},},
};
</script>
<style scoped>
.map {width: 100%;height: 100%;background: rgb(22, 21, 34);color: #fff;
}.map_chart {width: 1200px;height: 500px;
}
</style>

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

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

相关文章

Plotly数据可视化宝典

一、引言 在数据驱动的时代,数据可视化已成为不可或缺的一部分。通过图形化的方式展示数据,我们能更直观地理解数据的内在规律和趋势。Plotly,作为一款强大的数据可视化工具,以其丰富的图表类型、交互性和灵活性,赢得了广大数据科学家的青睐。本宝典将深入解析Plotly的各…

mysql存储比特位

一、介绍 二、SQL CREATE TABLE bits_table (id INT PRIMARY KEY AUTO_INCREMENT,bit_value BIGINT UNSIGNED );-- 插入一个 8 位的 BIT 值 INSERT INTO bits_table (bit_value) VALUES (B10101010);-- 查询并格式化输出 SELECT id,bit_value,CONCAT(b, LPAD(BIN(bit_value),…

Midjourney绘画关键词参数汇总(二)

本文将继续介绍Midjourney绘画关键词参数的汇总&#xff0c;探索其在数字绘画中的应用和潜力。本文主要是提供与主题相关的关键词供大家参考学习。 大家感兴趣的话&#xff0c;可以在下列Midjourney中文版系统中体验&#xff1a;https://ai.easyaigx.com 一、日本漫画主题关键…

MGRE实验——路由配置

对134环回 ping一下发现都可以通 配置3&#xff0c;4同3 再注册 然后内网要互通&#xff0c;起rip 宣告1的左边和右边 对3 对4 当3&#xff0c;4之间要互通时&#xff0c;首先在1上 关闭之后&#xff0c;3就能学到4上的用户网段&#xff0c;4也能学到3 局域网要访问广域网一定…

大数据学习之 Hadoop部署

Hadoop部署 Linux桌面模式关闭 # 设置 systemctl set-default multi-user.target # 重启 reboot防火墙关闭 systemctl status firewalld systemctl stop firewalld # 关闭开机自启 systemctl disable firewalld配置Java环境 echo $JAVA_HOME java -version # Java配置 # 上传ja…

【贪心算法题目】

1. 柠檬水找零 这一个题目是一个比较简单的模拟算法&#xff0c;只需要根据手里的钱进行找零即可&#xff0c;对于贪心的这一点&#xff0c;主要是在20元钱找零的情况下&#xff0c;此时会出现两种情况&#xff1a;10 5 的组合 和 5 5 5 的组合&#xff0c;根据找零的特点&a…

容器监控方案

1、docker部署prometheus Prometheus是一套开源的系统监控报警框架&#xff0c;它基于时序数据库&#xff0c;并通过HTTP协议周期性地从被监控的组件中抓取指标数据。以下是一些关于Prometheus的详细介绍&#xff1a; 基本概念&#xff1a;Prometheus所有采集的监控数据均以指…

VUE3注册指令的方法

指令注册只能全局指令和选项式页面指令,composition api没有页面指令 选项式页面指令 <template><div class"home"><h3>自定义指令</h3><div class"from"><el-input type"text" v-focus v-model"name&q…

“壕无人性”的沙特也要买量子计算机!巨头沙特阿美的合作方竟是它?

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1200字丨5分钟阅读 摘要&#xff1a;石油巨头沙特阿美与 Pasqal 开启合作&#xff0c;计划于 2025 年部署一台 200 量子比特的量子计算机&#xff…

uniapp星空效果

uniapp星空效果 背景实现思路代码实现尾巴 背景 之前在网上看到过一个视频&#xff0c;使用纯css实现过一个星空效果。具体出处找不到了&#xff0c;我们按照他那个思路来实现一个类似的效果&#xff0c;还是先上一张图镇楼&#xff1a; 实现思路 首先我们这个效果使用的是…

添加辅小区

4G 5G添加辅小区都是通过rrcConnectionReconfiguration消息的SCellToAddMod 4G -sCellToReleaseList-r10 :: SEQUENCE OF OPTIONAL:Omit-sCellToAddModList-r10 :: SEQUENCE OF SIZE(1..maxSCell-r10[4]) [1] OPTIONAL:Exist| -SCellToAddMod-r10 :: SEQUENCE [111]| -sCell…

python安装路径可以更改吗

Python3.5默认安装路径是当前用户的 AppData\.. 下 现在安装过程中默认是install just for me&#xff0c;这个会把python默认安装到AppData文件夹中&#xff0c;如果选了install for all users&#xff0c;就会默认安装到C盘根目录了。 python3.5 安装&#xff1a; 输入官网…

【论文速读】|探索ChatGPT在软件安全应用中的局限性

本次分享论文&#xff1a;Exploring the Limits of ChatGPT in Software Security Applications 基本信息 原文作者&#xff1a;Fangzhou Wu, Qingzhao Zhang, Ati Priya Bajaj, Tiffany Bao, Ning Zhang, Ruoyu "Fish" Wang, Chaowei Xiao 作者单位&#xff1a;威…

Linux命令和工具:包管理器工具yum命令使用详解

一、yum包管理器概述 Yum&#xff08;Yellowdog Updater Modified&#xff09;是一个非常流行的Linux包管理器&#xff0c;主要用于RPM包管理系统。它能够帮助用户安装、升级、降级和删除RPM包&#xff0c;同时也可以检索有关RPM包的信息。换一句话说&#xff0c;yum允许用户从…

linux系统硬盘读写慢的排查方法

如果服务器硬盘读写慢&#xff0c;可能会导致处理性能降低&#xff0c;用户响应慢。因此及时排除故障至关重要。下面是硬盘读写慢的排查思路。 1、top命令查看硬盘是否繁忙。 2、找出占用硬盘带宽高的进程。 通过iotop命令进行查看&#xff0c;iotop命令是用于展示硬盘读写操作…

【Linux】:Linux 2.6内核 调度队列和调度原理

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux 2.6内核 调度队列和调度原理&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a…

Mysql超详细安装配置教程(保姆级图文)

MySQL是一种流行的开源关系型数据库管理系统&#xff0c;它广泛用于网站和服务的数据存储和管理。MySQL以其高性能、可靠性和易用性而闻名&#xff0c;是许多Web应用程序的首选数据库解决方案之一。 一、下载安装包 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直…

Redis常见数据类型(4) - hash, List

hash 命令小结 命令执行效果时间复杂度hset key field value设置值O(1)hget key field获取值O(1)hdel key field [field...]删除值O(k), k是field个数hlen key计算field个数O(1)hgetall key获取所有的field-valueO(k), k是field的个数hmget field [field...]批量获取field-va…

蓝桥杯-合并数列

小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案&#xff0c;分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数&#xff0c;新数的值是原来两…

【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 布局管理器 | 网格布局Grid Layout 文章编号&#xff1a…