echars中3D地图为区域自定义颜色的示例分析

发布时间:2021-08-29 08:52:55 作者:小新
来源:亿速云 阅读:487

这篇文章主要介绍echars中3D地图为区域自定义颜色的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

问题

根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示

echars中3D地图为区域自定义颜色的示例分析

延伸

首先跟大家介绍这个地图的展示方式:

当然他的实现很简单

首先我们要初始化echarts

let echartsMap = this.$echarts.init(this.$refs.echartsMap);

注册地图

this.$echarts.registerMap('河南', dataGeoLocation);
//后面的dataGeoLocation是我们下载下载的地图json文件然后引入到当前
//组件中进行使用的,前面的河南则是我们要注册的地图

设置option对象

这里面的配置是根据自己的项目需求而来的 自己可以看文档都有详细的介绍

 this.echartsDataMap = {
              visualMap: {
                min: 0,
                max: 500,
                show: false,
                inRange: {
                  color: ['#eac736', '#6EAFE3'].reverse()
                },

              },
              globeRadius: 100,
              globeOuterRadius: 100,
              geo3D: {
                map: mapName,
                viewControl: {
                  center: [0, 0, 0],
                  alpha: 100,//上下旋转角度
                  beta: 10,//左右旋转角度
                  animation: true,//是否动画显示
                  animationDurationUpdate: 1000,//动画时间
                  distance: 130,//视角到主题距离
                  minBeta: -9999,//最小(左)旋转度数
                  maxBeta: 9999,//最多(右)旋转角度
                  autoRotate: false,
                  autoRotateDirection: 'cw',
                  autoRotateSpeed: 10,

                },
                splitArea:{
                  areaStyle:{
                    color:'red',
                  }
                },
                light: {
                  main: {
                    intensity: 1.2,
                    // color: 'transparent',
                    color: '#0D3867',
                    shadowQuality: 'ultra',
                    shadow: true,
                    alpha: 150,
                    beta: 200
                  },
                  ambient: {
                    intensity: 1,//环境光强度
                  },
                  ambientCubemap: {
                    diffuseIntensity: 1,
                    texture: ''
                  }
                },
                groundPlane: {
                  show: false
                },
                postEffect: {
                  enable: false
                },
                itemStyle: {
                  color: '#175096',
                  borderColor: 'rgb(62,215,213)',
                  opacity: 0.8,//透明度
                  borderWidth: 1
                },
                label: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  },
                  itemStyle: {
                  }
                },
                silent: false, // 不响应和触发鼠标事件
              },
              series: [
                {
                  type: 'scatter3D',
                  coordinateSystem: 'geo3D',
                  data: this.areaName
                  symbol: 'circle',
                  symbolSize: 0,
                  silent: false, // 不响应和触发鼠标事件
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  label: {
                    distance: 30,
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    bottom: '100',
                    textStyle: {
                      color: '#fff',
                      marginTop: 40,
                      fontSize: 16,
                      // fontWeight:'bold',
                      backgroundColor: 'transparent',
                    }
                  }
                },
                {

                  type: 'scatter3D',
                  coordinateSystem: 'geo3D',
                  data: pinArr,
                  color: '#6EAFE3',
                  symbol: 'pin',
                  symbolSize: 56,
                  symbolOffset: ['100%','50%','0'],
                  silent: false, // 不响应和触发鼠标事件
                  itemStyle: {
                    textAlign: 'center',
                    borderColor: '#6EAFE3',
                    backgroundColor: '#6EAFE3',
                    borderWidth: 0
                  },
                  zlevel: -10,
                  label: {
                    show: true,
                    distance: -45,
                    // left:-10,
                    position: 'bottom',
                    formatter: (data) => {
                      return data.value[3] + '     ';
                    },
                    textStyle: {
                      color: '#333',
                      backgroundColor: 'transparent'
                    }
                  }
                },

              ]
            };

将option实例到我们的echarts上

echartsMap.setOption(this.echartsDataMap);

解决问题

回头我们来看文章开头的问题,在百度上找到了很多方式,经过尝试好像没有什么效果,其实能够解决我也是根据网上提供的办法进行改进后就实现了

echars中3D地图为区域自定义颜色的示例分析
echars中3D地图为区域自定义颜色的示例分析

这是我在众多方式中找到的比较靠谱的一种方式,这里他说的是再geo中去添加regions即可,其实是这样的 但是我添加后没有效果,原因就是我的是geo3D而他的是geo,但是问题不大,经过我在三的尝试最终发现原来他们两个中仅仅是写法不一样

regions: [      
                {
                  name: '郑州市', /
                  itemStyle: {
                      color: 'green'
                  }
                },{
                  name: '南阳市', 
                  itemStyle: {
                      color: 'green'
                  }
                },{
                  name: '商丘市',
                  itemStyle: {
                      color: 'green'
                  }
                }]

我们只需要更正一下color的设置形式然后添加到我们的geo3D中就可以了

echars中3D地图为区域自定义颜色的示例分析

以上是“echars中3D地图为区域自定义颜色的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. OpenCV中图像颜色反转算法的示例分析
  2. 使用matplotlib怎么实现区域颜色填充

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

echarts

上一篇:mybatis使用resultMap获取不到值怎么办

下一篇:mybatis查询结果映射不到对象怎么处理

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》