vue中echart-gl 3D地图纹理实例

1. 安装

npm install echarts
npm install echarts-gl
1
2

2. vue组件

html部分

  
1
2
3
4
5

JS引入

import * as Echarts from 'echarts'
import 'echarts-gl'
import shanghai from 'shanghai.json'
1
2
3

核心方法

mounted () {
	this.initChart()
},
methods: {
   initChart () {
	  const vue = this
	  let myChart = Echarts.init(this.$refs.mapChart)
	  myChart.onresize = myChart.resize
	  Echarts.registerMap('shanghai', shanghai)
	  const options = {
		series:{
			name: 'shanghai',
			type: 'map3D',
			map: shanghai,
			aspectScale: 0.9,
			selectedMode: false,
			shading: 'realistic'
			// 后面添加各个属性OBJ
		}
	  }
	  myChart.setOption(options)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

地图初显效果

添加描边

  const itemStyle = {
    opacity: 1,
    borderWidth: 2,
    borderColor: '#01CAF8',
    shadowColor: 'red'
  }
1
2
3
4
5
6

添加区域图片纹理

  const realisticMaterial = {
    detailTexture: '/1.png',
    textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
    roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
    metalness: 0, // 0材质是非金属 ，1金属
    roughnessAdjust: 0
  }
1
2
3
4
5
6
7

添加区域鼠标移入效果

  const emphasis = {
    label: {
      show: true,
      color: '#FFF',
      fontSize: 20
    },
    itemStyle: {
      borderColor: '#41EB26',
      borderWidth: 5,
      color: '#41EB26' 
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

添加地级市的标签

  const label = {
    show: true,
    formatter: (params) => {
      name = params.data.name
      if (params.data.alias) name = params.data.alias
      return name
    },
    textStyle: {
      backgroundColor: 'transparent',
      color: '#FFF',
      fontSize: '20',
      padding: 0
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

此时效果图

颜色有点暗对，添加光线（intensity：环境光强度，值越大，越亮）

  const light = {
    main: {
      color: '#fff',
      intensity: 1,
      shadow: false,
      shadowQuality: 'high',
      alpha: 8,
      beta: 80
    },
    ambient: {
      color: '#fff', 
      intensity: 1
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

后续

点击事件（可用）

 myChart.off('click')
    myChart.on('click', function (params) {
 }）
1
2
3

3. 总结

很对人遇到myChart.off(‘click’)不生效，是因为，你地图在geo上面的。series这儿就没问题了。