echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地圖
一、使用插件
echarts@5.2.2、echarts-gl@2.0.8、jquery;jquery 是使用ajax加載json文件的。
二、準(zhǔn)備地圖json文件
因?yàn)檎伊艘蝗?，網(wǎng)上的地圖js文件都需要花錢去購(gòu)買，json文件可以在阿里云數(shù)據(jù)可視化平臺(tái)下載，下載鏈接為：免費(fèi)地圖json文件下載
ECharts 提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接通過(guò) script 標(biāo)簽引入的 js 文件，引入后會(huì)自動(dòng)注冊(cè)地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過(guò) AJAX 異步加載后手動(dòng)注冊(cè)。
下面是兩種類型的使用使用示例：
// javascript引入示例 <script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); </script>// json引入示例 $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); });
三、上代碼（含詳細(xì)注釋）
文件目錄
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602608.html
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d地圖</title>
<style>
*{
padding: 0;
margin: 0;
}
.chart{
width: 100vw;
height: 100vh;
background-color: #020202;
}
</style>
</head>
<body>
<div class="chart" id="chart"></div>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./mapData/echarts.js"></script>
<script src="./mapData/echarts-gl.js"></script>
<script>
let chart = null;
// 圖表配置
let options = {};
// 地圖貼圖圖片
let bg = '';
// 視圖容器
const chartEle = document.getElementById('chart');
// geo3d + map3d公用圖表配置
const setting = {
top: '0%',
right: '0%',
bottom: '-20%',
distance: 90,
alpha: 50,
beta: 5,
regionHeight: 6,
}
// 地圖上顯示的數(shù)據(jù)
const mapData = {
geoCoordMap: {
廣東省: [113.429919, 23.334643, 50],
云南省: [101.485106, 25.008643, 50],
遼寧省: [122.604994, 41.299712, 50],
},
projectData: [
{ name: '廣東省', value: (Math.random() * 300).toFixed(2), projectName: 'OA系統(tǒng)' },
{ name: '云南省', value: (Math.random() * 300).toFixed(2), projectName: '項(xiàng)目管理系統(tǒng)' },
{ name: '遼寧省', value: (Math.random() * 300).toFixed(2), projectName: '人工智能園區(qū)' },
],
}
// 適配不同尺寸瀏覽器，避免地圖上的字號(hào)過(guò)小或過(guò)大
function getSize(res) {
const docEl = document.documentElement;
const clientWidth = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
// 轉(zhuǎn)化已有數(shù)據(jù)到地圖上顯示的配置數(shù)據(jù)
function convertData(data) {
const res = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < data.length; i++) {
const geoCoord = mapData.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
projectName: data[i].projectName,
label: {
show: true,
position: 'top',
distance: -5,
formatter(param) {
return `{sty1|${param.data.projectName}}`;
},
rich: {
sty1: {
padding: getSize(0.07),
backgroundColor: 'rgba(7, 28, 38, 0.7)',
borderWidth: 1,
borderColor: '#FF771A',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
textStyle: {
color: '#ffffff',
},
},
emphasis: {
label: {
show: true,
position: 'top',
distance: 0,
formatter(param) {
return `{sty1|${param.data.projectName}}`;
},
rich: {
sty1: {
padding: 7,
backgroundColor: 'rgba(7, 28, 38, 0.7)',
borderWidth: 1,
borderColor: '#FF771A',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
textStyle: {
color: '#ffffff',
},
},
},
});
}
}
return res;
}
// 獲取圖表配置
function getOptions() {
const options = {
tooltip: {
show: false,
trigger: 'item',
},
textStyle: {
color: '#ffffff', // 高亮?xí)r標(biāo)簽顏色變?yōu)?白色
fontSize: 6, // 高亮?xí)r標(biāo)簽字體 變大
},
// 地圖主要配置
geo3D: {
show: true,
map: 'map',
boxHeight: 10,
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight, // 三維高度
shading: 'realistic',
realisticMaterial: {
detailTexture: bg, // 紋理貼圖
textureTiling: 1, // 紋理平鋪，1是拉伸，數(shù)字表示紋理平鋪次數(shù)
},
label: { // 標(biāo)簽的相關(guān)設(shè)置
show: true, // (地圖上的城市名稱)是否顯示標(biāo)簽 [ default: false ]
distance: 20,
formatter(param) {
const city = (param.name).substr(0, 2);
return `{sty1|${city}}`;
},
rich: {
sty1: {
color: '#ffffff',
fontSize: getSize(0.14),
align: 'center',
},
},
textStyle: { // 標(biāo)簽的字體樣式
color: '#ffffff', // 地圖初始化區(qū)域字體顏色
opacity: 1, // 字體透明度
},
},
itemStyle: { // 三維地理坐標(biāo)系組件 中三維圖形的視覺(jué)屬性，包括顏色，透明度，描邊等。
color: '#FE9D0B', // 地圖板塊的顏色
// color: '#00F6FF',
opacity: 1, // 圖形的不透明度 [ default: 1 ]
borderWidth: 1, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以更清晰的區(qū)分每個(gè)區(qū)域 [ default: 0 ]
borderColor: '#A74A11', // 圖形描邊的顏色。[ default: #333 ]
},
emphasis: { // 鼠標(biāo) hover 高亮?xí)r圖形和標(biāo)簽的樣式 (當(dāng)鼠標(biāo)放上去時(shí) label和itemStyle 的樣式)
label: { // label高亮?xí)r的配置
show: true,
textStyle: {
color: '#fff', // 高亮?xí)r標(biāo)簽顏色變?yōu)?白色
fontSize: getSize(0.15), // 高亮?xí)r標(biāo)簽字體 變大
},
},
},
light: { // 光照相關(guān)的設(shè)置。在 shading 為 'color' 的時(shí)候無(wú)效。
// 光照的設(shè)置會(huì)影響到組件以及組件所在坐標(biāo)系上的所有圖表。合理的光照設(shè)置能夠讓整個(gè)場(chǎng)景的明暗變得更豐富，更有層次。
main: { // 場(chǎng)景主光源的設(shè)置，在 globe 組件中就是太陽(yáng)光。
color: '#ffeeee', // 主光源的顏色。[ default: #fff ]
intensity: 1.1, // 主光源的強(qiáng)度。[ default: 1 ]
shadow: true, // 主光源是否投射陰影。默認(rèn)關(guān)閉。 開(kāi)啟陰影可以給場(chǎng)景帶來(lái)更真實(shí)和有層次的光照效果。但是同時(shí)也會(huì)增加程序的運(yùn)行開(kāi)銷。
alpha: 55, // 主光源繞 x 軸，即上下旋轉(zhuǎn)的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10, // 主光源繞 y 軸，即左右旋轉(zhuǎn)的角度。[ default: 40 ]
},
ambient: { // 全局的環(huán)境光設(shè)置。
color: '#fff', // 環(huán)境光的顏色。[ default: #fff ]
intensity: 0.1, // 環(huán)境光的強(qiáng)度。[ default: 0.2 ]
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
series: [
// 疊加地圖上需要顯示的數(shù)據(jù)，插牌
{
type: 'scatter3D',
name: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
symbolSize: [4, 28],
itemStyle: {
color: '#FF771A',
opacity: 1,
},
data: convertData(mapData.projectData),
},
// 使用和geo3d的配置數(shù)據(jù)，疊加一層暗沉的厚度
{
name: 'map3D', // series名稱
type: 'map3D', // series圖表類型
map: 'map',
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight - 0.2, // 三維高度
label: { // 標(biāo)簽的相關(guān)設(shè)置
show: false, // (地圖上的城市名稱)是否顯示標(biāo)簽 [ default: false ]
},
itemStyle: { // 三維地理坐標(biāo)系組件 中三維圖形的視覺(jué)屬性，包括顏色，透明度，描邊等。
color: '#95830A', // 地圖板塊的顏色
opacity: 1, // 圖形的不透明度 [ default: 1 ]
borderWidth: 0, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以清晰的區(qū)分每個(gè)區(qū)域
borderColor: '#A74A11', // 圖形描邊的顏色。[ default: #333 ]
},
emphasis: { // 鼠標(biāo)hover 高亮?xí)r圖形和標(biāo)簽的樣式 (當(dāng)鼠標(biāo)放上去時(shí) label和itemStyle 的樣式)
label: { // label高亮?xí)r的配置
show: false,
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
],
};
return options;
}
// 初始化圖標(biāo)
function init() {
const that = this;
if (chart) {
chart.clear();
}
// 加載貼圖材質(zhì)圖片
const img = document.createElement('img');
img.src = 'mapData/ebg.jpg';
bg = img;
// 初始化
chart = echarts.init(chartEle);
chart.showLoading({
maskColor: 'rgba(0, 0, 0, 0.2)',
});
// 獲取地圖數(shù)據(jù)
$.getJSON('mapData/nation.json', (json) => {
echarts.registerMap('map', json);
chart.hideLoading();
options = getOptions();
chart.setOption(options);
setTimeout(() => {
window.addEventListener('resize', () => {
that.chart.resize();
that.init();
});
}, 200);
});
}
// 執(zhí)行
init();
</script>
</body>
</html>
效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-602608.html
到了這里，關(guān)于echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
