问题描述:
网友求助说他用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>
效果图:
参考文章: