基于echarts开发的3D下钻地图
基于echarts开发的自动旋转map3D下钻和柱图地图，基本需求：
- 加载某地级市map3D地图，并实现单击下钻功能
- 自动旋转动画，提升视觉冲击力
- 增加bar3D柱图
项目分析
- map3D不支持动态散点图和自动区域板块轮播功能
- 自动旋转功能，设置viewControl对应属性
- series-bar3D，三维柱状图属性
地理数据对应映射表
/*各区县geojson地理数据对应映射表*/
var citys = {
'渝中区': 'yuzhong',
'万州区': 'wanzhou',
'涪陵区': 'fulin',
'大渡口区': 'dadukou',
'江北区': 'jiangbei',
'沙坪坝区': 'shapingba',
'九龙坡区': 'jiulongpo',
'南岸区': 'nanan',
'北碚区': 'beibei',
'綦江区': 'qijiang',
'大足区': 'dazu',
'渝北区': 'yubei',
'巴南区': 'banan',
'黔江区': 'qianjiang',
'长寿区': 'changshou',
'江津区': 'jiangjin',
'合川区': 'hechuan',
'永川区': 'yongchuan',
'南川区': 'nanchuan',
'璧山区': 'bishan',
'铜梁区': 'tongliang',
'潼南区': 'tongnan',
'荣昌区': 'rongchang',
'开州区': 'kaizhou',
'梁平区': 'liangping',
'武隆区': 'wulong',
'城口县': 'chengkou',
'丰都县': 'fengdu',
'垫江县': 'dianjiang',
'忠县': 'zhongxian',
'云阳县': 'yunyang',
'奉节县': 'fengjie',
'巫山县': 'wushan',
'巫溪县': 'wuxi',
'石柱土家族自治县': 'shizhu',
'秀山土家族苗族自治县': 'xiushan',
'酉阳土家族苗族自治县': 'youyang',
'彭水苗族土家族自治县': 'pengshui'
};
柱图数据源
/*柱图数据源
* wulong||nanan ,指对应区域映射的拼音
* 一般通过ajax传递分类数据即可
*/
var orData;
switch (barData) {
//武隆区柱图数据;
case "wulong":
orData = [{name: '武隆区', value: [107.771221, 29.342563, 60]}]
break;
//南岸区区柱图数据;
case "nanan":
orData = [{name: '南岸区', value: [106.673133, 29.502628, 120]}]
break;
//酉阳县区柱图数据;
case "youyang":
orData = [{name: '酉阳县', value: [108.586739, 28.98553, getNum()]}]
break;
//默认加载重庆市数据;
case undefined:
orData = [
{name: 'A位置', value: [106.556712, 29.536069, getNum()]},
{name: 'B位置', value: [107.395514, 29.706367, getNum()]},
{name: 'C位置', value: [107.771221, 29.342563, getNum()]},
{name: 'D位置', value: [106.038713, 29.863346, getNum()]},
{name: 'E位置', value: [107.837049, 29.730959, getNum()]},
{name: 'F位置', value: [108.586739, 28.98553, getNum()]},
{name: 'G位置', value: [108.755189, 31.8615, getNum()]},
{name: 'H位置', value: [109.086341, 31.152181, getNum()]},
]
break;
default:
}
初始化绘制地图配置
//初始化绘制地图配置
var option = {
title: {
text: '重庆市3D下钻效果',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal',
fontFamily: "Microsoft YaHei"
}
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: []
};
下钻封装函数
/*下钻封装函数
1. map,加载的地图名称;
2. data,地图各区域，可为空
3. barData,柱图数据
4. */
function renderMap(map, data, barData) {
option.title.subtext = map;
//显示三维地理坐标系组件;
option.geo3D =
{
show: false,
type: 'map3D',
name: 'map3D',
map: map,//地图注册名称;
viewControl: {
autoRotate: true,//自动旋转
minBeta: -3600,//每次旋转3600/360=10圈
maxBeta: 3600//每次旋转3600/360=10圈
},
zlevel: -20
};
/*配置柱状图选项*/
option.series = [
{
type: 'map3D',
map: map,
viewControl: {
autoRotate: true,
minBeta: -3600,
maxBeta: 3600
},
itemStyle: {
color: '#374151', // 地图配色
areaColor: '#374151',
opacity: 1,
borderWidth: 0.4,
borderColor: '#fff', // 地图边配色
},
label: {
show: false,
textStyle: {
color: '#fff', //地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
backgroundColor: 'rgba(0,23,11,0.8)'
},
},
emphasis: {
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'rgba(0,0,0,1)' //鼠标移入文字加背景
}
}
},
shading: 'lambert',
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
data: data
},
{
name: 'bar3D',
type: "bar3D",
coordinateSystem: 'geo3D',
barSize: 1.5,
shading: 'lambert',
opacity: 1,
bevelSize: 0.5,
label: {
show: true,
position: 'top',
textStyle: {
color: '#000',
fontSize: 12,
opacity: 1,
backgroundColor: 'rgba(255,255,255,0.7)'
},
formatter: function (params) {
return params.name + " " + params.value[2] + "万元" //柱图顶部标签
}
},
itemStyle: {
color: '#26e5ff',
},
data: barData,
}
];
地图点击事件
//地图点击事件；
chart.on('click', function (params) {
// console.log(params);
if (params.name in citys) {
//返回按钮；
$("#btn").removeClass("hidden");
//二级地图;
makeMap(params.name, 'map/city/' + citys[params.name] + '.json', citys[params.name]);
} else {
console.log("区域事件API接口;")
}
});
地图调用
$("#btn").click(function () {
$(this).addClass("hidden");
makeMap('重庆市', 'map/chongqing.json');
});
//加载地图;
makeMap('重庆市', 'map/chongqing.json');其他说明
地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问;
echarts.min.js、echarts-gl.min.js官方封装库必须向对应的版本，否则会导致地图渲染的问题和区域单击事件的失效（具体根据项目需求确定版本）
目录结构
├─index.html …默认启动页
├─map …geojson地理数据
│ ├─chongqing.json …重庆市地理数据
│ ├─city…各区县地理数据
├─js …JS封装库
│ ├─app.js …下钻核心库，具体见文件注释
lockdatav Done!
