vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）

 

 一、下载地图json数据：免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang (hxkj.vip)

 二、组件引入，修改地图json数据和下载插件后可直接使用

<template>
  <div id="map3decharts">
    <div id="lineChart"></div>
  </div>
</template>
<script>
import mapDataCq from "@/assets/mapjson/linxi3.json";

import $ from 'jquery';
// import echarts from 'echarts'
// 导入echarts库以及地图扩展模块
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/lib/component/geo';
import "echarts-gl" //3D地图插件

export default {
  props: {
    multipleTreeData: {
      type: Object,
      default: () => {
        return {}
      }
    },

  },
  data() {
    return {
      mapDataCqG: mapDataCq,
    };
  },
  mounted() {
    console.log("重庆地图数据", this.mapDataCqG);
    // console.log("echarts", echarts);
    this.lineChart = echarts.init(document.getElementById("lineChart"));
    this.$nextTick(() => {
      this.setLineChart(this.mapDataCqG, '#082F5F');
 
    });
  },
  methods: {
    setLineChart(nval, mapColor) {
      echarts.registerMap('map', nval);
      //3D地图旋转主要配置
      // var viewControl={
      //     alpha: 50, // 上下旋转的角度
      //     beta: -2, // 左右旋转的角度
      //     rotateSensitivity: 3, // 旋转操作的灵敏度
      //     panSensitivity: 3,
      //     panMouseButton: 'right',
      //     distance: 180,
      //     minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
      //     maxAlpha: 100, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
      //     minBeta: 25, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
      //     maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
      //     animation: false, // 是否开启动画。[ default: true ]
      //     animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
      //     animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
      // };

      let option = {
        backgroundColor: 'black',
        geo3D: {
          map: 'map',
          regionHeight: 6, //地图厚度
          itemStyle: {
            color: 'rgb(8,32,53)',
            borderWidth: 2, //分界线宽度
            borderColor: '#409EFF', //分界线颜色
          },
          // environment: 'https://cdn.polyhaven.com/asset_img/primary/syferfontein_18d_clear_puresky.png?height=780',
          environment: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780',
          // environment: require('@/assets/mapjson/地图01.png'),
          shading: 'lambert',
          label: {
            show: true,
            alignText: 'center',
            color: '#fff', //文字颜色
            fontSize: 18, //文字大小
            position:[100,100],
            padding: [5, 10],
            alignText: 'center',
            lineHeight: 24,
            backgroundColor: 'rgba(0,0,0,0.35)', //透明度0清空文字背景
            borderWidth: 1.5, //分界线宽度
            borderRadius: 5,
            borderColor: '#F2A451', //分界线颜色
            formatter: function (params) {
                // console.log("渲染", params);
                // if(params.name=='内蒙古林西工业园区' || params.name=='城北街道办事处筹备处' || params.name=='城南街道办事处筹备处'){
                //   return ` `
                // }else{
                //   return params.name
                // }
                return params.name
               
              }
      
          },
          // 设置单独区域样式
          regions: [],
          // hover高亮颜色
          emphasis: {
            label: {
              formatter: function (params) {
                // console.log("hover", params);
                return params.name
              }
            },
            itemStyle: {
              color: '#1341BE',
              opacity: 0.9, // 透明度
              borderWidth: 1, //分界线宽度
              borderColor: '#00EBFF', //分界线颜色
            },
          },
          shading: 'realistic',
          // 真实感材质相关配置 shading: 'realistic'时有效
          realisticMaterial: {
            detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/painted_concrete.png?height=780', // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 0
          },
          // shading 为color 时无效
          light: {
            //光照阴影
            main: {
              color: "#fff", //光照颜色
              intensity: 5, //光照强度
              shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          },

          // viewControl: viewControl,
          viewControl: {
            distance: 150, // 地图视角 控制初始大小
            // rotateSensitivity: 0, // 旋转
            // zoomSensitivity: 0, // 缩放
            // autoRotate: false,
            // maxBeta: Infinity,
            // minBeta: -Infinity,
            beta: 15, //旋转视角
            alpha: 40, //视角
            panMouseButton: 'left',
            rotateMouseButton: 'right',
            center: [5, -10, 0],
          },
        },

        series: [
          {
            type: 'lines3D',
            coordinateSystem: 'geo3D',
            effect: {
              show: true,
              trailWidth: 2,
              trailOpacity: 0.8,
              trailLength: 2,
              constantSpeed: 120,
            },
            blendMode: 'source-over',
            lineStyle: {
              width: 12,
              opacity: .9,
            },
            data: [
              [
                [106.360329, 29.630748],
                [109.226216, 30.82779],
              ],
            ],
          },
          {
            type: "map3D",
            map: "map",
            top: "-12",

            left: "-2",
            itemStyle: {
              opacity: 0,  //设置opacity透明度为0
              borderWidth: 0,
            },
            regionHeight: 8,
            viewControl: {

              distance: 150, // 地图视角 控制初始大小
              // rotateSensitivity: 0, // 旋转
              // zoomSensitivity: 0, // 缩放
              // autoRotate: false,
              // maxBeta: Infinity,
              // minBeta: -Infinity,
              beta: 15, //旋转视角
              alpha: 40, //视角
              panMouseButton: 'left',
              rotateMouseButton: 'right',
              center: [5, -10, 0],
            },
            zlevel: 10,
          },



        ],
      };
      this.lineChart.setOption(option);
      window.addEventListener("resize", () => {
        this.lineChart.resize();
      });
     
      //  监听
      this.lineChart.on("click", params => {
        console.log(1, params);
        let newObj = {
          name: params.name,
          itemStyle: {
            color: '#1341BE',
            opacity: 0.9, // 透明度
            borderWidth: 1, //分界线宽度
            borderColor: '#00EBFF', //分界线颜色

          },
          height: 12,

        };
        if (option.geo3D.regions && option.geo3D.regions[0] && option.geo3D.regions[0].name && option.geo3D.regions[0].itemStyle && option.geo3D.regions[0].name == params.name) {
          option.geo3D.regions[0] = { name: params.name, };
        } else {
          option.geo3D.regions[0] = newObj;
        }
        this.lineChart.setOption(option);
      })
    },
  }
};
</script>
 
<style lang="scss" scoped> #map3decharts {
   width: 100%;
   height: 100%;

   #lineChart {
     width: 100%;
     height: 100%;
     //  background-color: red;
   }




 }
</style>