echarts：map3D上的散点点击失效

问题描述：

网友求助说他用echarts做map3D图，想要点击散点，然后获取散点里的信息，但是点击失效，困扰好几天了。发了项目给我，仔细研究了一下结构，地图是geo3D，然后利用for循环，在上面加散点图，分别给每个散点设置不同的symbol和symbolsize等，散点数据以供12条，也就是说地图上放了12张散点图，每个散点图里只有一个散点，研究了半天，也没发现有什么异常。

解决过程：

百度了一圈，根据一个帖子的解决方法，把geo也加入到series里去，可以触发点击事件了，但是点击获取到的只是geo里包含的数据，散点的数据依旧没有。

搜了一圈，网上几乎就没有他这种情况，也许跟他项目本身有关，于是自己另外创建了一个demo，使用最新的echarts和echarts-gl，使用了同样的数据，但是偷了个懒，没有用for循环创建不同的散点，而是把12条数据都放在一个散点图里了，没想到奇迹发生了，散点可以点击了！

后来网上找到一篇文章，跟我们这个案例类似，图表里只有一个散点的时候，tooltip会失效，同理，click也会失效。

代码：

<template>
  <div>
      <div id="map"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import mapJson from '@/assets/map/json/province/shanghai.json'
export default {
  data() {
    return {
      //echart 配制option  
      options: {
        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'
			  }
		},
        series: [
		  {
			    type: 'scatter3D',
			    coordinateSystem: 'geo3D',
			    symbolSize: 30,
			    zlevel: 99,
			    geo3DIndex: 0,
			    silent: false,
			    itemStyle: {
			      opacity: 1,
			      width: 1
			    },
			    data: [
			        {
			          type: 1,
			          status: 0,
			          name: '上海市卫生监督所',
			          value: [121.478481, 31.402116, 100]
			        },
			        { type: 1, status: 0, name: '瑞金医院', value: [121.263544, 31.378035, 100] },
			        {
			          type: 1,
			          status: 0,
			          name: '上海市肺科医院',
			          value: [121.502006, 31.301688, 100]
			        },
			        {
			          type: 1,
			          status: 0,
			          name: '上海市东方医院',
			          value: [121.512287, 31.237613, 100]
			        },
			        {
			          type: 1,
			          status: 0,
			          name: '上海交通大学医院',
			          value: [121.522361, 31.206991, 100]
			        },
			        {
			          type: 1,
			          status: 0,
			          name: '上海市卫健委应急办',
			          value: [121.531758, 31.269437, 100]
			        },
			        {
			          type: 1,
			          status: 0,
			          name: '上海市精神卫生中心',
			          value: [121.44806, 31.187265, 100]
			        },
			        {
			          type: 1,
			          status: 0,
			          name: '上海市疾病预防控制中心',
			          value: [121.417922, 31.193355, 100]
			        },
			        {
			          type: 2,
			          status: 0,
			          name: '上海外贸松江校区',
			          value: [121.217376, 31.046053, 100]
			        },
			        {
			          type: 3,
			          status: 0,
			          name: '金山山阳中学',
			          value: [121.367352, 30.760275, 100]
			        },
			        { type: 2, status: 1, name: '南郊宾馆', value: [121.483558, 30.925426, 100] }
			      
			    ],
			    shading: 'lambert'
		  }
        ]
      },
    }
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('map');
      let myChart = echarts.init(mapDiv);
	  echarts.registerMap('shanghai', mapJson)
      myChart.setOption(this.options);
	   myChart.on('click',function(args){
	  			  console.log(args.data);
	  			  // if(args.data.name=='湖北'){
	  				 //  location.href = 'http://www.baidu.com';//测试效果
	  			  // }
	  		  })
    }
   
  },
  created() {
    
  },
  mounted() {
      this.$nextTick(()=>{
          this.initEchartMap();
      })
  }
};
</script>

<style>
  #map {
  	width: 100%;
  	height: 800px;
  }

</style>

效果图： 

参考文章：

echarts gl 加载 map3D click事件失效问题及解决方法.geo3D - 简书

Echarts中tooltip不显示 - SegmentFault 思否