echarts地图实现3d效果
【代码】echarts地图实现3d效果。
·
// 3d地图样式
geo: [
{
map: place,
aspectScale: 0.75,
center: center,
zoom: 1.2,
top: '9%',//***********重点**********距离顶部的位置,每层向下一个百分比
left: '11%',
roam: false,
z: 4,//*********重点*********可以看成是css的z-index,数字越大图层越高,我这里设置了5个,然后页面有点卡,根据实际需要来添加,3个其实就能看出效果了
regions: [
{ // 隐藏南海诸岛,因为顶层已经添加过了
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false
}
}
],
itemStyle: {
areaColor: '#004b75',//****重点****每个图层的背景色,根据需要来调,由亮变暗,下面的几个颜色也一样
borderColor: '#195175',
borderWidth: 2,
shadowColor: '#0f4c74',
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
},
{
map: place,
center: center,
top: '10.5%',//根据自己需要来设置
zoom: 1.2,
z: 5,
aspectScale: 0.75, // 地图长宽比
// scaleLimit: { // 放大缩小最大比例限制
// min: 0.8,
// max: 3,
// },
// 地图上显示地名
label: {
normal: {
show: true,
fontSize: '12',
color: '#fff'
},
emphasis: {
color:'#010D39',
},
// emphasis: {
// show: false
// }
},
// 地图拖拽
roam: false,
// 区域颜色
itemStyle: {
normal: {
areaColor:'rgb(9,86,187)',//地图颜色区域颜色
borderWidth:1,//设置外层边框
borderType:'dotted',//地图边框虚线
borderColor:'rgb(133,213,255)' //边界颜色
},
// 悬浮颜色
emphasis: {
show: false,
areaColor: '#2D7CAE',
}
},
}
],
更多推荐




所有评论(0)