问题

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

延伸

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

• 采用的是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.areaNamesymbol: '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中就可以了

你学会了吗