大屏可視化繪制關(guān)聯(lián)配置繪制3D地球

為 ECharts 準(zhǔn)備一個定義了寬高的 DOM

 <div :id="'container' + attrs.id" :style="
        'width:' + (attrs.width) + 'px;'
        + 'height:' + (attrs.height) + 'px;' + 'z-index:1;'">
</div>

實(shí)例化

        //初始化地圖
        async initEcharts() {
            this.chart = echarts.init(document.getElementById('container' + this.attrs.id))

            //構(gòu)建填充option
            this.buildOption()

            this.chart.setOption(this.option)
        },

指定圖表的配置項(xiàng)和數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-510929.html

        buildOption() {
            let style = this.attrs.style
            this.option = {
                backgroundColor: style.backgroundColor,
                globe: {
                    // show: false,
                    globeRadius: style.globeRadius, // 地球的半徑
                    globeOuterRadius: style.globeOuterRadius, // 地球的外半徑
                    baseTexture: style.heightTextureSrcEnable ? (style.heightTextureSrc ? this.heightTextureSrc : require("../zImage/gl/world.topo.bathy.200401.jpg")) : '',  //  背景圖  地球的紋理
                    heightTexture: style.heightTextureSrcEnable ? (style.heightTextureSrc ? this.heightTextureSrc : require("../zImage/gl/world.topo.bathy.200401.jpg")) : '', // 背景圖凹凸貼圖  地球的高度紋理
                    displacementScale: style.displacementScale, // 地球頂點(diǎn)位移的大小
                    displacementQuality: style.displacementQuality, //地球頂點(diǎn)位移的質(zhì)量。支持設(shè)置成 'low', 'medium', 'high', 'ultra'
                    shading: style.shading, //地球中三維圖形的著色效果  color  lambert  realistic
                    environment: style.environmentEnable ? (style.environmentSrc ? this.environmentSrc : require("../zImage/gl/Milkyway/Milkyway_BG.jpg")) : '', // 環(huán)境貼圖
                    realisticMaterial: {
                        roughness: style.realisticMaterialRoughness, // 粗糙度
                    },
                    // 后處理特效的相關(guān)配置
                    postEffect: {
                        enable: style.postEffectEnable, // 是否開啟后處理特效
                        // 高光特效
                        bloom: {
                            enable: style.postEffectBloomEnable,
                            bloomIntensity: style.postEffectBloomBloomIntensity,
                        },
                        // 景深效果
                        depthOfField: {
                            enable: style.depthOfFieldEnable,
                            focalDistance: style.depthOfFieldFocalDistance, // 初始的焦距
                            focalRange: style.depthOfFieldFocalRange, //完全聚焦的區(qū)域范圍
                            fstop: style.depthOfFstop,  //鏡頭的F值，值越小景深越淺。
                            blurRadius: style.depthOfBlurRadius,  // 模糊半徑
                        },
                        SSAO: {
                            enable: style.SSAOEnable,
                            quality: style.SSAOQuality, // 環(huán)境光遮蔽的質(zhì)量
                            radius: style.SSAORadius, // 采樣半徑
                            intensity: style.SSAOIntensity, // 環(huán)境光遮蔽的強(qiáng)度  值越大顏色越深
                        }
                    },
                    // 光照相關(guān)的設(shè)置  shading 為 'color' 的時候無效
                    light: {
                        // 主光源
                        main: {
                            color: style.lightMainColor, // 主光源的顏色
                            intensity: style.lightMainIntensity, // 主光源的強(qiáng)度
                            shadow: style.lightMainShadow, // 主光源是否投射陰影
                            shadowQuality: style.lightMainShadowQuality, // 陰影質(zhì)量

                        },
                        ambient: {
                            color: style.lightAmbientColor,// 環(huán)境光的顏色
                            intensity: style.lightAmbientIntensity, // 環(huán)境光的強(qiáng)度
                        },
                    },
                    // 地球外部大氣層相關(guān)設(shè)置
                    atmosphere: {
                        show: style.atmosphereShow, // 是否顯示外部大氣層
                        color: style.atmosphereColor,
                        glowPower: style.atmosphereGlowPower, // 外部大氣層發(fā)光功率
                        innerGlowPower: style.atmosphereInnerGlowPower, // 外部大氣層內(nèi)發(fā)光功率
                    },
                    // 鼠標(biāo)的旋轉(zhuǎn)，縮放等視角控制
                    viewControl: {
                        projection: style.viewControlProjection, // 投影方式，默認(rèn)為透視投影'perspective'，也支持設(shè)置為正交投影'orthographic'
                        autoRotate: style.viewControlAutoRotate, // 是否開啟視角繞物體的自動旋轉(zhuǎn)查看。
                        autoRotateDirection: style.viewControlAutoRotateDirection, // 物體自轉(zhuǎn)的方向 'cw'順時針方向 'ccw'逆時針方向
                        autoRotateSpeed: style.viewControlAutoRotateSpeed, // 物體自轉(zhuǎn)的速度  單位為角度 / 秒，默認(rèn)為10 ，也就是36秒轉(zhuǎn)一圈
                        autoRotateAfterStill: style.viewControlAutoRotateAfterStill, // 在鼠標(biāo)靜止操作后恢復(fù)自動旋轉(zhuǎn)的時間間隔
                        zoomSensitivity: style.viewControlZoomSensitivity, // 鼠標(biāo)靈敏度
                        distance: style.viewControlDistance, // 默認(rèn)視角距離主體的距離
                        minDistance: style.viewControlMinDistance, // 鼠標(biāo)控制能拉近到主體的最小距離
                        maxDistance: style.viewControlMaxDistance, // 鼠標(biāo)控制能拉遠(yuǎn)到主體的最大距離
                    },
                },
                series: [
                    {
                        type: 'lines3D',
                        coordinateSystem: 'globe',
                        blendMode: style.blendMode,  // 'lighter'是疊加模式  'source-over'是通過 alpha 混合
                        // 飛線尾跡特效
                        effect: {
                            show: style.effectShow,
                            period: style.effectPeriod, // 尾跡周期 
                            constantSpeed: style.effectConstantSpeed, // 軌跡特效的移動動畫是否是固定速度
                            trailWidth: style.effectTrailWidth, //尾跡的寬度。
                            trailLength: style.effectTrailLength, // 尾跡的長度，范圍從 0 到 1，為線條長度的百分比
                            trailColor: style.effectTrailColor,  //尾跡的顏色
                            trailOpacity: style.effectTrailOpacity, // 尾跡的不透明度
                            // symbol: 'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',
                            symbol: "arrow", //箭頭圖標(biāo)
                            symbolSize: 10, //圖標(biāo)大小
                        },
                        lineStyle: {
                            width: style.lineStyleWidth,
                            color: style.lineStyleColor,
                            opacity: style.lineStyleOpacity,// 線條的不透明度
                        },
                        data: [
              [
                [-75.440806, 40.652083],
                [80.943139, 35.214],
              ],
              [
                [86.02, 37.77],
                [-109.09, 41.82],
              ],
              [
                [90.24, 35.23],
                [-61.63, -21.06],
              ],
              [
                [113.62, 25.23],
                [91.82, 36.79],
              ],
              [
                [112.57, 25.39],
                [149.66, -29.17],
              ],
              [
                [24.5, -18.41],
                [113.97, 32.01],
              ],
              [
                [-9.43, 15.18],
                [-66.2, 1.48],
              ],
            ],
                    },
                ],
            };

        },

到了這里，關(guān)于使用echarts-gl 繪制3D地球配置詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！