3D地圖圖表效果如下:
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>銅仁市3D地圖(點擊地圖區域跳轉到相應頁面)</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts4.0.js"></script>
<script src="js/echarts-gl.js"></script>
</head>
<body>
<!-- 3D地圖容器 -->
<div id="main" style="width: 100%; height: 800px;"></div>
<script>
// 初始化圖表
var myChart = echarts.init(document.getElementById('main'));
// JSON文件(地圖數據)路徑
var uploadedDataURL = "json/522200.json";
// 顯示加載動畫效果,可以在加載數據前手動調用該接口顯示加載動畫，在數據加載完成后調用 hideLoading 隱藏加載動畫。
myChart.showLoading();
// 引入JSON文件
$.getJSON(uploadedDataURL, function(geoJson) {
// 注冊地圖名字(tongren)和數據(geoJson)
echarts.registerMap('tongren', geoJson);
// 隱藏動畫加載效果。
myChart.hideLoading();
// 圖表配置項
var option = {
title : { // 標題
top : '5%',
text : '銅仁市3D地圖',
subtext : '',
x : 'center',
textStyle : {
color : '#ccc'
}
},
tooltip : { // 提示框
trigger : 'item',
formatter : function(params) {
return params.name;
}
},
series: [{
type: 'map3D', // 系列類型
name: 'map3D', // 系列名稱
map: 'tongren', // 地圖類型。echarts-gl 中使用的地圖類型同 geo 組件相同(ECharts 中提供了兩種格式的地圖數據，一種是可以直接 script 標簽引入的 js 文件，引入后會自動注冊地圖名字和數據。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊。)
// 環境貼圖，支持純顏色值，漸變色，全景貼圖的 url。默認為 'auto'，在配置有 light.ambientCubemap.texture 的時候會使用該紋理作為環境貼圖。否則則不顯示環境貼圖。
environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 配置為垂直漸變的背景
offset: 0, color: '#00aaff' // 天空顏色
}, {
offset: 0.7, color: '#998866' // 地面顏色
}, {
offset: 1, color: '#998866' // 地面顏色
}], false),
label: { // 標簽的相關設置
show: true, // (地圖上的城市名稱)是否顯示標簽 [ default: false ]
//distance: 50, // 標簽距離圖形的距離，在三維的散點圖中這個距離是屏幕空間的像素值，其它圖中這個距離是相對的三維距離
//formatter:, // 標簽內容格式器
textStyle: { // 標簽的字體樣式
color: '#000', // 地圖初始化區域字體顏色
fontSize: 8, // 字體大小
opacity: 1, // 字體透明度
backgroundColor: 'rgba(0,23,11,0)' // 字體背景色
},
},
itemStyle: { // 三維地理坐標系組件 中三維圖形的視覺屬性，包括顏色，透明度，描邊等。
color: 'rgba(95,158,160,0.5)', // 地圖板塊的顏色
opacity: 1, // 圖形的不透明度 [ default: 1 ]
borderWidth: 0.5, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以更清晰的區分每個區域 [ default: 0 ]
borderColor: '#000' // 圖形描邊的顏色。[ default: #333 ]
},
emphasis: { // 鼠標 hover 高亮時圖形和標簽的樣式 (當鼠標放上去時 label和itemStyle 的樣式)
label: { // label高亮時的配置
show: true,
textStyle: {
color: '#fff', // 高亮時標簽顏色變為 白色
fontSize: 15, // 高亮時標簽字體 變大
}
},
itemStyle: { // itemStyle高亮時的配置
areaColor: '#66ffff', // 高亮時地圖板塊顏色改變
}
},
groundPlane: { // 地面可以讓整個組件有個“擺放”的地方，從而使整個場景看起來更真實，更有模型感。
show: false, // 是否顯示地面。[ default: false ]
color: '#aaa' // 地面顏色。[ default: '#aaa' ]
},
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: 'lambert', // 三維地理坐標系組件中三維圖形的着色效果，echarts-gl 中支持下面三種着色方式:
// 'color' 只顯示顏色，不受光照等其它因素的影響。
// 'lambert' 通過經典的 lambert 着色表現光照帶來的明暗。
// 'realistic' 真實感渲染，配合 light.ambientCubemap 和 postEffect 使用可以讓展示的畫面效果和質感有質的提升。ECharts GL 中使用了基於物理的渲染（PBR） 來表現真實感材質。
// realisticMaterial: {} // 真實感材質相關的配置項，在 shading 為'realistic'時有效。
// lambertMaterial: {} // lambert 材質相關的配置項，在 shading 為'lambert'時有效。
// colorMaterial: {} // color 材質相關的配置項，在 shading 為'color'時有效。
light: { // 光照相關的設置。在 shading 為 'color' 的時候無效。 光照的設置會影響到組件以及組件所在坐標系上的所有圖表。合理的光照設置能夠讓整個場景的明暗變得更豐富，更有層次。
main: { // 場景主光源的設置，在 globe 組件中就是太陽光。
color: '#fff', //主光源的顏色。[ default: #fff ]
intensity: 1.2, //主光源的強度。[ default: 1 ]
shadow: false, //主光源是否投射陰影。默認關閉。 開啟陰影可以給場景帶來更真實和有層次的光照效果。但是同時也會增加程序的運行開銷。
//shadowQuality: 'high', // 陰影的質量。可選'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
alpha: 55, // 主光源繞 x 軸，即上下旋轉的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10 // 主光源繞 y 軸，即左右旋轉的角度。[ default: 40 ]
},
ambient: { // 全局的環境光設置。
color: '#fff', // 環境光的顏色。[ default: #fff ]
intensity: 0.5 // 環境光的強度。[ default: 0.2 ]
}
},
viewControl: { // 用於鼠標的旋轉，縮放等視角控制。
projection: 'perspective', // 投影方式，默認為透視投影'perspective'，也支持設置為正交投影'orthographic'。
autoRotate: false, // 是否開啟視角繞物體的自動旋轉查看。[ default: false ]
autoRotateDirection: 'cw', // 物體自傳的方向。默認是 'cw' 也就是從上往下看是順時針方向，也可以取 'ccw'，既從上往下看為逆時針方向。
autoRotateSpeed: 10, // 物體自傳的速度。單位為角度 / 秒，默認為10 ，也就是36秒轉一圈。
autoRotateAfterStill: 3, // 在鼠標靜止操作后恢復自動旋轉的時間間隔。在開啟 autoRotate 后有效。[ default: 3 ]
damping: 0, // 鼠標進行旋轉，縮放等操作時的遲滯因子，在大於等於 1 的時候鼠標在停止操作后，視角仍會因為一定的慣性繼續運動（旋轉和縮放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋轉操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的旋轉靈敏度。默認為1, 設置為0后無法旋轉。 rotateSensitivity: [1, 0]——只能橫向旋轉； rotateSensitivity: [0, 1]——只能縱向旋轉。
zoomSensitivity: 1, // 縮放操作的靈敏度，值越大越靈敏。默認為1,設置為0后無法縮放。
panSensitivity: 1, // 平移操作的靈敏度，值越大越靈敏。默認為1,設置為0后無法平移。支持使用數組分別設置橫向和縱向的平移靈敏度
panMouseButton: 'left', // 平移操作使用的鼠標按鍵，支持：'left' 鼠標左鍵（默認）;'middle' 鼠標中鍵 ;'right' 鼠標右鍵(注意：如果設置為鼠標右鍵則會阻止默認的右鍵菜單。)
rotateMouseButton: 'left', // 旋轉操作使用的鼠標按鍵，支持：'left' 鼠標左鍵;'middle' 鼠標中鍵（默認）;'right' 鼠標右鍵(注意：如果設置為鼠標右鍵則會阻止默認的右鍵菜單。)
distance: 200, // [ default: 100 ] 默認視角距離主體的距離，對於 grid3D 和 geo3D 等其它組件來說是距離中心原點的距離,對於 globe 來說是距離地球表面的距離。在 projection 為'perspective'的時候有效。
minDistance: 40, // [ default: 40 ] 視角通過鼠標控制能拉近到主體的最小距離。在 projection 為'perspective'的時候有效。
maxDistance: 400, // [ default: 400 ] 視角通過鼠標控制能拉遠到主體的最大距離。在 projection 為'perspective'的時候有效。
alpha: 40, // 視角繞 x 軸，即上下旋轉的角度。配合 beta 可以控制視角的方向。[ default: 40 ]
beta: 15, // 視角繞 y 軸，即左右旋轉的角度。[ default: 0 ]
minAlpha: -360, // 上下旋轉的最小 alpha 值。即視角能旋轉到達最上面的角度。[ default: 5 ]
maxAlpha: 360, // 上下旋轉的最大 alpha 值。即視角能旋轉到達最下面的角度。[ default: 90 ]
minBeta: -360, // 左右旋轉的最小 beta 值。即視角能旋轉到達最左的角度。[ default: -80 ]
maxBeta: 360, // 左右旋轉的最大 beta 值。即視角能旋轉到達最右的角度。[ default: 80 ]
center: [0,0,0], // 視角中心點，旋轉也會圍繞這個中心點旋轉，默認為[0,0,0]。
animation: true, // 是否開啟動畫。[ default: true ]
animationDurationUpdate: 1000, // 過渡動畫的時長。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut' // 過渡動畫的緩動效果。[ default: cubicInOut ]
},
data: [{ // 可對單個地圖區域進行設置
name: '玉屏侗族自治縣', // 所對應的地圖區域的名稱
//regionHeight: '', // 區域的高度，可以設置不同的高度用來表達數據的大小。當 GeoJSON 為建築的數據時，也可以通過這個值表示簡直的高度。
itemStyle: { // 單個區域的樣式設置
color: '#00FF00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
}, {
name: '碧江區',
itemStyle: {
color: '#EEEE00',
opacity: 1,
borderWidth: 0.4,
borderColor: '#5F9EA0'
},
}]
}]
};
// 設置圖表實例的配置項以及數據，萬能接口，所有參數和數據的修改都可以通過setOption完成，ECharts 會合並新的參數和數據，然后刷新圖表。
myChart.setOption(option);
});
// 處理點擊事件並且跳轉到相應的百度搜索頁面
myChart.on('click', function (params) {
var subSystem = params.name;
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=';
// 根據點擊地圖區域的名稱,跳轉到對應頁面
if(subSystem == '德江縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '思南縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '江口縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '沿河土家自治縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '萬山區'){
window.open(url.concat(subSystem));
}else if(subSystem == '碧江區'){
window.open(url.concat(subSystem));
}else if(subSystem == '石阡縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '玉屏侗族自治縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '松桃苗族自治縣'){
window.open(url.concat(subSystem));
}else if(subSystem == '印江土家族苗族自治縣'){
window.open(url.concat(subSystem));
}
/*alert(params.name); */
});
</script>
</body>
</html>
想要使用Echarts的3D地圖，除了需要 echarts.js 之外，還需要 echarts-gl.js （WebGL 的擴展包，提供了豐富的三維可視化組件以及常規圖表的性能增強），以及相關的 json文件（3D地圖數據文件）。
echarts.js 和 echarts-gl.js 下載鏈接: http://echarts.baidu.com/download.html
至於3D地圖數據文件可根據需要自行百度，只是練習的話可參考：https://blog.csdn.net/gray_key/article/details/80197527
---------------------
作者：GRAY_KEY
來源：CSDN
原文：https://blog.csdn.net/GRAY_KEY/article/details/81295961
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！