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.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
    评论
免费分享大家 [44.38652343750002,10.430224609374989],[44.94296875,10.43671875],[45.81669921875002,10.835888671874997],[46.565039062500006,10.745996093749994],[47.40498046875001,11.174023437499997],[48.01923828125001,11.139355468749997],[48.57255859375002,11.320507812499997],[48.938574218750006,11.258447265624994],[50.11005859375001,11.529296875],[50.79228515625002,11.983691406249989],[51.2548828125,11.830712890624994],[51.08427734375002,11.335644531249997],[51.140625,10.656884765624994],[51.031835937500006,10.444775390624997],[51.19296875,10.554638671874997],[51.390234375,10.422607421875],[50.93007812500002,10.33554687499999],[50.825,9.428173828124997],[50.10283203125002,8.199804687499991],[49.85205078125,7.962548828124994],[49.234960937500006,6.77734375],[49.04931640625,6.173632812499989],[47.97529296875001,4.497021484374997],[46.87880859375002,3.28564453125],[46.05117187500002,2.475146484374989],[44.92021484375002,1.81015625],[43.71757812500002,0.857861328124997],[41.97988281250002,-0.973046875],[41.53271484375,-1.6953125],[41.521875,-1.572265625],[41.42695312500001,-1.449511718750003],[41.24980468750002,-1.220507812500003],[40.97871093750001,-0.870312500000011],[40.964453125,2.814648437499997],[41.341796875,3.20166015625],[41.61347656250001,3.590478515624994],[41.88398437500001,3.977734375],[41.91533203125002,4.031298828124989],[42.02412109375001,4.137939453125],[42.85664062500001,4.32421875],[43.12568359375001,4.644482421874997],[43.58349609375,4.85498046875],[43.988867187500006,4.950537109374991],[44.940527343750006,4.912011718749994],[47.97822265625001,7.9970703125]]]},"properties":{"name":"索马里","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[9.579979133936737,47.05856388629306],[9.409458596647225,47.02019676540292],[9.46249431093294,47.09010747968864],[9.46249431093294,47.19858962254578],[9.527658197470123,47.27026989773668],[9.579979133936737,47.05856388629306]]]},"properties":{"name":"列支敦斯登","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[-8.683349609375,27.77800740805682],[-13.038761787013554,27.81190166624856],[-12.948925781249926,27.914160156250034],[-11.552685546874955,28.31010742187496],[-10.486474609374994,29.06494140625],[-10.200585937499994,29.380371093750057],[-9.667089843749949,30.10927734375005],[-9.652929687499977,30.447558593750045],[-9.875488281249943,30.717919921874966],[-9.80869140624992,31.42460937499996],[-9.347460937499932,32.086376953124955],[-9.245849609375,32.572460937499955],[-8.512841796874994,33.25244140625003],[-6.900976562499949,33.96904296874999],[-6.353125,34.77607421875001],[-5.924804687499943,35.78579101562502],[-5.277832031249943,35.90273437500002],[-5.252685546874972,35.61474609374997],[-4.628320312499966,35.206396484375006],[-4.329980468749937,35.161474609375006],[-3.693261718749994,35.27998046874998],[-3.394726562499926,35.21181640625005],[-2.972216796874989,35.40727539062499],[-2.839941406249949,35.127832031249994],[-2.731396484374955,35.13520507812498],[-2.636816406249977,35.11269531250002],[-2.423730468749994,35.12348632812498],[-2.219628906249966,35.10419921874998],[-1.795605468749926,34.751904296874955],[-1.67919921875,33.31865234375002],[-1.550732421874955,33.073583984375006],[-1.510009765625,32.877636718749955],[-1.45,32.784814453124966],[-1.352148437499977,32.70336914062497],[-1.29638671875,32.67568359375002],[-1.188232421875,32.608496093750006],[-1.111035156249983,32.55229492187502],[-1.065527343749949,32.46831054687496],[-1.16259765625,32.399169921875],[-1.275341796874983,32.089013671874966],[-2.863427734374937,32.07470703124997],[-2.930859374999926,32.04252929687499],[-2.988232421874983,31.874218749999983],[-3.01738281249996,31.834277343750017],[-3.439794921874949,31.704541015624983],[-3.604589843749949,31.686767578125],[-3.700244140624989,31.70009765625005],[-3.768164062499977,31.689550781250034],[-3.837109374999983,31.512353515624994],[-3.833398437499937,31.197802734375045],[-3.626904296874955,31.000927734374983],[-4.148779296874977,30.8095703125],[-4.322851562500006,30.698876953124994],[-4.52915039062492,30.62553710937499],[-4.778515624999926,30.552392578124994],[-4.968261718749943,30.465380859375045],[-5.061914062499937,30.326416015625057],[-5.180126953124955,30.166162109374994],[-5.293652343749983,30.058642578125045],[-5.44877929687496,29.956933593750023],[-6.00429687499999,29.83125],[-6.479736328124943,29.82036132812499],[-6.520556640624989,29.659863281249983],[-6.59775390624992,29.578955078125006],[-6.635351562499949,29.568798828124983],[-6.755126953125,29.583837890625034],[-6.855566406249949,29.601611328125017],[-7.142431640624949,29.61958007812504],[-7.427685546874983,29.425],[-7.485742187499994,29.392236328124994],[-8.659912109375,28.718603515625063],[-8.683349609375,27.900390625],[-8.683349609375,27.77800740805682]]]},"properties":{"name":"摩洛哥","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[-13.038761787013554,27.81190166624856],[-8.683349609375,27.
您好!对于使用 ECharts GL 绘制地球的问题,您可以参考以下步骤: 1. 首先,确保您已经引入了 ECharts GL 库。您可以在项目中使用 npm 安装或者直接通过 script 标签引入。 2. 创建一个 HTML 容器来展示地球图表。例如,您可以在 HTML 文件中添加一个 `<div>` 元素,并为其指定一个唯一的标识符(例如 "chart-container")。 3. 在 JavaScript 文件中,使用 ECharts GL 的对象创建一个地球图表实例,并将其绑定到之前创建的 HTML 容器上。例如: ```javascript // 获取HTML容器元素 var chartContainer = document.getElementById('chart-container'); // 创建地球图表实例 var chart = echarts.init(chartContainer); // 设置图表配置项和数据 var option = { // 在这里配置地球图表的相关属性和数据 // 例如,设置 series 为 'globe' 类型,以及其他的样式和数据配置 }; // 使用设置好的配置项和数据渲染地球图表 chart.setOption(option); ``` 4. 在配置项(`option`)中,您可以根据需要自定义地球图表的样式、数据以及交互行为。ECharts GL 提供了丰富的配置选项,您可以根据需求进行调整。具体的配置项可以参考 ECharts GL 的官方文档。 5. 最后,通过调用 `chart.setOption(option)` 方法来渲染地球图表到指定的 HTML 容器中。这样,您就可以在浏览器中看到绘制好的地球图表了。 希望以上步骤能够对您有所帮助!如有更多问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值