這篇文章主要介紹如何使用angular9+echarts繪制3D地圖，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
在美蘭等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,外貿(mào)網(wǎng)站建設(shè),美蘭網(wǎng)站建設(shè)費(fèi)用合理。
1、安裝了@angular-cli的腳手架
2、ng -v查看版本
3、ng new my-project(項(xiàng)目名)
npm i echarts
相關(guān)推薦：《angular教程》
src/app/app.componnet.html
src/app/app.componnet.ts
重慶分公司
重慶分公司
import { Component } from '@angular/core';
import * as echarts from "echarts";
import 'echarts/map/js/china.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
option = {
title: {
top: 10,
text: '3D中國地圖',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(0, 10, 52, 1)',
geo: {
map: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地圖位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 0.5,
color: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 處的顏色
}, {
offset: 1,
color: '#005B9E' // 50% 處的顏色
}],
global: true // 缺省為 false
},
opacity: 0.5,
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{
name: '南海諸島',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
z: 2
},
series: [{
type: 'map',
map: 'china',
tooltip: {
show: false
},
label: {
show: true,
color: '#FFFFFF',
fontSize: 16
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地圖位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 處的顏色
}, {
offset: 1,
color: '#005B9E' // 50% 處的顏色
}],
global: true // 缺省為 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
zlevel: 1
}]
};
ngOnInit(){
let dom = document.getElementById('main')
let myChart = echarts.init(dom)
myChart.on('georoam', function(params) {
var option = myChart.getOption(); //獲得option對象
if (params.zoom != null && params.zoom != undefined) { //捕捉到縮放時(shí)
option.geo[0].zoom = option.series[0].zoom; //下層geo的縮放等級跟著上層的geo一起改變
option.geo[0].center = option.series[0].center; //下層的geo的中心位置隨著上層geo一起改變
} else { //捕捉到拖曳時(shí)
option.geo[0].center = option.series[0].center; //下層的geo的中心位置隨著上層geo一起改變
}
myChart.setOption(option); //設(shè)置option
});
myChart.setOption(this.option)
}
}效果圖片
以上是“如何使用angular9+echarts繪制3D地圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
