echarts 在绘制地图的时候,为了美观,地图可能会使用自定义贴图,这里我们使用echarts + echarts-gl来实现3d地图自定义贴图实例。
完整代码实例
<script src="../../../js/echarts.min.js"></script>
<script src="../../../js/echarts-gl.min.js"></script>
<script>
// 获取数据
function getData() {
$.get('../../../js/data.json', function (data) {
getEcharts(data)
});
}
// 渲染echarts
function getEcharts(data) {
var chartDom = document.getElementById('echarts');
var myChart = echarts.init(chartDom);
var nameMap = '地图数据';
var mapData = []
echarts.registerMap(nameMap, data);
/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(nameMap).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function (v, index) {
// 地区名称
mapData.push({
name: v.properties.name,
value: Math.random() * 100
});
});
var optionMap = {
geo3D: {
map: nameMap,
roam: true,
itemStyle: {
areaColor: '#143f29',
opacity: 1,
borderWidth: 0.8,
borderColor: '#28cbcc',
color: '#fff'
},
shading: 'realistic',
realisticMaterial: {
detailTexture: '../../../images/gz-map.jpg',
roughness: 0,
textureTiling: 1
},
label: {
show: true,
color:'#fff',
textStyle: {
fontSize: 16,
opacity: 1,
backgroundColor: 'rgba(0,0,0,0)'
//backgroundColor: 'rgba(53,171,199,0)'
},
},
light: { //光照阴影
main: {
color: '#aab2af', //光照颜色
intensity: 1.8, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
}
},
};
myChart.setOption(optionMap);
}
if (window.location.origin == 'file://') {
setTimeout(() => {
getEcharts(gdMap)
}, 100)
} else {
getData()
}
</script>