echarts 加载乡镇地图

2023-11-22 14:10
文章标签 加载 地图 echarts 乡镇

本文主要是介绍echarts 加载乡镇地图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

echarts是一款Apache基金会下孵化项目之一,是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

echarts支持坐标系地图,使用geojson的格式进行加载,最终通过canvas进行绘制。使用echarts加载乡镇地图也是十分简单,效果也非常好,同时支持多种动画、渲染方式。

一、获取地图数据

乡镇级别的数据可以通过水经注软件进行下载。如图所示,下载需要的矢量数据,这里记得选择坐标系为WGS84 经纬度投影坐标系
水经注下载地图

下载后目录结构如下
地图数据

二、转换为geojson

使用mapshaper工具对shp文件进行转换到处为geojson文件。
点击select打开选择文件框,选择刚刚下载的乡镇shapefile文件。
mapshaper
选中刚刚下载的文件,所有文件都要选中
选中下载的地图数据
点击import,导入数据
导入数据展示
成功导入,显示下载的乡镇数据。点击右上角的export按钮进行导出
导出按钮
选择geojson导出
导出后便得到了需要的geojson文件了。
导出后还需要做一步处理,导出的文件的属性是大写的Name,如下图。这样不会被echarts识别,echarts会区分大小写,这样加载会显示不了名称。
Name
对json的所有Name替换为name后保存即可。

三、echarts使用

使用echarts对地图加载

$.get(this.mapJson, (geoJson) => {// 基于准备好的dom,初始化echarts实例echarts.registerMap('nh_town', geoJson);this.mapChart = echarts.init(document.getElementById(this.chartId));//将json请求的数据的内容封装为echarts显示的内容this.mapChartData = geoJson.features.map((feature, index) => {var rObj = {};rObj.name = feature.properties.name;rObj.value = this.effectSymbolCor[feature.properties.name];  //是每个镇中心的经纬度return rObj;});this.mapOption.series = this.initMapChartSeries(this.mapChartData);this.mapChart.setOption(this.mapOption);//点击this.mapChart.on('click', function (params) {console.log(params)var _self = this;});})

最终效果图:
效果图

这篇关于echarts 加载乡镇地图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/410678

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1:更改IDE配置方法2:在Eclipse中清理项目方法3:使用Maven命令行在开发Sprin

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》:本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式:2. 使用 ApplicationRunne

SpringBoot项目删除Bean或者不加载Bean的问题解决

《SpringBoot项目删除Bean或者不加载Bean的问题解决》文章介绍了在SpringBoot项目中如何使用@ComponentScan注解和自定义过滤器实现不加载某些Bean的方法,本文通过实... 使用@ComponentScan注解中的@ComponentScan.Filter标记不加载。@C

springboot 加载本地jar到maven的实现方法

《springboot加载本地jar到maven的实现方法》如何在SpringBoot项目中加载本地jar到Maven本地仓库,使用Maven的install-file目标来实现,本文结合实例代码给... 在Spring Boothttp://www.chinasem.cn项目中,如果你想要加载一个本地的ja