前端大屏可视化展示街道级或自定义地图

Vedu • 2021-07-18 22:30 • 程序开发 • 阅读 847

在做前端大屏开发时候经常遇到街道级别的地图或者是自定义的某区域（楼层，学校等）地图等，由于这一类的地图数据geojson非常难获取，导致开发难度加大。今天给大家提供一个解决思路。

效果图

自定义某街道可视化地图

全代码和解析

主要利用了echarts v5.1.0版本，支持在 geo和map 中使用 SVG 作为底图。注意点：

1.需要启动服务器加载svg图片，本地会出现跨域，这边建议使用vscode 插件 live sever。

2.svg内path的name命名要和data里面一一对应，否则不会显示

svg里面的关键命名

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./jquery-3.1.1.js"></script>
	<script src="./echarts.min.5.12.js"></script>
</head>
<style>
	#map {
		width: 1000px;
		height: 500px;
		border: solid 1px #333;
	}
</style>

<body>
	<div id="map"></div>
</body>
<script>
	var chartDom = document.getElementById('map');
	var myChart = echarts.init(chartDom);
	var option;
// 需要启动服务器加载，本地会出现跨域，这边建议使用vscode 插件 live sever
	$.get('./map.svg', function (svg) {
		echarts.registerMap('map', {
			svg: svg
		});
		option = {
			visualMap: {
				type: 'continuous',
				show: false,
				min: 1,
				max: 3,
				top: 0,
				left: 0,
				right: 0,
				orient: 'horizontal',
				text: [3, 1],
				splitNumber: 3,
				color: ['#1AC586', '#A7E646', '#FF6060'],
				textStyle: {
					color: '#fff',
					fontSize: 16
				}
			}, //地图颜色映射
			series: [{
				name: '空气质量',
				type: 'map',
				map: 'map',
				emphasis: {
					label: {
						show: false
					}
				},
				selectedMode: true,
				label: {
					show: true,
					color: '#fff'
				},
        // 要对应svg里面的name
				data: [{
						name: 'area0',
						value: 1
					}, {
						name: 'area1',
						value: 1
					},
					{
						name: 'area2',
						value: 2
					},
					{
						name: 'area3',
						value: 1
					},
					{
						name: 'area4',
						value: 1
					},
					{
						name: 'area5',
						value: 1
					},
					{
						name: 'area6',
						value: 3
					},
					{
						name: 'area7',
						value: 2
					},
					{
						name: 'area8',
						value: 1
					},
					{
						name: 'area9',
						value: 1
					},
					{
						name: 'area10',
						value: 3
					},
					{
						name: 'area11',
						value: 2
					},
					{
						name: 'area12',
						value: 1
					},
					{
						name: 'area13',
						value: 3
					},
					{
						name: 'area14',
						value: 1
					},
					{
						name: 'area15',
						value: 2
					},
					{
						name: 'area16',
						value: 1
					},
				]
			}]
		};
		myChart.setOption(option);
		myChart.on('click', function (params) {
			console.log(params)
		});
	});

	option && myChart.setOption(option);
</script>

</html>

完结

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/25862.html