echars 3D地图为区域自定义颜色

问题

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

延伸

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

• 采用的是Vue框架中运用echarts
• 地图采用的是geo3D和scatter3D

当然他的实现很简单

• 首先我们要初始化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);
  

解决问题

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

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

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

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

你学会了吗