问题描述
借助Echart 及相关的库去实现3D地图时提示如下错误
解决
echart版本太低导致的,升级echart版本到4.5.0(发表该片博文是最先版本)就解决了该问题
相关代码
<div id="map" style="width: 100%;height: 100%;"></div>
<script src="js/echarts.min.js"></script>
<script src="js/map/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 百度地图china.js 自己删减代码, 然后注册生huanan地图,方便下面应用,也可以直接用china.js geo3D属性中的map设置为'china'即可 -->
<script src="js/map/huanan.js" type="text/javascript" charset="utf-8"></script>
<script src="js/datacenter.js"></script>
datacenter.js
let myMap = echarts.init(document.getElementById("map"))
option = {
geo3D: {
map: '华南',
boxheight: 8,
itemStyle: {
areaColor: 'rgb(5,101,123)',
opacity: 1,
borderWidth: 2,
borderColor: 'rgb(62,215,213)'
},
label: {
show: false,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 16,
opacity: 1,
backgroundColor: 'rgba(0,0,0,0)'
//backgroundColor: 'rgba(53,171,199,0)'
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 16,
backgroundColor: 'rgba(0,23,11,0)'
}
}
},
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: false, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
viewControl: {
distance: 110
},
top:10,
left:10,
right: 10,
bottom: 10
}
};
myMap.setOption(option)