3D地球可视化
程序员文章站
2022-07-12 23:27:15
...
3D地球可视化
一丶简介
本次说的是前端的可视化的内容,主要就是简单的3D地球的绘制,现在越来越多的插件和脚本涌入互联网,人们开始越来越不用造*了。今天我们就是介绍一个好用的可视化插件。echarts(百度出品)。
二丶内容
我是用的python自带的web服务写的,废话不多说,直接贴代码
```
def map():
print("context-Type: text/html")
print()
print("""
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script src="../static/echarts.js"></script>
<script src="../static/echarts-gl.js"></script>
<title>3D地球</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="main" style="width:100%; height:100%;"></div>
</body>
<script>
var main = document.getElementById("main")
var winheight = window.innerHeight;
main.style.height = winheight+"px";
</script>
<script type="text/javascript">
var echart = echarts.init(document.getElementById("main"));
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "../static/world-map.jpg",
heightTexture: "../static/world-map.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: '../static/background.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
diffuseIntensity: 0.2
}
}
}
};
echart.setOption(option)
</script>
</html>
""")
map()
```
print("context-Type: text/html")
print()
print("""
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script src="../static/echarts.js"></script>
<script src="../static/echarts-gl.js"></script>
<title>3D地球</title>
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="main" style="width:100%; height:100%;"></div>
</body>
<script>
var main = document.getElementById("main")
var winheight = window.innerHeight;
main.style.height = winheight+"px";
</script>
<script type="text/javascript">
var echart = echarts.init(document.getElementById("main"));
var option = {
backgroundColor: '#000',
globe: {
baseTexture: "../static/world-map.jpg",
heightTexture: "../static/world-map.jpg",
displacementScale: 0.04,
shading: 'realistic',
environment: '../static/background.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
diffuseIntensity: 0.2
}
}
}
};
echart.setOption(option)
</script>
</html>
""")
map()
```
启动python的web服务就可以在浏览器中输入
localhost:8000/cgi-bin/map.py
就可以访问了
效果图:
需要资料与源码扫描二维码:
点击链接:https://www.cnblogs.com/MyZgqblogs/p/10393773.html
posted @ 2019-02-18 09:12 Drawbirder 阅读(...) 评论(...) 编辑 收藏
上一篇: python基础教程:python实现3D地图可视化
下一篇: 3D游戏——AR技术
推荐阅读
-
地球陆地10大巨型生物排行榜 非洲象最重,最后一名很恐怖
-
AE结合PS将古色古香的国画转成带景深的3D动画
-
AE怎么结合C4D制作3D路径效果?
-
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
-
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
-
暴风影音3d怎么看?不想再去影院排队看3D了
-
使用matplotlib可视化点云分割结果
-
python数据分析与可视化(python数据分析项目报告)
-
java连接mysql的jar包没有bin(mysql可视化管理工具)
-
photoshopCS5与3D工具设计制作出一个逼真的旋转的大红灯笼