3d地球

最新推荐文章于 2024-06-25 10:13:41 发布
最新推荐文章于 2024-06-25 10:13:41 发布
阅读量548 收藏 2
点赞数 2
分类专栏： jQuery 文章标签： 3D地球 Echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oLengYueHun/article/details/102509218
版权

项目结构如下：
在这里插入图片描述
这个是3d地区旋转的源码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript"
        src="./js/echarts/echart.min.js"></script>
<script type="text/javascript" src="./js/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript"
        src="./js/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="./js/echarts/extension/dataTool.min.js"></script>
<script
        type="text/javascript" src="./js/echarts/map/js/china.js"></script>
<script type="text/javascript" src="./js/echarts/map/js/world.js"></script>
<!--百度密钥需要去百度地图api申请-->
<script
        type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=VQ8nwpflfhcBIaC0yjFsgzIBIF19Zh4T&__ec_v__=20190126"></script>
<script type="text/javascript" src="./js/echarts/extension/bmap.min.js"></script>
<script
        type="text/javascript" src="./js/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var ROOT_PATH = "";
    option = null;
    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: 'img/earth.jpg',
            heightTexture:'img/bathymetry_bw_composite_4k.jpg',
            displacementScale: 0.1,
            shading: 'lambert',
            environment: 'img/starfield.jpg',

            light: {
                ambient: {
                    intensity: 0.1
                },
                main: {
                    intensity: 1.5
                }
            },

            layers: [{
                type: 'blend',
                blendTo: 'emission',
                texture: 'img/night.jpg'
            }, {
                type: 'overlay',
                texture: 'img/clouds.png',
                shading: 'lambert',
                distance: 500
            }]
        },
        series: []
    }
    ;
    if (option && typeof option === "object") {

        myChart.setOption(option, true);
    }
</script>
</body>
</html>

3d立体影像js，其他与上面相同：

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var ROOT_PATH = "";
    option = null;
    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: "img/world.topo.bathy.200401.jpg",
            heightTexture: "img/bathymetry_bw_composite_4k.jpg",
            displacementScale: 0.2,
            shading: 'realistic',
            environment: 'img/starfield.jpg',
            realisticMaterial: {
                roughness: ROOT_PATH + 'asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
                metalness: ROOT_PATH + 'asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
                textureTiling: [8, 4]
            },
            postEffect: {
                enable: true
            },
            viewControl: {
                autoRotate: true
            },
            light: {
                main: {
                    intensity: 2,
                    shadow: true
                },
                ambientCubemap: {
                    texture: 'hdr/pisa.hdr',
                    exposure: 2,
                    diffuseIntensity: 2,
                    specularIntensity: 2
                }
            }
        },
        series: []
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

我自己凑出的3d影像旋转：

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var ROOT_PATH = "";
    option = null;
    option = {
        backgroundColor: '#000',
        globe: {
            baseTexture: 'img/world.topo.bathy.200401.jpg',
            heightTexture:'img/bathymetry_bw_composite_4k.jpg',
            displacementScale: 0.2,
            shading: 'realistic',
            environment: 'img/starfield.jpg',

            realisticMaterial: {
                roughness: ROOT_PATH + 'asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
                metalness: ROOT_PATH + 'asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
                textureTiling: [8, 4]
            },

            postEffect: {
                enable: true
            },
            viewControl: {
                autoRotate: true
            },

            light: {
                ambient: {
                    intensity: 0.1
                },
                main: {
                    intensity: 2,
                    shadow: true
                },
                ambientCubemap: {
                    texture: 'hdr/pisa.hdr',
                    exposure: 2,
                    diffuseIntensity: 2,
                    specularIntensity: 2
                }
            },

            layers: [{
                type: 'blend',
                blendTo: 'emission',
                texture: 'img/night.jpg'
            }, {
                type: 'overlay',
                texture: 'img/clouds.png',
                shading: 'lambert',
                distance: 500
            }]
        },
        series: []
    };
    
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

3D柱状图：

 var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    $.getScript( 'js/simplex.js').done(function () {


        var noise = new SimplexNoise(Math.random);
        function generateData(theta, min, max) {
            var data = [];
            for (var i = 0; i <= 20; i++) {
                for (var j = 0; j <= 20; j++) {
                    var value = noise.noise2D(i / 20, j / 20);
                    valMax = Math.max(valMax, value);
                    valMin = Math.min(valMin, value);
                    data.push([i, j, value * 2 + 4]);
                }
            }
            return data;
        }
        var valMin = Infinity;
        var valMax = -Infinity;
        var data = generateData(2, -5, 5);


        myChart.setOption(option = {
            tooltip: {},
            xAxis3D: {
                type: 'value'
            },
            yAxis3D: {
                type: 'value'
            },
            zAxis3D: {
                type: 'value',
                max: 10,
                min: 0
            },
            grid3D: {
                environment: '#000',
                axisPointer: {
                    show: false
                },
                postEffect: {
                    enable: true,
                    SSAO: {
                        enable: true,
                        radius: 5
                    }
                },
                light: {
                    main: {
                        intensity: 3
                    },
                    ambientCubemap: {
                        texture:'hdr/pisa.hdr',
                        exposure: 1,
                        diffuseIntensity: 0.5,
                        specularIntensity: 2
                    }
                }
            },
            series: [{
                type: 'bar3D',
                data: data,

                barSize: 4,

                bevelSize: 0.4,
                bevelSmoothness: 4,

                shading: 'realistic',
                realisticMaterial: {
                    roughness: 0.3,
                    metalness: 1
                },

                label: {
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },

                itemStyle: {
                    color: '#ccc'
                },

                emphasis: {
                    label: {
                        show: false
                    }
                }
            }]
        });
    });
    
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

图片在https://download.csdn.net/download/olengyuehun/11852838

跟着半仙学java
关注
专栏目录
一个excel做的3D地球
11-30
一个用EXCEL做的3D地球，国外牛人做的，VBA源码没有密码的。
3D模型地球
Scodow的博客
12-08 959
3D地球 可以查看你想看的地方
3D地球绘制
zzy的博客
04-26 1957
1.e-charts GL ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 flights-gl 可用来展示全球供应链、物资运转、航班等信息，地球为平面 flights 可以只显示某个区域的航班，适合用来展示供应链、物资运转等，地球为3D形状 GL散点图 可用来展...
226Echarts - 3D 地球（Moon）
阿甘兄
05-06 599
效果图 源代码 option = { globe: { baseTexture: 'data-gl/asset/moon-base.jpg', heightTexture: 'data-gl/asset/moon-bump.jpg', displacementScale: 0.05, displacementQuality...
Cesium：显示一个3D地球
KaiSarH
11-23 2866
显示一个3D地球
echarts3D地球素材
03-16
**ECharts 3D地球素材详解** ECharts是一款由百度开发的开源JavaScript数据可视化库，它基于HTML5 Canvas，能够创建丰富的交互式图表和可视化应用。在ECharts 3D中，用户可以构建出立体、动态的3D图表，其中包括3D...
ECharts-GL 3D地球实例（动态改变自转、加载去空白圆心）
05-11
ECharts-GL是一款基于ECharts扩展的3D图表库，它为用户提供了丰富的3D可视化效果，包括3D地球、3D柱状图等。在本实例中，我们将重点探讨如何实现ECharts-GL 3D地球的动态自转、解决加载时出现空白圆心的问题，以及...
echarts超级炫酷3d地球
09-01
**ECharts：超级炫酷3D地球实现** ECharts 是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，支持大量的自定义选项，适用于各种数据展示场景。在这个项目中，我们将深入探讨如何利用ECharts...
使用echarts 实现3D地球
08-13
**使用ECharts实现3D地球**\n\nECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持自定义交互和动画效果。在ECharts中，3D地球的实现是通过其强大的3D渲染...
3D地球旋转代码_3D地球旋转代码_
10-02
下面将详细介绍如何通过这些技术来实现3D地球旋转。 首先，`index.html`是网页的主文件，它包含了网页的基本结构和引用外部资源如样式表（CSS）和脚本（JavaScript）。HTML文件可能包含一个`<canvas>`元素，这是...
动态3D地球图
11-25
利用glut库来实现3d地球形状的描绘和旋转
html5_3d地球
02-04
html5_3d地球，请使用html5浏览器打开。
HTML5-Web3D-ThreeJS-实现3D地球月球
03-26
这是我在学习Three.js以及HTML5的练习之作。 利用Three.js以及HTML5的canvas构建一个3D场景，实现了3D地球，月球绕地球转。 更多HTML5，Web3D,Three.js技术交流，请加群123552714进行交流
html5_3d地球_001
02-04
html5_3d地球_001，请在服务器环境下使用支持html5浏览器(firefox chrome等)，运行此htm 效果如图，CPU资源占用在60%-70%之间。
jquery.earth-3d:jQuery插件，可让您在画布上绘制漂亮的3d旋转地球。 看一下演示
04-28
jquery.earth-3d jQuery插件，可让您在画布上绘制漂亮的3d旋转地球。 看一下演示： : 描述 基于令人赞叹的插件，jquery.earth3d.js是一个开源的jQuery ui插件，它将允许您在画布上模拟3d地球（或实际上是任何行星）。 我还添加了一些我的宠物项目所需的功能。 这是到目前为止提供的主要功能： 更改地图纹理（例如，可以将其更改为火星）以及平铺 更改旋转轴（倾斜，旋转） 改变大小 更改默认转速 平滑的鼠标拖动：您可以用鼠标旋转地球，它将平滑地恢复到正常速度 通过指示球坐标来渲染位置 在这些位置之间绘制路径 按照路径绘制和更新航班 位置和航班均可以点击，并且可以完全自定义 它适用于 执照 jquery.earth3d.js作为插件，已获得。 作者 Sebastien Drouyer-别名此jquery ui插件 Sam 别名 额外的积分 罗杰·库
7款三维地球软件/框架:Google Earth SkylineGlobe,Cesium等
最新发布
贝格前端工场的博客
06-25 5101
大名鼎鼎，Google Earth 是由 Google 开发的一款免费的虚拟地球软件。它提供了全球范围内的卫星图像、地图数据和地理信息的浏览和探索功能。用户可以通过 Google Earth 在地球上导航，浏览地标、城市、地形、海洋和天空等。Google Earth 还提供了一些额外的功能，如3D建筑模型、历史图层、航线模拟等。1. 全球覆盖：Google Earth 提供了全球范围内的卫星图像和地图数据，用户可以在地球上导航和浏览各个地区。2. 三维可视化。
3D地球可视化
Drawbirder
02-18 4024
3D地球可视化 一丶简介 本次说的是前端的可视化的内容，主要就是简单的3D地球的绘制，现在越来越多的插件和脚本涌入互联网，人们开始越来越不用造轮子了。今天我们就是介绍一个好用的可视化插件。echarts（百度出品）。 二丶内容 我是用的python自带的web服务写的，废话不多说，直接贴代码 ``` def map(): print("context-Type: t...
3D地球的生成（一）——生成全球的3D图
fmechina的博客
06-24 7348
原文发布时间：2010-07-03作者：毛毛虫这一部分内容是演示如何生成一个全球的3D图。这篇文章中的例子显示了一个以经纬度表示的2D地图如何被转换为3D地球。我们首先需要创建一个全球范围的矩形，然后把该矩形转换为3D地球，并将我们的一个包含全球国家行政区和南极洲的shape文件添加到这个3D表面上显示出来。下面是操作过程：首先创建3D地球。使用转换器Creator创建一个全球范围的矩形（在后面转...
【小沐学GIS】基于Android绘制三维数字地球Earth（OpenGL）
爱看书的小沐
02-10 2245
Android是一个开源的，基于Linux的移动设备操作系统，主要使用于移动设备，如智能手机和平板电脑。Android是由谷歌及其他公司带领的开放手机联盟开发的。
HTML实现3D地球顺时针旋转动画
资源摘要信息:"该文件包含了实现3D地球旋转动画的代码示例。具体知识点涵盖HTML、CSS和JavaScript的使用，特别是WebGL技术的应用。代码演示了如何利用WebGL绘制3D模型，并通过JavaScript控制模型进行顺时针方向的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值