This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

I will share my notes with you during the learning process. I hope it will be helpful for you to grow and progress together 💪~ if you like it, you can like it or leave a message 💕~~~, thank you ⭐ ⭐ ⭐ ~~

🌏 Steps to achieve 3D Earth are as follows:

1. Download echarts.min.js, echarts-gl.min.js and d3.js files from the official website and introduce them into the HTML page

<script src=".. /.. / js/incubator - echarts - 4.9.0 / echarts. Min. Js. ""></script>
<script src=".. /.. /js/echarts-gl/echarts-gl.js"></script>
<script src=".. /.. /js/d3/d3.js"></script>
Copy the code

Create a div container with id showC for earth

<div id="showC"></div>
Copy the code

3, now create the earth to draw, the code below all attached:

<! DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 earth</title>
    <script src=".. /.. / js/incubator - echarts - 4.9.0 / echarts. Min. Js. ""></script>
    <script src=".. /.. /js/echarts-gl/echarts-gl.js"></script>
    <script src=".. /.. /js/d3/d3.js"></script>
    <style>
        html.body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        #showC {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="showC"></div>
</body>
<script>
    var baseImg = ".. /.. /img/data-1571295640429-3Co5rpLX.png"; // Background texture map
    var scanImg = ".. /.. /img/data-1571295559348-whnsd6fi.jpg"; // Scan the shadows
    var myChart = echarts.init(document.getElementById("showC"));
    var config = { // Scan the line configuration
        lineWidth: 0.5.// Scan the line width
        color: '#01CADE'.// Line color
        levels: 1.intensity: 3./ / strength
        threshold: 0.01
    }
    var canvas = document.createElement('canvas');
    canvas.width = 4096;
    canvas.height = 2048;
    context = canvas.getContext("2d");
    context.lineWidth = config.lineWidth;
    context.strokeStyle = config.color;
    context.fillStyle = config.color;
    context.shadowColor = config.color;
    image(scanImg).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.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({
            globe: {
                top: '5%'.globeRadius: 130.baseTexture: baseImg,
                displacementScale: 0.05.displacementQuality: 'high'.shading: 'realistic'.realisticMaterial: {
                    roughness: 0.2.metalness: 0
                },

                postEffect: {
                    enable: true.depthOfField: {
                        // enable: true}},light: {
                    ambient: {
                        intensity: 1
                    },
                    main: { / / the main light source
                        intensity: 0.shadow: false
                    },
                    /*ambientCubemap: { texture: ROOT_PATH + 'data-gl/asset/lake.hdr', exposure: 1, diffuseIntensity: 0.5, specularIntensity: 2} * /
                },
                viewControl: {
                    center: [0.0.0].alpha: 30.beta: 160.autoRotate: true.autoRotateAfterStill: 10.distance: 240.autoRotateSpeed: 4.targetCoord: [100.405051.30.912916]},layers: [{
                    type: 'blend'.blendTo: 'emission'.texture: contourChart,
                    intensity: config.intensity,
                }],
            },
            series: [{ / / points
                type: 'scatter3D'.// type: 'scatter',
                coordinateSystem: 'globe'.blendMode: 'source-over'.showEffectOn: 'render'.zlevel: 10.effectType: 'ripple'.// symbol:"path://data:img/png; base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6m AAAF3CculE8AAAAllBMVEX8xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38x V38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38xV38v0v7sSX7rx/7sSYAAACsGEOsAAAALHRSTlMAA iJCWWRhViBYZiEBN22Wsr+xlYS8wr1bwSRuy+v8JUT7RVpjvlfMA8CwO6U37FgAAAABYktHRDHZ2x1yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH5 QUYCTchBK9bdAAAAMxJREFUGNNtkdsSgjAMREMFLyuKoAZFQQXvVvT/v84UOoCO+9Se6c4mWyIjR/Vcrz/oKYcaDUewGo0t8ifoaOJX0LBpMAvDaD411DAlh 8WSK8ULuSjJWAlbs9Va6MqhBNjEzNs0y9KtvN0AO9oDc2EHLToIDYCcCiBiTvWzLJ86ZZ4BBR2BkDnT5etV6ow5BDzq/8CTgefG/q7skbHXQZc66GKD/o70Z /irXTP+XrMp5Ha6t4WQ/+hW9/Bto+O2ZNVW7yS563luntTf8QEebBqPN9S75gAAAABJRU5ErkJggg==",
                symbolSize: 15.rippleEffect: {
                    period: 4.scale: 4.brushType: 'fill'
                },
                hoverAnimation: true.itemStyle: {
                    normal: {
                        label: {
                            show: true.formatter: function (params) {
                                return params.data[3] + '\n' + params.data[4] + '\n' + params.data[5];
                            },
                            distance: 10}},emphasis: {
                        label: {
                            show: true.formatter: function (params) {
                                return params.data[3] + '\n' + params.data[4] + '\n' + params.data[5];
                            },
                            distance: 10}}},data: [[116.405051.39.912916.1."1"."Beijing"."La la la la la a"],
                    [104.071388.30.639088.2."2"."Sichuan Province"."La la la la la b"],
                    [121.493628.31.241707.3."3"."Shanghai"."La la la la la C"]]// data:data,}}]); myChart.dispatchAction({type: 'showTip'.// Display the prompt box according to the configuration items of tooltip.
            seriesIndex: 0.// dataIndex: 0
        });
    }
</script>
</html>
Copy the code

Effect drawing display:

Because the article can not put the video can only be shown in the format of THE GIF effect, the GIF is not very good, please understand 😊, mainly want to let you see the overall effect ~~~, you can also directly copy the code to their own local operation to see also can drop 😜~~~ welcome to read ~~~⭐️⭐️

Previous popular articles

  • Vue interview summary
  • Js frequently asked interview questions include detailed answers
  • Es6 related summary
  • JS array reduce() method
  • Js array sort ()
  • HTML Interview Summary
  • CSS Interview Summary
  • Wechat mini program interview summary
  • Css3 animation effects commonly used methods guide