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 的值改变就可以
文章来源
您阅读本篇文章共花了：
发表评论