image.png
ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
用json文件会在谷歌浏览器上会出现跨域的问题，在这里用的是直接引入beijing.js（需要下载数据文件）文件。
city.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src='js/jquery.js'></script> -->
<title>map3D</title>
</head>
<body>
<div style="width:1200px;height: 800px;margin: auto;">
<div id="main" style="width: 100%;height:800px;"></div>
</div>
</body>
<script src="js/echarts.min.js"></script>
<script src='js/echarts-gl.js'></script>
<script src="js/beijing.js"></script>
<script src="js/map3d.js"></script>
</html>
map3d.js
var myChart = echarts.init(document.getElementById('main'));
var data = [
{name: '延庆区', selected: false,value: 1},
{name: '怀柔区', selected: false,value: 2},
{name: '密云区', selected: false,value: 3},
{name: '平谷区', selected: false,value: 4},
{name: '顺义区', selected: false,value: 5},
{name: '昌平区', selected: false,value: 6},
{name: '海淀区', selected: false,value: 7},
{name: '西城区', selected: false,value: 8},
{name: '东城区', selected: false,value: 9},
{name: '朝阳区', selected: false,value: 10},
{name: '通州区', selected: false,value: 11},
{name: '大兴区', selected: false,value: 12},
{name: '丰台区', selected: false,value: 13},
{name: '房山区', selected: false,value: 14},
{name: '石景山区', selected: false,value: 15},
{name: '门头沟区', selected: false,value: 16}
];
var splitList = [
{start:1, end:1, label: '延庆区', color: '#cfc5de'},
{start:2, end:2, label: '怀柔区', color: '#f1ebd1'},
{start:3, end:3, label: '密云区', color: '#feffdb'},
{start:4, end:4, label: '平谷区', color: '#e0cee4'},
{start:5, end:5, label: '顺义区', color: '#fde8cd'},
{start:6, end:6, label: '昌平区', color: '#e4f1d7'},
{start:7, end:7, label: '海淀区', color: '#fffed7'},
{start:8, end:8, label: '西城区', color: '#e4f1d7'},
{start:9, end:9, label: '东城区', color: '#e4f1d7'},
{start:10, end:10, label: '朝阳区', color: '#fffed7'},
{start:11, end:11, label: '通州区', color: '#fffed8'},
{start:12, end:12, label: '大兴区', color: '#dccee7'},
{start:13, end:13, label: '丰台区', color: '#fffed7'},
{start:14, end:14, label: '房山区', color: '#fce8cd'},
{start:15, end:15, label: '石景山区', color: '#ddceeb'},
{start:16, end:16, label: '门头沟区', color: '#e4f1d3'}
];
var options = {
series: [{
type: 'map3D',
map: '北京',
name: '北京',
boxDepth: 100,//地图倾斜度
regionHeight: 5,//地图厚度
// environment: 'imgs/19.jpeg',
//环境贴图，这里用的是渐变色
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#09C7F7' // 天空颜色
}, {
offset: 0.7, color: '#fff' // 地面颜色
}, {
offset: 1, color: '#A2875E' // 地面颜色
}], false),
// 标签设置
label: {
show: true,//是否显示市
// formatter: '{b} : test{c}',
textStyle: {
color: "#000",//文字颜色
fontSize: 16,//文字大小
fontFamily: '微软雅黑',
// opacity: 0,
backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
},
},
//三维视觉属性
itemStyle: {
opacity: 1, // 透明度
// color: '#4575b4',//地图颜色
borderWidth: 1.5,//分界线宽度
borderColor: "#459bca",//分界线颜色
},
// 鼠标hover高亮
emphasis: {
label: {
show: true,//是否显示标签
textStyle: {
color: 'yellow',//高亮文字颜色
fontSize: 32,
fontFamily: '微软雅黑'
},
formatter: '{b}: {c}'
},
//高亮区块颜色
// itemStyle: {
// color: '#000'
// }
},
groundplane: {
show: false
},
data: data,
//用了没有效果，还没找到原因，求指点
regions: [
{ // 可对单个地图区域进行设置
name: '昌平区', // 所对应的地图区域的名称
//regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
itemStyle: { // 单个区域的样式设置
color: '#00FF00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
}, {
name: '海淀区',
itemStyle: {
color: '#EEEE00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
}
}
],
/*
shading三维图形的着色效果,值：
'color'只显示颜色，不受光照等因素影响。
'lambert'通过景点的lambert着色表现光照的明暗
'realistic'真是感渲染
*/
shading: 'realistic',
// 真实感材质相关配置 shading: 'realistic'时有效
realisticMaterial: {
detailTexture: '#fff', // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
metalness: 0, // 0材质是非金属 ，1金属
roughnessAdjust: 0
},
viewControl: {
distance: 150,// 地图视角 控制初始大小
rotateSensitivity: 1,// 旋转
zoomSensitivity: 1,// 缩放
},
// postEffect: {
// enable: true
// }
}],
dataRange: {
splitList: splitList
},
// ECharts 视觉映射「visualMap」组件 注释掉 dataRange 后可查看效果
// visualMap: {
// show: false,
// min: 0,
// max: 15,
// inRange: {
// color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
// }
// }
}
myChart.setOption(options);
以上是简单的绘制出地方地图，其他效果需要根据官网api继续添加配置。
网友评论