2022年02月18日发布使用angular9+echarts绘制3D地图
大家好，今日小科来聊聊一篇关于2022年02月18日整理发布：浅谈使用angular9 echarts绘制3D地图的文章，现在让我们往下看看吧！
新建一个angular9的工程1、安装了@angular-cli的脚手架
2、天然气汽车查看版本
3、ng新我的项目（项目名)
创建容器src/app/app.componnet.html
div /格创建地图实例src/app/app.componnet.ts
从" @角度/核心"导入{组件}；
从“电子海图”导入*作为电子海图；
导入' echarts/map/js/china.js '
@组件({
选择器： '应用程序根，
templateUrl:/app.component.html '，
styleUrls: [' ./app.component.scss']
})
导出类AppComponent {
选项={ 0
标题： {
top: 10，
text: '3D中国地图，
左： '中心，
textStyle: {
color: '#fff '
}
},
backgroundColor: 'rgba(0，10，52，1)'，
geo: {
地图： '中国，
aspectScale: 0.75，
layoutCenter: ['50% '，' 51.5%']，//地图位置
布局： '118% ',
roam:真的，
项目样式： {
正常： {
borderColor: 'rgba(147，235，248，1)'，
borderWidth: 0.5，
颜色： {
:型'线性梯度，
x: 0，
y: 1500，
x2: 2500，
y2: 0，
colorStops: [{
offset: 0，
color: '#009DA1' //0%处的颜色
}, {
offset: 1，
color: '#005B9E' //50%处的颜色
}],
global: true //缺省为错误的
},
opacity: 0.5，
},
强调： {
areaColor: '#2a333d '
}
},
区域： [{
名称： '南海诸岛，
项目样式： {
areaColor: 'rgba(0，10，52，1)'，
borderColor: 'rgba(0，10，52，1)'
},
强调： {
areaColor: 'rgba(0，10，52，1)'，
borderColor: 'rgba(0，10，52，1)'
}
}],
z: 2
},
系列： [{
类型： '地图，
地图： '中国，
工具提示： {
显示：错误
},
标签: {
显示：真，
color: '#FFFFFF '，
字体大小： 16
},
aspectScale: 0.75，
layoutCenter: ['50% '，' 50%']，//地图位置
布局： '118% ',
roam:真的，
项目样式： {
正常： {
border color : ' rgba(147235248，0.6)'，
borderWidth: 0.8，
areaColor: {
:型'线性梯度，
x: 0，
y: 1200，
x2: 1000，
y2: 0，
colorStops: [{
offset: 0，
color: '#009DA1' //0%处的颜色
}, {
offset: 1，
color: '#005B9E' //50%处的颜色
}],
global: true //缺省为错误的
},
},
强调： {
areaColor: 'rgba(147，235，248，0)'
}
},
zlevel: 1
}]
};
ngOnInit(){
让DOM=文档。getelementbyid(“main”)
let myChart=echarts.init(dom)
myChart.on('georoam '，function(params) {
var option=mychart。get option()；//获得选择权对象
if (params.zoom！=null params.zoom！=未定义){ //捕捉到缩放时
option.geo[0].zoom=option.series[0].缩放；//下层长狭潮道的缩放等级跟着上层的长狭潮道一起改变
option.geo[0].center=option.series[0].居中；//下层的长狭潮道的中心位置随着上层长狭潮道一起改变
} else { //捕捉到拖曳时
option.geo[0].center=option.series[0].居中；//下层的长狭潮道的中心位置随着上层长狭潮道一起改变
}
myChart.setOption(选项);//设置选择权
});
myChart.setOption(this.option)
}
}效果图片
这篇好文章是转载于：知行礼动
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 知行礼动
- 本文地址： /news/detail/tanhcccaki
