vue echarts-gl geo3D 地图 点击层级叠加
1.地图的每个地图板块单独设置背景颜色
regions: [
{
name: '省份名称',
itemStyle: {
color: '#ff6600'
}
},...]
2.地图的旋转 移动等等...
viewControl: {
autoRotate: false,
beta: 0, // x轴旋转
alpha: 65, // Y轴旋转
// panMouseButton: 'center', // 平移操作使用的鼠标按键
// rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
rotateSensitivity: 0, // 禁止旋转地图
// // 下面的四个参数 可以实现禁止缩放地图
projection: 'orthographic',
orthographicSize: 95,
maxOrthographicSize: 95,
minOrthographicSize: 95
}
3.地图的层级
regionHeight: 3, // 修改整个地图的三维高度,
4.鼠标放上去的高亮
emphasis的属性没有起作用,这里用了silent: true 为true时取消地图高亮
5.地图的点击事件
geo3D地图 本来没有点击事件 需要添加一个点击的数据区域 也就是在上面添加一层地图 让上面的地图成为可点击的数据区域 (上面的地图配置和下面的地图配置要一致 位置啥的保持一致 不然点击的区域可能会有偏移)
展示地图
geo3D: { type: 'map3D', boxWidth: 70, bottom: 50, map: '1212', // 注册地图的名字 itemStyle: { color: '#4189f2', // 背景颜色 opacity: 1, // 透明度 borderWidth: 0.8, borderColor: '#fff' }, // 地图单个板块标签样式 label: { show: false, textStyle: { show: false, // 字体样式 color: '#fff', opacity: 1, fontSize: 16, backgroundColor: 'transparent' } }, // 鼠标放入高亮时地图板块的样式 silent: true, // 每个地图板块单独设置背景颜色 regions: [ { name: '123', // 你要显示的省份名称 itemStyle: { color: '#ff6600' } }, ], regionHeight: 3, // 修改整个地图的三维高度, viewControl: { autoRotate: false, beta: 0, // x轴旋转 alpha: 65, // Y轴旋转 // panMouseButton: 'center', // 平移操作使用的鼠标按键 // rotateMouseButton: 'left', // 旋转操作使用的鼠标按键 rotateSensitivity: 0, // 禁止旋转地图 // // 下面的四个参数 可以实现禁止缩放地图 projection: 'orthographic', orthographicSize: 95, maxOrthographicSize: 95, minOrthographicSize: 95 } },数据地图
{ type: 'map3D', // 新增一条数据区域图标 map: '名称', roam: false, boxWidth: 70, bottom: 50, itemStyle: { opacity: 0 // 设置透明度后,就不影响原来的图配色等功能 }, zlevel: 100, // 设置层级,如不设置假如其他图标高则无法触发点击事件 data: [], viewControl: { autoRotate: false, beta: 0, // x轴旋转 alpha: 65, // Y轴旋转 // panMouseButton: 'center', // 平移操作使用的鼠标按键 // rotateMouseButton: 'left', // 旋转操作使用的鼠标按键 rotateSensitivity: 0, // 禁止旋转地图 // // 下面的四个参数 可以实现禁止缩放地图 projection: 'orthographic', orthographicSize: 95, maxOrthographicSize: 95, minOrthographicSize: 95 }, itemStyle: { show: false, color: '#22c9fb' } } },这个地方会发现 数据区域没有设置关闭鼠标的高亮操作 是因为如果这个数据区域的地图也设置了的话 会起不到点击作用
6.地图上的行政区划
这个地方有点拉跨 在seiers中又加了一个地图
地图可以加进去 但是出现的问题就是整个页面会变得卡顿 (有大佬可以给个好的建议)
7.点击的时候层级叠加
很简单 地图的点击事件 然后将regionHeight: 3 的值改变就可以
更多推荐




所有评论(0)