echarts之地球绘制

最新推荐文章于 2024-05-23 13:49:55 发布
那个雨季
最新推荐文章于 2024-05-23 13:49:55 发布
阅读量1.5k
点赞数
分类专栏：前端文章标签： echarts javascript
本文链接：https://blog.csdn.net/qq_43534980/article/details/120256440
版权
前端专栏收录该内容
21 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>echarts_3D_earth</title>
  <script src="./lib/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
  <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=2.0&ak=m8wa7CqexhUGYTGmdv9xzjB5iKT6WQdl&__ec_v__=20190126"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
</head>

<body>
  <div id="container" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    let ROOT_PATH = 'https://echarts.apache.org/examples';
    
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    
    var option;
    
    
    
    var config = {
        color: '#c0101a',
        levels: 1,
        intensity: 4,
        threshold: 0.01
    }
    
    var canvas = document.createElement('canvas');
    canvas.width = 4096;
    canvas.height = 2048;
    context = canvas.getContext("2d");
    
    context.lineWidth = 0.5;
    context.strokeStyle = config.color;
    context.fillStyle = config.color;
    context.shadowColor = config.color;
    
    $.when(
        $.getScript('https://cdn.jsdelivr.net/npm/d3-array@2.8.0/dist/d3-array.js'),
        $.getScript('https://cdn.jsdelivr.net/npm/d3-contour@2.0.0/dist/d3-contour.js'),
        $.getScript('https://cdn.jsdelivr.net/npm/d3-geo@2.0.1/dist/d3-geo.js'),
        $.getScript('https://cdn.jsdelivr.net/npm/d3-timer@2.0.0/dist/d3-timer.js')
    ).done(function () {
    
        image(ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg').then(function(image) {
            var m = image.height,
                n = image.width,
                values = new Array(n * m),
                contours = d3.contours().size([n, m]).smooth(true),
                projection = d3.geoIdentity().scale(canvas.width / n),
                path = d3.geoPath(projection, context);
    
            //   StackBlur.R(image, 5);
    
            for (var j = 0, k = 0; j < m; ++j) {
                for (var i = 0; i < n; ++i, ++k) {
                    values[k] = image.data[(k << 2)] / 255;
                }
            }
    
            var opt = {
                image: canvas
            };
    
            var results = [];
            function update(threshold, levels) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                var thresholds = [];
                for (var i = 0; i < levels; i++) {
                    thresholds.push((threshold + 1 / levels * i) % 1);
                }
                results = contours.thresholds(thresholds)(values);
                redraw();
            }
    
            function redraw() {
                results.forEach(function (d, idx) {
                    context.beginPath();
                    path(d);
                    context.globalAlpha = 1;
                    context.stroke();
                    if (idx > config.levels / 5 * 3) {
                        context.globalAlpha = 0.01;
                        context.fill();
                    }
                });
                opt.onupdate();
            }
            d3.timer(function(t) {
                var threshold = (t % 10000) / 10000;
                update(threshold, 1);
            });
    
            initCharts(opt);
    
            update(config.threshold, config.levels);
    
        });
    
        function image(url) {
            return new Promise(function(resolve) {
                var image = new Image();
                image.src = url;
                image.crossOrigin = 'Anonymous';
                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = image.width / 8;
                    canvas.height = image.height / 8;
                    var context = canvas.getContext('2d');
                    context.drawImage(image, 0, 0, canvas.width, canvas.height);
                    resolve(context.getImageData(0, 0, canvas.width, canvas.height));
                };
            });
        }
    
        function initCharts(opt) {
            var contourChart = echarts.init(document.createElement('canvas'), null, {
                width: 4096,
                height: 2048
            });
    
            var img = new echarts.graphic.Image({
                style: {
                    image: opt.image,
                    x: -1,
                    y: -1,
                    width: opt.image.width + 2,
                    height: opt.image.height + 2
                }
            });
            contourChart.getZr().add(img);
    
            opt.onupdate = function () {
                img.dirty();
            };
    
            myChart.setOption({
                backgroundColor: '#000',
                globe: {
    
                    environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
    
                    heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
    
                    displacementScale: 0.05,
                    displacementQuality: 'high',
    
                    baseColor: '#000',
    
                    shading: 'realistic',
                    realisticMaterial: {
                        roughness: 0.2,
                        metalness: 0
                    },
    
                    postEffect: {
                        enable: true,
                        depthOfField: {
                            // enable: true
                        }
                    },
                    light: {
                        ambient: {
                            intensity: 0
                        },
                        main: {
                            intensity: 0.1,
                            shadow: false
                        },
                        ambientCubemap: {
                            texture: ROOT_PATH + '/data-gl/asset/lake.hdr',
                            exposure: 1,
                            diffuseIntensity: 0.5,
                            specularIntensity: 2
                        }
                    },
                    viewControl: {
                        autoRotate: false
                    },
    
                    layers: [{
                        type: 'blend',
                        blendTo: 'emission',
                        texture: contourChart,
                        intensity: config.intensity
                    }]
                }
            });
        }
    });
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

  </script>
</body>

</html>
那个雨季
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts之地球绘制

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>echarts_3D_earth</title> <script src="./lib/jquery-1.11.3.mi...
复制链接

扫一扫