bug：版本號(hào)必須匹配文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-638236.html
npm install echarts@4.2.1 --save
npm install echarts-gl@1.1.2 --save
map.vue
<template>
<div class="middle-top-map" id="dMap"></div>
</template>
<script>
// npm install echarts@4.2.1 --save
// npm install echarts-gl@1.1.2 --save
import * as echarts from 'echarts'
import 'echarts-gl' // echarts 3D插件
const MapData = require('../components/js/hunan.json')
export default {
name: 'dMap',
data() {
return {
config: {}
}
},
mounted() {
echarts.registerMap('hunan', MapData)
const myCharts = echarts.init(document.getElementById('dMap'))
myCharts.setOption({
title: {
// 標(biāo)題
// top: '5%',
// text: '相城區(qū)3D地圖',
// subtext: '',
// x: 'center',
// textStyle: {
// color: '#ccc',
// fontSize: 38
// }
},
// visualMap: {
// left: 'right',
// min: 500000,
// max: 38000000,
// inRange: {
// color: [
// '#313695',
// '#4575b4',
// '#74add1',
// '#abd9e9',
// '#e0f3f8',
// '#ffffbf',
// '#fee090',
// '#fdae61',
// '#f46d43',
// '#d73027',
// '#a50026'
// ]
// },
// text: ['High', 'Low'],
// calculable: true
// },
series: [
{
type: 'map3D',
map: 'hunan',
name: '相城3D地圖',
data: [],
// 環(huán)境貼圖，支持純顏色值，漸變色，全景貼圖的 url。默認(rèn)為 'auto'，在配置有 light.ambientCubemap.texture 的時(shí)候會(huì)使用該紋理作為環(huán)境貼圖。否則則不顯示環(huán)境貼圖。
environment: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
// 配置為垂直漸變的背景
offset: 0,
color: 'rgba(0, 170, 255, .4)' // 天空顏色
},
{
offset: 0.7,
color: 'rgba(153, 136, 102, .4)' // 地面顏色
},
{
offset: 1,
color: 'rgba(153, 136, 102, .4)' // 地面顏色
}
],
false
),
label: {
// 標(biāo)簽的相關(guān)設(shè)置
show: true, // (地圖上的城市名稱(chēng))是否顯示標(biāo)簽 [ default: false ]
// distance: 50, // 標(biāo)簽距離圖形的距離，在三維的散點(diǎn)圖中這個(gè)距離是屏幕空間的像素值，其它圖中這個(gè)距離是相對(duì)的三維距離
// formatter:, // 標(biāo)簽內(nèi)容格式器
textStyle: {
// 標(biāo)簽的字體樣式
color: '#1DE9B6', // 地圖初始化區(qū)域字體顏色
// color: '#000', // 地圖初始化區(qū)域字體顏色
fontSize: 14, // 字體大小
opacity: 1, // 字體透明度
backgroundColor: 'rgba(0,23,11,1)' // 字體背景色
}
},
itemStyle: {
// 三維地理坐標(biāo)系組件 中三維圖形的視覺(jué)屬性，包括顏色，透明度，描邊等。
color: 'rgba(58, 115, 192,.2)', // 地圖板塊的顏色
// color: 'rgba(95,158,160,0.5)', // TODO地圖板塊的顏色
opacity: 1, // 圖形的不透明度 [ default: 1 ]
borderWidth: 1, // (地圖板塊間的分隔線)圖形描邊的寬度。加上描邊后可以更清晰的區(qū)分每個(gè)區(qū)域 [ default: 0 ]
borderColor: 'rgb(147, 235, 248)' // 圖形描邊的顏色。[ default: #333 ]
// borderColor: '#000' // TODO圖形描邊的顏色。[ default: #333 ]
},
emphasis: {
// 鼠標(biāo) hover 高亮?xí)r圖形和標(biāo)簽的樣式 (當(dāng)鼠標(biāo)放上去時(shí) label和itemStyle 的樣式)
label: {
// TODO label高亮?xí)r的配置
show: true
// textStyle: {
// color: '#fff', // 高亮?xí)r標(biāo)簽顏色變?yōu)?白色
// fontSize: 15 // 高亮?xí)r標(biāo)簽字體 變大
// }
},
itemStyle: {
// TODO itemStyle高亮?xí)r的配置
color: '#ccc' // 高亮?xí)r地圖板塊顏色改變
// color: '#66ffff' // 高亮?xí)r地圖板塊顏色改變
}
},
groundPlane: {
// 地面可以讓整個(gè)組件有個(gè)“擺放”的地方，從而使整個(gè)場(chǎng)景看起來(lái)更真實(shí)，更有模型感。
show: false, // 是否顯示地面。[ default: false ]
color: '#aaa' // 地面顏色。[ default: '#aaa' ]
},
shading: 'lambert', // 三維地理坐標(biāo)系組件中三維圖形的著色效果，echarts-gl 中支持下面三種著色方式:
// 'color' 只顯示顏色，不受光照等其它因素的影響。
// 'lambert' 通過(guò)經(jīng)典的 lambert 著色表現(xiàn)光照帶來(lái)的明暗。
// 'realistic' 真實(shí)感渲染，配合 light.ambientCubemap 和 postEffect 使用可以讓展示的畫(huà)面效果和質(zhì)感有質(zhì)的提升。ECharts GL 中使用了基于物理的渲染（PBR） 來(lái)表現(xiàn)真實(shí)感材質(zhì)。
// realisticMaterial: {} // 真實(shí)感材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'realistic'時(shí)有效。
// lambertMaterial: {} // lambert 材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'lambert'時(shí)有效。
// colorMaterial: {} // color 材質(zhì)相關(guān)的配置項(xiàng)，在 shading 為'color'時(shí)有效。
light: {
// 光照相關(guān)的設(shè)置。在 shading 為 'color' 的時(shí)候無(wú)效。 光照的設(shè)置會(huì)影響到組件以及組件所在坐標(biāo)系上的所有圖表。合理的光照設(shè)置能夠讓整個(gè)場(chǎng)景的明暗變得更豐富，更有層次。
main: {
// 場(chǎng)景主光源的設(shè)置，在 globe 組件中就是太陽(yáng)光。
color: '#fff', // 主光源的顏色。[ default: #fff ]
intensity: 1.2, // 主光源的強(qiáng)度。[ default: 1 ]
shadow: false, // 主光源是否投射陰影。默認(rèn)關(guān)閉。 開(kāi)啟陰影可以給場(chǎng)景帶來(lái)更真實(shí)和有層次的光照效果。但是同時(shí)也會(huì)增加程序的運(yùn)行開(kāi)銷(xiāo)。
// shadowQuality: 'high', // 陰影的質(zhì)量?？蛇x'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
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.5 // 環(huán)境光的強(qiáng)度。[ default: 0.2 ]
}
},
viewControl: {
// 用于鼠標(biāo)的旋轉(zhuǎn)，縮放等視角控制。
projection: 'perspective', // 投影方式，默認(rèn)為透視投影'perspective'，也支持設(shè)置為正交投影'orthographic'。
autoRotate: false, // 是否開(kāi)啟視角繞物體的自動(dòng)旋轉(zhuǎn)查看。[ default: false ]
autoRotateDirection: 'cw', // 物體自傳的方向。默認(rèn)是 'cw' 也就是從上往下看是順時(shí)針?lè)较?，也可以?'ccw'，既從上往下看為逆時(shí)針?lè)较颉?/span>
autoRotateSpeed: 10, // 物體自傳的速度。單位為角度 / 秒，默認(rèn)為10 ，也就是36秒轉(zhuǎn)一圈。
autoRotateAfterStill: 3, // 在鼠標(biāo)靜止操作后恢復(fù)自動(dòng)旋轉(zhuǎn)的時(shí)間間隔。在開(kāi)啟 autoRotate 后有效。[ default: 3 ]
damping: 0, // 鼠標(biāo)進(jìn)行旋轉(zhuǎn)，縮放等操作時(shí)的遲滯因子，在大于等于 1 的時(shí)候鼠標(biāo)在停止操作后，視角仍會(huì)因?yàn)橐欢ǖ膽T性繼續(xù)運(yùn)動(dòng)（旋轉(zhuǎn)和縮放）。[ default: 0.8 ]
rotateSensitivity: 1, // 旋轉(zhuǎn)操作的靈敏度，值越大越靈敏。支持使用數(shù)組分別設(shè)置橫向和縱向的旋轉(zhuǎn)靈敏度。默認(rèn)為1, 設(shè)置為0后無(wú)法旋轉(zhuǎn)。 rotateSensitivity: [1, 0]——只能橫向旋轉(zhuǎn)； rotateSensitivity: [0, 1]——只能縱向旋轉(zhuǎn)。
zoomSensitivity: 1, // 縮放操作的靈敏度，值越大越靈敏。默認(rèn)為1,設(shè)置為0后無(wú)法縮放。
panSensitivity: 1, // 平移操作的靈敏度，值越大越靈敏。默認(rèn)為1,設(shè)置為0后無(wú)法平移。支持使用數(shù)組分別設(shè)置橫向和縱向的平移靈敏度
panMouseButton: 'left', // 平移操作使用的鼠標(biāo)按鍵，支持：'left' 鼠標(biāo)左鍵（默認(rèn)）;'middle' 鼠標(biāo)中鍵 ;'right' 鼠標(biāo)右鍵(注意：如果設(shè)置為鼠標(biāo)右鍵則會(huì)阻止默認(rèn)的右鍵菜單。)
rotateMouseButton: 'left', // 旋轉(zhuǎn)操作使用的鼠標(biāo)按鍵，支持：'left' 鼠標(biāo)左鍵;'middle' 鼠標(biāo)中鍵（默認(rèn)）;'right' 鼠標(biāo)右鍵(注意：如果設(shè)置為鼠標(biāo)右鍵則會(huì)阻止默認(rèn)的右鍵菜單。)
distance: 80, // [ default: 100 ] 默認(rèn)視角距離主體的距離，對(duì)于 grid3D 和 geo3D 等其它組件來(lái)說(shuō)是距離中心原點(diǎn)的距離,對(duì)于 globe 來(lái)說(shuō)是距離地球表面的距離。在 projection 為'perspective'的時(shí)候有效。
// distance: 200, // [ default: 100 ] 默認(rèn)視角距離主體的距離，對(duì)于 grid3D 和 geo3D 等其它組件來(lái)說(shuō)是距離中心原點(diǎn)的距離,對(duì)于 globe 來(lái)說(shuō)是距離地球表面的距離。在 projection 為'perspective'的時(shí)候有效。
minDistance: 40, // [ default: 40 ] 視角通過(guò)鼠標(biāo)控制能拉近到主體的最小距離。在 projection 為'perspective'的時(shí)候有效。
maxDistance: 400, // [ default: 400 ] 視角通過(guò)鼠標(biāo)控制能拉遠(yuǎn)到主體的最大距離。在 projection 為'perspective'的時(shí)候有效。
alpha: 40, // 視角繞 x 軸，即上下旋轉(zhuǎn)的角度。配合 beta 可以控制視角的方向。[ default: 40 ]
beta: 15, // 視角繞 y 軸，即左右旋轉(zhuǎn)的角度。[ default: 0 ]
// minAlpha: -360, // 上下旋轉(zhuǎn)的最小 alpha 值。即視角能旋轉(zhuǎn)到達(dá)最上面的角度。[ default: 5 ]
// maxAlpha: 360, // 上下旋轉(zhuǎn)的最大 alpha 值。即視角能旋轉(zhuǎn)到達(dá)最下面的角度。[ default: 90 ]
// minBeta: -360, // 左右旋轉(zhuǎn)的最小 beta 值。即視角能旋轉(zhuǎn)到達(dá)最左的角度。[ default: -80 ]
// maxBeta: 360, // 左右旋轉(zhuǎn)的最大 beta 值。即視角能旋轉(zhuǎn)到達(dá)最右的角度。[ default: 80 ]
center: [0, 0, 0], // 視角中心點(diǎn)，旋轉(zhuǎn)也會(huì)圍繞這個(gè)中心點(diǎn)旋轉(zhuǎn)，默認(rèn)為[0,0,0]
animation: true, // 是否開(kāi)啟動(dòng)畫(huà)。[ default: true ]
animationDurationUpdate: 1000, // 過(guò)渡動(dòng)畫(huà)的時(shí)長(zhǎng)。[ default: 1000 ]
animationEasingUpdate: 'cubicInOut' // 過(guò)渡動(dòng)畫(huà)的緩動(dòng)效果。[ default: cubicInOut ]
}
}
]
})
myCharts.on('click', (res => {
console.log(888, res, res.data.name)
}))
}
}
</script>
<style lang="scss">
.middle-top-map {
width: 100%;
height: 100%;
}
</style>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-638236.html
到了這里，關(guān)于echarts實(shí)現(xiàn)3D地圖——map3D的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
