<template>
  <div id="map">
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import WUXI from "@/assets/wuxi.json";
export default {
  data() {
    return {}
  },
  methods: {
    initMap () {
      echarts.registerMap("wuxi", WUXI);
      let chart = echarts.init(document.querySelector("#map"))
      chart.setOption({
        series: [{
          type: 'map3D', // map、map3D
          map: 'wuxi', // 注册的地图名称
          name: "无锡",
          label: {
            // 标签的相关设置
            show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
            // distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
            // formatter:,               // 标签内容格式器
            textStyle: {
              // 标签的字体样式
              color: '#fff', // 地图初始化区域字体颜色
              // color: '#000', // 地图初始化区域字体颜色
              fontSize: 14, // 字体大小
              opacity: 1, // 字体透明度
            },
          },
          itemStyle: {
            color: '#3e5e67aa', // 地图板块的颜色borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            borderColor: 'rgb(147, 235, 248)', // 图形描边的颜色。[ default: #333 ]
            borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
          },
          emphasis: {
            // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
            label: {
              // TODO label高亮时的配置
              show: true
              // textStyle: {
              //   color: '#fff', // 高亮时标签颜色变为 白色
              //   fontSize: 15 // 高亮时标签字体 变大
              // }
            },
            itemStyle: {
              // TODO itemStyle高亮时的配置
              color: '#587683' // 高亮时地图板块颜色改变
            }
          },
          groundPlane: {
            // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            show: false, // 是否显示地面。[ default: false ]
            color: '#aaa' // 地面颜色。[ default: '#aaa' ]
          },
          light: {
            // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
            main: {
              // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#fff', // 主光源的颜色。[ default: #fff ]
              intensity: 1.2, // 主光源的强度。[ default: 1 ]
              shadow: true, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
              // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
              alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
              beta: 20 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
            },
            ambient: {
              // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
            }
          }
        }],
      })
      chart.on("click", (params) => {
        console.log(params)
      })
    }
  },
  computed: {},
  mounted() {
    this.initMap()
  }
}
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
