很久沒寫播客了,實在很差意思,最近划水比較多,學習少,最近公司的一個需求我以爲挺不錯的,在3D地圖點的懸浮和下鑽上浪費了不少的時間,後面仍是跟產品砍了一些需求,不過大致上仍是能接受的javascript
這是在網上找的地球的地圖,而後叫UI按照個人要求調下色,下面是地圖的文件html
https://files.cnblogs.com/files/fangdongdemao/absnsnsnsdlsdk.zipjava
直接上代碼吧canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" style="width: 600px;height: 400px;"></div>
<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="echarts-gl.js" type="text/javascript" charset="utf-8"></script>
<script src="china.js" type="text/javascript" charset="utf-8"></script>
<script src="world.js" type="text/javascript" charset="utf-8"></script>
<script>const coutryAlias = {
'Afghanistan': '阿富汗',
'Angola': '安哥拉',
'Albania': '阿爾巴尼亞',
'United Arab Emirates': '阿聯酋',
'Argentina': '阿根廷',
'Armenia': '亞美尼亞',
'Australia': '澳大利亞',
'Austria': '奧地利',
'Azerbaijan': '阿塞拜疆',
'Burundi': '布隆迪',
'Belgium': '比利時',
'Benin': '貝寧',
'Burkina Faso': '布基納法索',
'Bangladesh': '孟加拉國',
'Bulgaria': '保加利亞',
'The Bahamas': '巴哈馬',
'Bosnia and Herzegovina': '波黑',
'Belarus': '白俄羅斯',
'Belize': '伯利茲',
'Bolivia': '玻利維亞',
'Brazil': '巴西',
'Brunei': '文萊',
'Bhutan': '不丹',
'Botswana': '博茨瓦納',
'Central African Republic': '中非共和國',
'Canada': '加拿大',
'Switzerland': '瑞士',
'Chile': '智利',
'China': '中國',
'Ivory Coast': '象牙海岸',
'Cameroon': '喀麥隆',
'Democratic Republic of the Congo': '剛果金',
'Republic of the Congo': '剛果共和國',
'Colombia': '哥倫比亞',
'Costa Rica': '哥斯達黎加',
'Cuba': '古巴',
'Northern Cyprus': '北塞浦路斯',
'Cyprus': '塞浦路斯',
'Czech Republic': '捷克共和國',
'Germany': '德國',
'Djibouti': '吉布提',
'Dominican Republic': '多米尼加共和國',
'Algeria': '阿爾及尼亞',
'Ecuador': '厄瓜多爾',
'Egypt': '埃及',
'Eritrea': '厄立特里亞',
'Spain': '西班牙',
'Estonia': '愛沙尼亞',
'Ethiopia': '埃塞俄比亞',
'Finland': '芬蘭',
'Fiji': '斐濟',
'Gabon': '加蓬',
'Georgia': '格魯吉亞',
'Ghana': '加納',
'Guinea': '幾內亞',
'Gambia': '岡比亞',
'Guinea Bissau': '幾內亞比紹',
'Equatorial Guinea': '赤道幾內亞',
'Greece': '希臘',
'Denmark': '丹麥',
'Guatemala': '危地馬拉',
'Guyana': '圭亞那',
'Honduras': '洪都拉斯',
'Croatia': '克羅地亞',
'Haiti': '海地',
'Hungary': '匈牙利',
'Indonesia': '印度尼西亞',
'India': '印度',
'Ireland': '愛爾蘭',
'Iran': '伊朗',
'Iraq': '伊拉克',
'Iceland': '冰島',
'Italy': '意大利',
'Jamaica': '牙買加',
'Jordan': '約旦',
'Japan': '日本',
'Kashmir': '克什米爾',
'Kazakhstan': '哈薩克斯坦',
'Kenya': '肯尼亞',
'Kyrgyzstan': '吉爾吉斯坦',
'Cambodia': '柬埔寨',
'South Korea': '韓國',
'Kosovo': '科索沃',
'Kuwait': '科威特',
'Laos': '老撾',
'Lebanon': '黎巴嫩',
'Liberia': '利比里亞',
'Libya': '利比亞',
'Sri Lanka': '斯里蘭卡',
'Lesotho': '萊索托',
'Lithuania': '立陶宛',
'Luxembourg': '盧森堡',
'Latvia': '拉脫維亞',
'Morocco': '摩洛哥',
'Moldova': '摩爾多瓦',
'Madagascar': '馬達加斯加',
'Mexico': '墨西哥',
'Macedonia': '馬其頓',
'Mali': '馬裏',
'Myanmar': '緬甸',
'Montenegro': '黑山',
'Mongolia': '蒙古',
'Mozambique': '莫桑比克',
'Mauritania': '毛里塔尼亞',
'Malawi': '馬拉維',
'Malaysia': '馬來西亞',
'Namibia': '納米比亞',
'France': '法國',
'Niger': '尼日爾',
'Nigeria': '尼日利亞',
'Nicaragua': '尼加拉瓜',
'Netherlands': '荷蘭',
'Norway': '挪威',
'Nepal': '尼泊爾',
'New Zealand': '新西蘭',
'Oman': '阿曼',
'Pakistan': '巴基斯坦',
'Panama': '巴拿馬',
'Peru': '祕魯',
'Philippines': '菲律賓',
'Papua New Guinea': '巴布亞新幾內亞',
'Poland': '波蘭',
'North Korea': '朝鮮',
'Portugal': '葡萄牙',
'Paraguay': '巴拉圭',
'Israel': '以色列',
'Qatar': '卡塔爾',
'Romania': '羅馬尼亞',
'Russia': '俄羅斯',
'Rwanda': '盧旺達',
'Western Sahara': '西撒哈拉',
'Saudi Arabia': '沙特阿拉伯',
'Sudan': '蘇丹',
'South Sudan': '南蘇丹',
'Senegal': '塞內加爾',
'United Kingdom': '英國',
'Solomon Islands': '所羅門羣島',
'Sierra Leone': '塞拉利昂',
'El Salvador': '塞爾瓦多',
'Somaliland': '索馬里藍',
'Somalia': '索馬里',
'Republic of Serbia': '塞爾維亞',
'Suriname': '蘇里南',
'Slovakia': '斯洛伐克',
'Slovenia': '斯洛文尼亞',
'Sweden': '瑞典',
'Swaziland': '瑞士',
'Syria': '敘利亞',
'Chad': '乍得',
'Togo': '多哥',
'Thailand': '泰國',
'Tajikistan': '塔吉克斯坦',
'Turkmenistan': '土庫曼斯坦',
'East Timor': '東帝汶',
'Trinidad and Tobago': '特立尼達和多巴哥',
'Tunisia': '突尼斯',
'Turkey': '土耳其',
'United Republic of Tanzania': '坦桑尼亞',
'Uganda': '烏干達',
'Ukraine': '烏克蘭',
'Uruguay': '烏拉圭',
'United States of America': '美國',
'Uzbekistan': '烏茲別克斯坦',
'Venezuela': '委內瑞拉',
'Vietnam': '越南',
'Vanuatu': '瓦努阿圖',
'Yemen': '也門',
'South Africa': '南非',
'Zambia': '贊比亞',
'Zimbabwe': '津巴布韋'
}</script>
<script type="text/javascript">
let canvas = document.createElement('canvas')
let mapChart = echarts.init(canvas, null, {
width: 4096,
height: 2048
})
let pOp = {
geo: {
map: 'china',
// map: 'world',
label: {
show: false,// 地圖省份的顯示或者隱藏
color: "#fff",
fontSize: 28,
fontFamily: 'Microsoft YaHei',
},
emphasis: { //當鼠標放上去 地區區域是否顯示名稱
label: {
show: true,
textStyle: {
color: '#fdfffd',// 省份的文字
}
}
},
itemStyle: {
areaColor: 'transparent',// 區域的顏色
borderColor: 'rgba(255,255,255,0.6)',
emphasis: {
areaColor: 'rgba(255,255,255,0.2)'
},
borderWidth: 1,
},
nameMap: coutryAlias,// 世界地圖的中文座標
regions: [
{
name: '南海諸島',
itemStyle: {
opacity: 1
},
label: {
show: true,
color: '#fff'
},
}
],
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
]
},
series: [
//漣漪
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 20,
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
fontSize: 8,
formatter: (params => {
return params.name
})
},
itemStyle: {
normal: {
color: '#03ffff'
}
},
data: [{
name: '重慶',
value: [83.059716, 39.494287],
}, {
name: '重慶2',
value: [104.547759, 40.062111],
}]
},
],
}
mapChart.setOption(pOp)
const option = {
visualMap: [{
type: 'continuous',
show:false,
text: ['bar3D'],
calculable: true,
max: 300,
inRange: {
color: ['#00f6ff',]
}
}],
tooltip: {
trigger: 'item',
formatter(params) {
return params.name
}
},
globe: {
baseTexture: "bg1.png",
displacementScale: 0.07,
shading: 'color',// 着色效果
light: { // 光照陰影
ambient: {
intensity: 1
},
main: { // 主光源
intensity: 0,
shadow: false
},
},
// 這個是中國地圖的視角
// viewControl: {
// projection: 'perspective',
// autoRotateSpeed: 5,// 自轉速度
// // alpha: 0,//視角的方向。
// // beta: 10,//左右旋轉的角度。
// center: [15, 50, 0],// 視角
// targetCoord: [116.826801, 0],
// autoRotate: false,// 自動旋轉
// autoRotateAfterStill: 10,//鼠標靜止操做後恢復自動旋轉的時間間隔
// distance: 20, // 視距
// rotateSensitivity: 1,//1能夠旋轉,0不能旋轉
// zoomSensitivity: 1,//沒法縮放
// },
viewControl: {
center: [0, 0, 0],
alpha: 30,
beta: 160,
autoRotate: false,
autoRotateAfterStill: 10,
distance: 140,
autoRotateSpeed: 4,
},
postEffectL: {
enable: false,
},
layers: [{
type: 'blend',
texture: mapChart
}]
},
series: [
{
name: 'lines3D',// 3D攻擊線
type: 'lines3D',
globeIndex:1,
zlevel: 10,
coordinateSystem: 'globe',
effect: {
show: true,
trailWidth: 4,
trailOpacity: 1,
trailLength: 0.2,
constantSpeed: null
},
blendMode: 'lighter',
lineStyle: {
color: '#0087f4',
width: 2,
opacity: 0.5
},
// silent: true,
data: [
{
coords: [
[91.049892, 29.670971],
[121.51585, 31.23045]
], value: 20, name: '數據值1'
}, {
coords: [
[91.049892, 29.670971],
[21.827762, 39.062555]
], value: 20, name: '數據值2'
},
{
coords: [
[113.01339, 30.710328],
[121.51585, 31.23045]
], value: 40,name:'數據值3'
},
{
coords: [
[102.894877, 29.944241],
[121.51585, 31.23045]
], value: 20,name:'數據值4'
},
{
coords: [
[91.049892, 29.670971,],
[106.868693, 29.204436,]
], value: 60,name:'數據值5'
},
],
},
//柱狀圖
{
name: 'bar3D1',
type: "bar3D",
coordinateSystem: 'globe',
barSize: 2, //柱子粗細
shading: 'lambert',
opacity: 1,
zlevel: 10,
bevelSize: 0.3,
label: {
show: false,
formatter: (parmas)=>{
return parmas.name
}
},
emphasis: {
label: false
},
minHeight:1,
itemStyle: {
color: '#00f6ff',
opacity: 1
},
data: [
//設置空的一個最小值,最大值
{
name: "",
value: [0,0,0],
itemStyle:{
opacity:0,
}
},
{
name: "",
value: [0, 0, 1000],
itemStyle:{
opacity:0,
}
},
{
name: "海門3",
"value": [104.547759, 40.062111, 1],
},
{
name: "海門4",
"value": [123.429736,45.795987, 1]
},
{
name: "海門5",
"value": [120.429736,45.795987, 1]
}
]
},
]
}
const myChart = echarts.init(document.getElementById('box'))
myChart.setOption(option)
myChart.on('click', function (params) {
console.log(params)
})
// 是防抖的函數
// let chartChange = debounce(function () {
// myChart.resize()
// });
// $(window).on('resize.newMapWorld', chartChange)
// //離開頁面的時候的時候要釋放內存 .dispose();
// $(window).off('resize.newMapWorld', chartChange);
// myChart.dispose();//釋放內存
</script>
</body>
</html>