3d 区域地图

项目中遇到需求需要画区域的3d地图（rich在3d地图里面无效，rich富文本是在显示的文本那边定义的样式啥的，可以参考我的另一篇文章：https://www.jianshu.com/p/d0684e664891）
json或js文件要自己在百度上下载，我这个是比较小的区域，百度上没有提供市级下面的小县城的，所以我自己画的，然后导出的
效果图（画图或者下载行政区域的文件，可以去我的另一篇文章：https://www.jianshu.com/p/4d83b58a3110）

image.png
首先得安装echarts和echarts-gl

npm install echarts
npm install echarts-gl

然后在使用的页面引入

import echarts from 'echarts'
import 'echarts-gl'

<template>
  <div>
    <div id="addressMap" style="height: 100vh;width: 100vw;background-color: #000"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import 'echarts-gl'
import jianou from '../dataScreen/jianou.js'
export default {
  data () {
    return {
      mapAry: []
    }
  },
  mounted () {
    this.mapAry = [
      [{ name: '建瓯' }, { name: '东峰镇', value: 0 }],
      [{ name: '建瓯' }, { name: '东游镇', value: 0 }],
      [{ name: '建瓯' }, { name: '水源乡', value: 0 }],
      [{ name: '建瓯' }, { name: '顺阳乡', value: 0 }],
      [{ name: '建瓯' }, { name: '小松镇', value: 0 }],
      [{ name: '建瓯' }, { name: '龙村乡', value: 0 }],
      [{ name: '建瓯' }, { name: '川石乡', value: 0 }],
      [{ name: '建瓯' }, { name: '玉山镇', value: 0 }],
      [{ name: '建瓯' }, { name: '小桥镇', value: 0 }],
      [{ name: '建瓯' }, { name: '徐墩镇', value: 0 }],
      [{ name: '建瓯' }, { name: '迪口镇', value: 0 }],
      [{ name: '建瓯' }, { name: '房道镇', value: 0 }],
      [{ name: '建瓯' }, { name: '吉阳镇', value: 0 }],
      [{ name: '建瓯' }, { name: '建安街道', value: 0 }],
      [{ name: '建瓯' }, { name: '芝山街道', value: 0 }],
      [{ name: '建瓯' }, { name: '通济街道', value: 0 }],
      [{ name: '建瓯' }, { name: '瓯宁街道', value: 0 }]
    ]
    // this.drawMap1(this.mapAry, 'addressMap', 'transparent', 0)
    this.drawMap1('addressMap')
  },
  methods: {
    drawMap1 (div) {
      var city = [
        { name: '东峰镇', value: 31 },
        { name: '东游镇', value: 38 },
        { name: '水源乡', value: 47.9},
        { name: '顺阳乡', value: 196.3 },
        { name: '小松镇', value: 102 },
        { name: '龙村乡', value: 42.3 },
        { name: '川石乡', value: 30.8 },
        { name: '玉山镇', value: 369.4 },
        { name: '小桥镇', value: 65.2 },
        { name: '徐墩镇', value: 129.8 },
        { name: '迪口镇', value: 90.5 },
        { name: '房道镇', value: 395.5 },
        { name: '吉阳镇', value: 137.8 },
        { name: '南雅镇', value: 137.8 },
        { name: '建安街道', value: 156.2 },
        { name: '芝山街道', value: 104.6 },
        { name: '通济街道', value: 232.4 },
        { name: '瓯宁街道', value: 232.4 }
      ]
      echarts.registerMap('jianou', jianou)
      let myChart = echarts.init(document.getElementById(div))
      myChart.off('click') // 解决点击多次多次触发的问题
      var min = 0
      var max = 300
      var option = {
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (params) {
            let content = params.name + '：' + params.value
            return content
          }
        },
        backgroundColor: 'transparent',
        visualMap: {
          show: false,
          min: min,
          max: max,
          inRange: {
            color: ['#e0ffff', '#006eed']
            //  color: ['red', 'pink']
          },
          calculable: true
        },
        series: {
          name: 'jianou',
          type: 'map3D',
          map: 'jianou',
          data: city,
          regionHeight: 2,
          boxWidth: 60, // 地图的长宽比例
          boxDepth: 50,
          label: {
            show: true,
            formatter: function (params) {
              let content = params.name
              return content
            },
            textStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: 12,
              backgroundColor: 'rgba(0,23,11,0)'
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              textStyle: { color: '#000' }
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 0.4
            }, // 阴影效果
            emphasis: {
              color: 'rgb(255,255,255)'
            }
          },
          viewControl: {
            rotateSensitivity: 0,
            projection: 'orthographic',
            orthographicSize: 40, // 控制地图大小
            maxOrthographicSize: 40,
            minOrthographicSize: 40,
            autoRotate: false,
            animation: true
          }
        }
      }
      myChart.setOption(option)
      myChart.on('click', function(params) {
        var cout = params.data.name
        console.log('xxxxxx',params)
      })
    }
  }
}
</script>