基本3D地球的實(shí)現(xiàn)
import * as echarts from 'echarts'
import 'echarts-gl'
const chartDom = document.getElementById('earth')
const myChart = echarts.init(chartDom)
myChart.setOption({
globe: {
baseTexture: 'https://images-1308194867.cos.ap-beijing.myqcloud.com/images/home/world.jpg', //地球的紋理。支持圖片路徑的字符 串，圖片或者 Canvas 的對(duì)象
shading: 'lambert', //地球中三維圖形的著色效果
atmosphere: {
show: true, //顯示大氣層
offset: 8,
color: '#13315E'
},
light: {
ambient: {
intensity: 0.8 //環(huán)境光源強(qiáng)度
}, //環(huán)境光
main: {
intensity: 0.2 //光源強(qiáng)度
}
},
viewControl: {
autoRotate: true, // 是否開啟視角繞物體的自動(dòng)旋轉(zhuǎn)查看
autoRotateSpeed: 3, //物體自轉(zhuǎn)的速度,單位為角度 / 秒，默認(rèn)為10 ，也就是36秒轉(zhuǎn)一圈。
autoRotateAfterStill: 2, // 在鼠標(biāo)靜止操作后恢復(fù)自動(dòng)旋轉(zhuǎn)的時(shí)間間隔,默認(rèn) 3s
rotateSensitivity: 2, // 旋轉(zhuǎn)操作的靈敏度，值越大越靈敏.設(shè)置為0后無法旋轉(zhuǎn)。[1, 0]只能橫向旋轉(zhuǎn).[0, 1]只能縱向旋轉(zhuǎn)
targetCoord: [116.46, 39.92], // 定位到北京
maxDistance: 200,
minDistance: 200
}
}
})
別忘記給#earth元素設(shè)置寬高
效果如下圖
世界地圖的實(shí)現(xiàn)
import * as echarts from 'echarts'
import world from '@/assets/world.js'
const myChart = echarts.init(document.getElementById('world'))
echarts.registerMap('world', world)
myChart.setOption({
visualMap: {
type: 'piecewise',
show: false,
pieces: [
{ gt: 300, color: '#FF4646', label: '極高風(fēng)險(xiǎn)' },
{ gt: 200, lte: 300, color: '#FF7500', label: '高風(fēng)險(xiǎn)' },
{ gt: 100, lte: 200, color: '#FFD300', label: '中風(fēng)險(xiǎn)' },
{ gte: 0, lte: 100, color: '#00D4FF', label: '低風(fēng)險(xiǎn)' },
{ value: -1, color: '#93B8F8', label: '未知' }
],
outOfRange: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'corsi',
type: 'map',
map: 'world',
roam: true,
itemStyle: {
borderColor: '#aaa', //邊界線顏色
areaColor: '#93B8F8' //默認(rèn)區(qū)域顏色
},
emphasis: {
itemStyle: {
show: true,
areaColor: '#fff' //鼠標(biāo)滑過區(qū)域顏色
}
},
data: [
{ name: '美國', value: 34126.24 },
{ name: '日本', value: 7830.534 },
{ name: '菲律賓', value: 17150.76 },
{ name: '中國', value: 0 }
]
}
]
})
別忘記給#world元素設(shè)置寬高
其中注意點(diǎn)是world.js 下載地址
下載完成以后需要對(duì)其進(jìn)行改變一下，原本是他是放在一個(gè)匿名自執(zhí)行函數(shù)里面，直接在vue里面引用會(huì)報(bào)錯(cuò)，要把他變成 export 對(duì)象，代碼片段實(shí)例
export default {
type: 'FeatureCollection',
crs: {
type: 'name',
properties: {
name: 'urn:ogc:def:crs:OGC:1.3:CRS84'
}
},
features: [
{
geometry: {
type: 'Polygon',
coordinates: [
[
[47.97822265625001, 7.9970703125],
[46.97822265625001, 7.9970703125],
[43.98378906250002, 9.008837890624989],
[43.482519531250006, 9.379492187499991],
[43.181640625, 9.879980468749991],
[42.84160156250002, 10.203076171874997],
[42.65644531250001, 10.6],
[42.92275390625002, 10.999316406249989],
[43.24599609375002, 11.499804687499989],
[43.85273437500001, 10.784277343749991],
[44.38652343750002, 10.430224609374989],
[44.94296875, 10.43671875],
[45.81669921875002, 10.835888671874997],
[46.565039062500006, 10.745996093749994],
[47.40498046875001, 11.174023437499997],
...............
效果如下圖
#3D地球和世界地圖的結(jié)合顯示
關(guān)鍵點(diǎn)在globe里面的layers屬性上面，這個(gè)是地球表面層的配置，你可以使用該配置項(xiàng)加入云層，或者對(duì) baseTexture 進(jìn)行補(bǔ)充繪制出國家的輪廓等等。
然后layers的texture屬性支持圖片路徑的字符串，圖片或者 echart Canvas 的對(duì)象。文章來源：http://www.zghlxwxcb.cn/news/detail-763171.html
import * as echarts from 'echarts'
import 'echarts-gl'
import world from '@/assets/world.js'
const chartDom = document.getElementById('earth')
const myChart = echarts.init(chartDom)
const canvas = document.createElement('canvas')
const mapChart = echarts.init(canvas, null, {
//作為3d地球表面圖層的對(duì)象
width: 2048,
height: 1024
})
echarts.registerMap('world', world)
mapChart.setOption({
visualMap: {
type: 'piecewise',
show: false,
pieces: [
{ gt: 300, color: '#FF4646', label: '極高風(fēng)險(xiǎn)' },
{ gt: 200, lte: 300, color: '#FF7500', label: '高風(fēng)險(xiǎn)' },
{ gt: 100, lte: 200, color: '#FFD300', label: '中風(fēng)險(xiǎn)' },
{
gte: 0,
lte: 100,
color: {
type: 'radial', // linear 線性漸變 radial徑向漸變
x: 0.5, // 0.5為正中心，如果小于漸變中心靠左
y: 0.5, // 0.5為正中心，如果小于漸變中心靠上
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(255,255,255,0.8)' // 0% 處的顏色
},
{
offset: 1,
color: 'rgba(86, 189, 255, 0.2)' // 100% 處的顏色
}
]
},
label: '低風(fēng)險(xiǎn)'
},
{ value: -1, color: '#93B8F8', label: '未知' }
]
},
series: [
{
type: 'map',
map: 'world',
// 繪制完整尺寸的 echarts 實(shí)例
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
],
itemStyle: {
borderColor: '#aaa', //邊界線顏色
areaColor: 'transparent' //默認(rèn)區(qū)域顏色
},
emphasis: {
itemStyle: {
show: true,
areaColor: '#fff' //鼠標(biāo)滑過區(qū)域顏色
}
},
data: [
{ name: '美國', value: 34126.24 },
{ name: '日本', value: 7830.534 },
{ name: '菲律賓', value: 17150.76 },
{ name: '中國', value: 0 }
]
}
]
})
myChart.setOption({
globe: {
baseTexture: 'https://images-1308194867.cos.ap-beijing.myqcloud.com/images/home/world.jpg', //地球的紋理。支持圖片路徑的字符串，圖片或者 Canvas 的對(duì)象
shading: 'lambert', //地球中三維圖形的著色效果
atmosphere: {
show: true, //顯示大氣層
offset: 8,
color: '#13315E'
},
light: {
ambient: {
intensity: 0.8 //環(huán)境光源強(qiáng)度
}, //環(huán)境光
main: {
intensity: 0.2 //光源強(qiáng)度
}
},
viewControl: {
autoRotate: true, // 是否開啟視角繞物體的自動(dòng)旋轉(zhuǎn)查看
autoRotateSpeed: 3, //物體自轉(zhuǎn)的速度,單位為角度 / 秒，默認(rèn)為10 ，也就是36秒轉(zhuǎn)一圈。
autoRotateAfterStill: 2, // 在鼠標(biāo)靜止操作后恢復(fù)自動(dòng)旋轉(zhuǎn)的時(shí)間間隔,默認(rèn) 3s
rotateSensitivity: 2, // 旋轉(zhuǎn)操作的靈敏度，值越大越靈敏.設(shè)置為0后無法旋轉(zhuǎn)。[1, 0]只能橫向旋轉(zhuǎn).[0, 1]只能縱向旋轉(zhuǎn)
targetCoord: [116.46, 39.92], // 定位到北京
maxDistance: 200,
minDistance: 200
},
layers: [
{
//地球表面層的配置，你可以使用該配置項(xiàng)加入云層，或者對(duì) baseTexture 進(jìn)行補(bǔ)充繪制出國家的輪廓等等。
show: true,
type: 'blend',
texture: mapChart
}
]
}
})
效果圖如下
文章來源地址http://www.zghlxwxcb.cn/news/detail-763171.html
到了這里，關(guān)于vue echarts 3D地球和世界地圖的實(shí)現(xiàn)，并且顯示不同國家的數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
