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',
}
},
}
],
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)