echarts：map3D如何设置不同的symbol-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts：map3D如何设置不同的symbol。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上篇文章我们处理了map3D散点图的点击问题，发现只有一个散点的时候，点击会失效，把所有数据放在一个散点图里就可以了，那么新的问题又来了，所有数据都放一块了，该如何根据数据设置不同的symbol，这种需求很常见，比如这12条数据可以分成医院、学校和宾馆三类，每一类使用不同的symbol，但是翻看了文档，scatter3D的symbol并不支持回调函数，想要分别给散点设置symbol，那就得用循环来设置，但是使用循环设置的话，每张散点图上只有一条数据，点击又会失效……

echarts地图图标自定义动画,echarts,echarts,前端,javascript

解决思路：

既然只有一个散点的图不能点，那就设置两张散点图，第一张散点图包含所有的数据，但是他们的symbol设置为none，相当于做一个底图，另外利用循环生成N张散点图，每张图只有一条数据，每张图可以分别设置symbol，看上去点击的是一个symbol，但其实响应的是那个symbol为none的图表。

代码：

<template>
	<div>
		<div id="map" style="width: 100%;height: 500px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import 'echarts-gl'
	import mapJson from '@/assets/map/json/province/shanghai.json'
	import scatterData from '@/assets/scatterData.json'
	export default {
		data() {
			return {
				myChart: null,
				//echart 配制option  
				options: {
					tooltip: {
						// show: true,
						trigger: 'item',
						formatter: function(params, ticket, callback) {
							let name = params.name;
							return name;
						},
					},
					geo3D: {
						map: 'shanghai',
						regionHeight: 5, // 模型的高度
						shading: 'lambert',
						boxWidth: 120, // 三维地图在三维场景中的宽度
						boxDepth: 90, // 三维地图在三维场景中的深度
						bottom: '10%',
						label: { // 标签的相关设置
							show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
							position: ['50%', '50%'],
							distance: 50, // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
							// 标签内容格式器
							formatter: (params) => {
								return params.name
							},
							emphasis: {
								// 对应的鼠标悬浮效果
								show: false,
								textStyle: {
									fontSize: 18,
									color: '#FFF'
								}
							},
							textStyle: { // 标签的字体样式
								color: '#000', // 地图初始化区域字体颜色
								fontSize: 10, // 字体大小
								opacity: 1, // 字体透明度
								backgroundColor: '#fff' // 字体背景色
							}
						},
						itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
							color: 'rgba(32,101,200,0.5)', // 地图板块的颜色
							opacity: 1, // 图形的不透明度 [ default: 1 ]
							borderWidth: 3, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
							borderColor: 'rgba(23,146,202,.1)' // 图形描边的颜色。[ default: #333 ]
						},
						emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
							// 鼠标移上去的样式
							borderWidth: 1,
							borderColor: '#1792CA',
							color: '#0058B8',
							textStyle: {
								color: '#1792CA'
							},
							label: { // label高亮时的配置
								show: false,
								textStyle: {
									color: '#fff', // 高亮时标签颜色变为 白色
									backgroundColor: 'rgba(0,0,0,0.4)',
									padding: 10,
									fontSize: 10 // 高亮时标签字体 变大
								}
							},
							itemStyle: { // itemStyle高亮时的配置
								areaColor: '#66ffff' // 高亮时地图板块颜色改变
							}
						},

						light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
							main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
								// color: '#fff', //主光源的颜色。[ default: #fff ]
								intensity: 1, // 主光源的强度。[ default: 1 ]
								shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
								// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
								alpha: 150, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
								beta: 70 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
							},
							ambient: { // 全局的环境光设置。
								color: '#fff', // 环境光的颜色。[ default: #fff ]
								intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
							}
						},
						groundPlane: {
							show: false,
							color: '#9dcaff'
						}
					}
				}
			}
		},
		methods: {
			//初始化中国地图
			initEchartMap() {
				let mapDiv = document.getElementById('map');
				if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
					this.myChart.dispose();
				}
				this.myChart = echarts.init(mapDiv);
				echarts.registerMap('shanghai', mapJson);
				this.options.series = this.getScatter(scatterData);
				this.myChart.setOption(this.options);
				this.myChart.on('click', function(args) {
					console.log(args);
				});
			},
			getScatter(data) {
				var reuslt = [];
				let hospital =
					'path://M643.2 902H380.8V643.2H122V380.8h258.8V122h262.4v258.8H902v262.4H643.2V902z m-218.7-43.7h175V599.5h258.8v-175H599.5V165.7h-175v258.8H165.7v175h258.8v258.8z';
				let school =
					'path://M945.4 383.3l-399-204.6c-23.7-12.1-51.9-12.1-75.5 0.2L77.2 383.4c-9.8 5.1-15.8 15.1-15.8 26.1 0 11 6.1 21 15.8 26.1l37.5 19.5v193.5c-14.8 8.3-25 24-25 42.2 0 26.8 21.7 48.5 48.5 48.5s48.5-21.7 48.5-48.5c0-18.2-10.1-33.9-25-42.2v-169l104.5 54.3V746c0 25.7 16.5 48.2 41 56L432 841.7c25.6 8.1 52 12.2 78.3 12.2 25.3 0 50.6-3.7 75.2-11.2l134.1-40.8c24.8-7.6 41.6-30.1 41.7-56l0.8-216.2 183.3-94c9.9-5.1 16-15.1 16-26.1-0.1-11.2-6.2-21.2-16-26.3zM714.2 745.7c0 5.2-3.4 9.7-8.3 11.2l-134.1 40.8c-41.2 12.5-84.6 12.2-125.7-0.8l-124.7-39.6c-4.9-1.6-8.2-6.1-8.2-11.2v-188L470.9 640c11.9 6.2 24.9 9.3 37.9 9.3 12.9 0 25.8-3 37.6-9.1l168.5-86.4-0.7 191.9zM525 598.4c-10.1 5.2-22.2 5.2-32.3-0.1L129 409.4l363.6-188.8c10.1-5.3 22.2-5.3 32.3-0.1l368.4 188.9-368.3 189z';
				let hotel =
					'path://M405.333333 436.906667A190.72 190.72 0 0 0 512 469.333333a106.666667 106.666667 0 0 1 106.666667 106.666667v170.666667a106.666667 106.666667 0 0 1-213.333334 0V436.906667M512 85.333333a192 192 0 0 0-192 192v469.333334a192 192 0 0 0 384 0v-170.666667a192 192 0 0 0-192-192 106.666667 106.666667 0 1 1 106.666667-106.666667h85.333333a192 192 0 0 0-192-192z';
				var symbolList = [];
				symbolList.push(hospital);
				symbolList.push(school);
				symbolList.push(hotel);
				// var symbolList = ['circle', 'pin', 'diamond']
				data.forEach(item => {
					// 每个散点图的通用设置
					let seriesItem = {
						type: 'scatter3D',
						coordinateSystem: 'geo3D',
						symbolSize: 30,
						zlevel: 99,
						geo3DIndex: 0,
						regionHeight: 5, // 模型的高度
						shading: 'lambert',
						boxWidth: 120, // 三维地图在三维场景中的宽度
						boxDepth: 90, // 三维地图在三维场景中的深度
						silent: true,
						itemStyle: {
							color: function(params) {
								var colorList = ['#00aa00', '#ff5500', '#55aaff']
								return colorList[params.data.type - 1];
							}
						}
					};
					// 根据item的内容来决定散点symbol
					// itemstyle可以直接用回调函数写就行了，
					// 但是symbol不支持回调函数，所以只能用for循环来设置
					seriesItem.symbol = symbolList[item.type - 1];
					seriesItem.data = [item];
					reuslt.push(seriesItem);
				});
				// 全数据散点图，无图标，只有数据
				// 经过试验，鼠标响应的是全数据的这张散点图
				// 很多网友反馈，当散点图只有一个点的时候，鼠标不响应
				let seriesItem = {
					type: 'scatter3D',
					coordinateSystem: 'geo3D',
					symbol:'none',
					symbolSize: 50,
					zlevel: 9,
					geo3DIndex: 0,
					regionHeight: 5, // 模型的高度
					shading: 'lambert',
					boxWidth: 120, // 三维地图在三维场景中的宽度
					boxDepth: 90, // 三维地图在三维场景中的深度
					silent: false,
					data:data
				};
				reuslt.push(seriesItem);
				return reuslt;
			}
		},
		created() {

		},

		mounted() {
			this.$nextTick(() => {
				this.initEchartMap();
			})

		}
	};
</script>

<style>

</style>

scatterData.json的内容：

[{
		"type": 1,
		"status": 0,
		"name": "上海市卫生监督所",
		"value": [121.478481, 31.402116, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "瑞金医院",
		"value": [121.263544, 31.378035, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海市肺科医院",
		"value": [121.502006, 31.301688, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海市东方医院",
		"value": [121.512287, 31.237613, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海交通大学医院",
		"value": [121.522361, 31.206991, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海市卫健委应急办",
		"value": [121.531758, 31.269437, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海市精神卫生中心",
		"value": [121.44806, 31.187265, 50]
	},
	{
		"type": 1,
		"status": 0,
		"name": "上海市疾病预防控制中心",
		"value": [121.417922, 31.193355, 50]
	},
	{
		"type": 2,
		"status": 0,
		"name": "上海外贸松江校区",
		"value": [121.217376, 31.046053, 50]
	},
	{
		"type": 3,
		"status": 0,
		"name": "金山山阳中学",
		"value": [121.367352, 30.760275, 50]
	},
	{
		"type": 2,
		"status": 1,
		"name": "南郊宾馆",
		"value": [121.483558, 30.925426, 50]
	}

]