地图数据展示

刀刀

1/1/2024

0 字

0 分钟

数据准备

想要实现地图数据效果，需要准备以下两个数据：

地图边界数据
这个数据不需要自己手写，手写也不现实，可以去往中国地图数据官网下载相关 JSON 文件。官网指路：[中国地图数据](首页 | GeoJSON.cn) 。
关联交互数据
根据项目需求，如疫情地图，每个省份的疫情人数等。

地图展示

首先准备好一个容器放地图：

html

<div class="geo"></div>

然后引入 echart.js 做地图处理，也可以选择其他数据可视化的第三方库：

html

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarys/min.js"></script>

接着就要手写逻辑了，具体可以查看官方文档：

初始化获得 echarts 的实例，该实例有很多方法可以使用
在图片加载期间使用 showLoading() 方法加载 loading 效果
使用 fetch 远程请求地图数据和关联数据
使用 echarts 中的注册方法 registerMap() 注册地图数据
通过 setOption() 方法配置地图相关信息，如：
- title ：text 图表的标题
- tooltip ：鼠标悬停内容提示
  其中，formater 为文字提示格式
- visualMap ：可视地图，一般用户设置不同颜色来区分展示数据差异（选填）
  其中，top 、left 、bottom 、right 为可视地图显示的位置；min 、max 为区间数据的最值；text 为文本，默认为数值文本；calculable 为布尔值，是能允许控制区间
- series ：显示的内容（重点）
  类型 type
  注册地图名称 map
  能否缩放和平移 roam
  缩放比例控制 scaleLimit
  关联数据 data
最后加载完毕，通过 hideLoading() 方法把 loading 效果取消

代码

(async function() {
    // 为类名为geo的div初始化，获取echart实例
    const myChart = echarts.init(document.querySelector('.geo'))
    
    // 开启loading效果
    myChart.showLoading()
    
    // 通过相对路径获取内容
    const resp = await fetch('./china.geojson.json').then((resp) => resp.json())
    const users = await fetch('./user.json').then((resp) => resp.json())
    
    // 注册地图数据
    echarts.registerMap('China', resp)
    
    myChart.setOption({
        title: {
            text: '用户分布图' // 标题
        },
        // 配置该项，鼠标悬停有提示
        tooltip: {
            formatter: '{b} 用户人数 {c} 人'
        }
        // 可视地图
        visualMap: {
        	left: 'left',
        	top: 'center',
        	min: 0,
        	max: 10000,
        	text: ['高', '低'],
            calcuable: true,
     	},
 		series: [
 			{
		 		type: 'map',
 				map: 'China',
 				roam: true,
 				scaleLimit: {
 					min: 0.7,
 					max: 3
 				},
    			data: users
 			}
 		]
    })
    
    // 关闭loading效果
    myChart.hideLoading()
})

地图数据展示 ​

数据准备 ​

地图展示 ​

代码 ​

地图数据展示

数据准备

地图展示

代码