echarts 3D省市区域地图 + 2D的曲线+2D的label提示框 + 2D 的涟漪

缺点：引出线（虚线）和提示框 ，以及 涟漪是2D 的，所以地图是不能旋转和缩放的，否则就会乱套
以下图就是错误示范：

上代码：

<template>
  <div class="bg">
    <div id="threeDmap"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
import icon from "../../../../assets/img/icon.png";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    getMap() {
      var dom = document.getElementById("threeDmap");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = mapJson;

      myChart.showLoading();
      myChart.hideLoading();
      echarts.registerMap("gansu", geoJson);
      myChart.setOption(
        (option = {
          geo3D: {
            map: "gansu",
            roam: false,
            zlevel: "8",
            itemStyle: {
              color: "#0479B1",
              opacity: 1,
              borderWidth: 0.4,
              borderColor: "#000",
            },
            // 动画效果
            viewControl: {
              autoRotate: false,

              // autoRotateAfterStill: 3,
              // distance: 95, //可以改变地图远近距离---即大小
              // minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              // alpha: 20, //Y轴旋转
              // maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              // minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              // beta: 0, //x轴旋转
              // maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              // animation: false, // 是否开启动画。[ default: true ]
              // animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              // animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
              panMouseButton: "center", //平移操作使用的鼠标按键
              rotateMouseButton: "left", //旋转操作使用的鼠标按键
              rotateSensitivity: 0, //禁止旋转地图
              zoomSensitivity: "0", //实现禁止缩放地图
            },
            // 鼠标经过样式
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: "#333", //显示字体颜色
                fontSize: 14, //显示字体
              },
              itemStyle: {
                color: "#fff", //显示移入的区块变白色
              },
            },
            select: {
              disabled: true, //不能点击地图
            },
            label: {
              show: true,
              position: "top",
              color: "#333", //地图初始化区域字体颜色
              fontSize: 14,
            },
            shading: "lambert",
            light: {
              //光照阴影
              main: {
                // color: "#fff", //光照颜色
                intensity: 0.8, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: "height", //阴影质量 ultra //阴影亮度
                alpha: 40,
                beta: 10,
              },
              ambient: {
                intensity: 0.7,
              },
            },
            // 对不同的区块进行着色
            regions: [
              {
                name: "酒泉市",
                itemStyle: {
                  color: "#0DF5FF",
                },
              },
              {
                name: "嘉峪关市",
                itemStyle: {
                  color: "#0EEAF2",
                },
              },
              {
                name: "张掖市",
                itemStyle: {
                  color: "#0EEAF2",
                },
              },
              {
                name: "金昌市",
                itemStyle: {
                  color: "#07CEE1",
                },
              },
              {
                name: "武威市",
                itemStyle: {
                  color: "#0CB0D1",
                },
              },
              {
                name: "庆阳市",
                itemStyle: {
                  color: "#08A2C8",
                },
              },
              {
                name: "白银市",
                itemStyle: {
                  color: "#08A2C8",
                },
              },
              {
                name: "兰州市",
                itemStyle: {
                  color: "#08A2C8",
                },
              },
              {
                name: "定西市",
                itemStyle: {
                  color: "#0B95C2",
                },
              },
              {
                name: "临夏回族自治州",
                itemStyle: {
                  color: "#0B95C2",
                },
              },
              {
                name: "平凉市",
                itemStyle: {
                  color: "#0593C0",
                },
              },
              {
                name: "天水市",
                itemStyle: {
                  color: "#0484B9",
                },
              },
              {
                name: "甘南藏族自治州",
                itemStyle: {
                  color: "#0484B9",
                },
              },
            ],
          },
          // 这个地图在页面中看不到，只是为了定位lines(2D的虚线引出线和提示框) 和 涟漪
          geo: {
            zlevel: "8",
            show: true,
            map: "gansu",
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%", //地图大小
            roam: false,
            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff",
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "rgba(255,255,255,0)",
                borderColor: "rgba(255,255,255,0)",
                borderWidth: 0,
              },
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                borderColor: "rgba(255,255,255,0)",
                areaColor: "rgba(255,255,255,0)",
              },
            },
            select: {
              disabled: true, //不能点击地图
            },
          },
          series: [
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: "8",
              effect: {
                show: true,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 10, //图标大小
                color: "rgba(255,255,255,0)", // 图标颜色
              },
              lineStyle: {
                type: [3, 5],
                dashOffset: 5,
                show: true,
                width: 2.5, //尾迹线条宽度
                opacity: 0.4, //尾迹线条透明度
                curveness: -0.5, //尾迹线条曲直度
                color: "#ABF9BF", // 飞线颜色
              },
              label: {
                show: true,
                position: "start",
                formatter: function (params) {
                  //文本提示框
                  return (
                    "\n\n{title|" +
                    "甘肃东方韵药业科技有限公司" +
                    "}\n{value|" +
                    "" +
                    "}"
                  );
                },
                width: 90,
                height: 275,
                align: "center",
                rich: {
                  //标题样式
                  title: {
                    width: 100,
                    align: "center",
                    lineHeight: 30,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#00FFFB",
                    padding: [3, 4, 30, 6],
                  },
                  value: {
                    //内容样式
                    height: 90,
                    width: 60,
                    backgroundColor: {
                      image: icon,
                    },
                  },
                },
              },
              data: [
                {
                  coords: [
                    [108, 40], // 起点
                    [97, 39.744023], // 终点
                  ],
                },
              ],
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              effectType: "ripple", //涟漪特效
              showEffectOn: "render",
              // 散点样式
              rippleEffect: {
                color: "#A5F590",
                period: 2, // 涟漪特效的动画周期
                scale: 8, // 涟漪特效动画中波纹的最大缩放比例
                brushType: "fill", // 涟漪特效的波纹绘制方式
              },
              // 散点大小
              symbolSize: 5,
              hoverAnimation: true,
              // 标志的样式
              itemStyle: {
                color: "rgba(255,255,255, .7)",
              },
              zlevel: 9,
              data: [{ value: [97, 39.744023] }],
            },
          ],
        })
      );

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style lang="sss" scoped>
.bg {
  width: 100%;
  height: 88vh;
  background: url("../../../../assets/img/bj.png") no-repeat center;
  background-size: 100% 100%;
}
#threeDmap {
  width: 750px;
  height: 500px;
}
</style>