apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.45k stars 19.61k forks source link

echarts3D地球在pc端正常显示,在移动端显示不正常 #8995

Closed xiaolove closed 6 years ago

xiaolove commented 6 years ago

One-line summary [问题简述]

用echarts做了个3D的地球,按照官方的示例做的效果,在pc端用了很久,没有问题,当其在移动端加载的时候,并没有显示贴图。地球变成了黑色,国界轮廓等是白色线条。

Version & Environment [版本及环境]

Expected behaviour [期望结果]

希望移动端加载地球时可以正常显示,不会出现上述问题

ECharts option [ECharts配置项]

                       //地球相关配置项
                        var  option = {
                            tooltip:{
                                trigger:'item',
                                formatter:function(params){
                                    return params.name;
                                }
                            },
                            viewControl:{
                                center:[]
                            },
                            backgroundColor: '#000',
                            globe: {
                                baseTexture: "imgs/world_1.jpg",
                                heightTexture: "imgs/world_2.jpg",
                                shading: 'color',
                                // environment: 'imgs/bg.jpg',
                                light: {
                                    main: {
                                        intensity:3,
                                    },
                                    ambient: {
                                        intensity:3
                                    },
                                },
                                viewControl: {
                                    autoRotate: false,
                                    targetCoord: [116.46, 39.92]
                                },
                                layers: [{
                                    type: 'blend',
                                    texture: echartsMap
                                }]
                            },  
                            series : [
                                {
                                    name:'',
                                    type: 'scatter3D',
                                    coordinateSystem: 'globe',
                                    data: markData,
                                    blendMode:'lighter',
                                    symbolSize: 10,
                                    hoverAnimation: true,
                                    label: {
                                        normal: {
                        //                     formatter: '{c}',
                                            position: 'right',
                                            show: false
                                        },
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                                color:function(params){
                                                    if(params.data.idData.isAlarm){
                                                        return "red"
                                                    }else{
                                                        return "#05C3F9"
                                                    }
                                                }
                                        },
                                        emphasis: {
                                            color: 'yellow'
                                        }
                                    },
                                    animation:true
                                },
                            ]
                        }

Other comments [其他信息]

我们这个地球是一个单独的html页面,通过iframe引入到其它页面中,在pc端没有问题,到了移动端就显示不正常,如下图所示。第一张是Pc端,第二张是移动端。尝试过缩小图片,不行。请帮忙看看,望早日解决,谢谢。 map _20180903100058

pissang commented 6 years ago

用一个分辨率低一点的贴图试试

rdsuncn commented 3 years ago

我也出现这样的问题,div 像素高度>1490px 的时候,在手机上就不出来了,地球变成了黑色。电脑浏览器一直没问题。

`globe: { baseTexture: ROOT_PATH + "img/earth.jpg", // heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',

            displacementScale: 0.1,

            shading: 'color',
            // shading: 'realistic',

            postEffect: {
                enable: true
            },
            realisticMaterial: {
                roughness: 0.9
            },
            // environment: ROOT_PATH + "img/starfield.jpg",

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

            // layers: [{
            //  type: 'blend',
            //  blendTo: 'emission',
            //  texture: ROOT_PATH + "img/night.jpg"
            // }],

            viewControl: {
                autoRotateSpeed: 3,
                distance: 600,
                autoRotateAfterStill: 0.0001,//鼠标停止后多久恢复旋转(为0时暂停后不恢复旋转)
                targetCoord: [116.46, 39.92],//定位到哪里
                zoomSensitivity: 0,
                panSensitivity: 0,
                rotateSensitivity: 0,
                //rotateSensitivity: 1,
                //autoRotate:true,
                //rotateMouseButton: 'none'
            }
        },`

ECharts version 5

AlwaysMing commented 1 year ago

我也遇到了,不过我是安卓可以,苹果手机baseTexture就是出不来,一个光球球