漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化

最新推荐文章于 2024-08-14 10:04:32 发布

漏刻有时

最新推荐文章于 2024-08-14 10:04:32 发布

阅读量1.3k

点赞数 3

分类专栏：漏刻有时地图开发 echarts 文章标签： echarts javascript

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/120387478

版权

漏刻有时同时被 3 个专栏收录

287 篇文章 17 订阅

订阅专栏

echarts

205 篇文章 29 订阅

订阅专栏

地图开发

143 篇文章 30 订阅

订阅专栏

Echarts地图整体渐变（1）

漏刻有时数据可视化Echarts组件开发(21):

Echarts地图整体渐变（2）

Echarts地图卫星云图（3）

Echarts地图卫星云图（4）

在这里插入图片描述

Echarts地图冰雪效果（5）

在这里插入图片描述

Echarts地图蓝色天空（6）

在这里插入图片描述

Echarts地图冰雪奇缘（7）

在这里插入图片描述

Echarts地图冰雪奇缘（8）

代码属性

三维地理坐标系组件

geo3D =
        {
            show: false,
            type: 'map3D',
            name: 'map3D',
            map: map,//地图注册名称;
            viewControl: {
                // autoRotate: true,//自动旋转
                minBeta: -3600,//每次旋转3600/360=10圈
                maxBeta: 3600//每次旋转3600/360=10圈
            },
            zlevel: -20
        };

itemStyle属性的调整

            itemStyle: {
                //color: 'rgba(39,165,100,1)', // 图形的颜色
                areaColor: 'rgba(39,165,100,1)',//地图区域的颜色
                opacity: 1,//图形透明度
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.3)', // 地图边配色
            },

材质属性

            shading: 'realistic',
            realisticMaterial: {
                detailTexture: 'images/baixue.jpg',
                roughness: 0
            },

鼠标控制

            viewControl: {
                // autoRotate: true,
                minBeta: -3600,
                maxBeta: 3600
            },

光照效果

            light: {
                main: {
                    color: '#fff', //光照颜色
                    intensity: 1.2, //光照强度
                    shadowQuality: 'high', //阴影亮度
                    shadow: true, //是否显示阴影
                    alpha: 55,
                    beta: 10
                },
                ambient: {
                    intensity: 0.3
                }
            },