echars地图下钻，返回

基于大屏需要 做了一个伪3D 有下钻，和返回上一级的echars地图

 准备工作：DataV.GeoAtlas地理小工具系列  从该地址上找到你要画的省，市，县

首先 html处很简单 写一个 echars图的div 加一个返回上一级的按钮就可以，此处我的返回上一级是一个img，当然用一个div ，button  都可以

    <div   style="height: 100%; width: 100%;"    class="draggable-container"  >
    <img    @click.stop.capture="goBacks" :src="goback" alt=""  class="image">
<div   class="draggable-item" ref="mapChartRef" style="height: 100%; width: 100%;"></div>
        </div>

script（js）

  // 获取地图 JSON 数据
  // 注册: registerMap('地图名称', 地图数据）, 地图名称须和option里面的map一致
  echarts.registerMap(mapName, mapData);
  // let  mapJson = echarts.getOption().series[0].map;
  // console.log(echarts.getOption(),'mapJson')
  // 地图配置项
  const option = {
    dragZoom: true,
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",
      alwaysShowContent: false,
      borderWidth: 0,
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
      backgroundColor: "rgba(4,24,51,0)",
        borderColor: 'rgba(99, 173, 222,0)',
      hideDelay: 100,
      triggerOn: "mousemove",
      enterable: true,
      textStyle: {
        color: "transparent",
      },
      symbol: 'image://'+ icon,
      showDelay: 100    
    },
    geo: [
      {
        aspectScale: 0.85,
        zoom: zoom.value,
        top: "10%",
        left: "center",
        roam: false,
        throttle: 0,
        animationDurationUpdate: 0,
        silent: true, // 设置为true不渲染小岛
        z: 4, //变小，也就是被压在下面

        map: mapName,
        regions: [
{
  name: "海南省",
  value: 0,
  itemStyle: {
    normal: {
      opacity: 0,
      label: {
        show: false,
      },
    },
  },
}
        ],

        itemStyle: {
          areaColor: {
  image: bgimage,
},
borderWidth: 3,
borderColor: "#8ddffc",
shadowBlur: 5,
shadowColor: "#8ddffc",

shadowOffsetX: 3,
shadowOffsetY: 3,
        },

        tooltip: {
show: false,
        },
        z: 5,
      },

      {
        map: mapName,
        layoutCenter: ["55%", "51%"], //地图位置
        silent: true, // 设置为true不渲染小岛
        aspectScale: 0.85,
        zoom: zoom.value,
        top: "9%",
        left: "center",
        roam: false,

        throttle: 0,
        animationDurationUpdate: 0,
        label: {
show: false,
        },
        itemStyle: {
areaColor: {
  image: bgimage,
},
borderWidth: 1,
borderColor: "#8ddffc",
shadowBlur: 3,
shadowColor: "#0fb9ee",
shadowOffsetX: 2,
shadowOffsetY: 3,
        },
        tooltip: {
show: false,
        },
        z: 5,
      },

   
                          
    ],

    series: [
      //原本的图层
      {
        progressiveRendering: true,
        type: "map",
        map: mapName, // 地图名称
        aspectScale: 0.85,
        silent: false, // 设置为 false 让地图在初始化时就可以被渲染
        zoom: zoom.value,
        top: "9%",
        left: "center",
        roam: false,
        selectedMode: 'none', // 选择高亮显示
        itemStyle: {
borderColor: "#fff",
borderWidth: 1,
areaColor: {
  type: "linear",
  x: 0,
  y: 2500,
  x2: 2500,
  y2: 5,
  colorStops: [
    {
      offset: 0,
      color: "transparent", // 0% 处的颜色
      // color: '#fff' // 0% 处的颜色
    },
    {
      offset: 1,
      color: "transparent", // 100% 处的颜色
      // color: '#fff' // 100% 处的颜色
    },
  ],
  global: true, // 缺省为 false
},
        },
        emphasis: {
          itemStyle: {
                    areaColor: 'rgba(0, 0, 0, 0)' // 设置高亮时的区域颜色为透明
                },
                label: {
                    show: false // 可选，设置鼠标移入时不显示标签
                }
        },
        select: {},
        zlevel: 1,
        data: data.xFlist,
      },{ //标记点图片
                        type: 'scatter',
                        coordinateSystem: "geo",
                        itemStyle: {
                            color: '#f00',
                            opacity: 1
                        },
                        label: {
                            show: true,
                            color: '#FFFFFF',
                            offset: [0, -16],
                            formatter: function (params) {
                                return params.data.name;
                            },
                            fontSize: 12
                        },
                        
                        symbol: 'image://'+ icon,
                        symbolSize: [50, 50],
                        symbolOffset: [0, -20],
                        zlevel: 2,
                        data: data.xFlist,
                        animationDurationUpdate: 0, //数据更新动画的时长。
                    },
    ],
  };
  // 渲染
 initChinaMap.value.setOption(option);

此处就是最简单的绘制echars图的一个js代码

然后，我们要写一个点击下钻（点击山东，跳进山东地图）

首先：要做一个防止多次出发click事件

  initChinaMap.value.off("click");

其次：填写下钻代码，也就是获取点击处的名字，与mapList(echars官网中获取来的json数据)相同

  // 下钻
  initChinaMap.value.on("click", (params) => {
    console.log(params)
    const activeItem = mapList.value.find((item) => item.name == params.name);
    // 判断有子级的时候才可以下钻
    if (activeItem && activeItem.adcode && activeItem.childrenNum) {
      console.log(activeItem,'click')



    historyInfo.value.push(activeItem)

      currentMapName.value = params.name;
      setMapList(activeItem);

            
    }
  });

这样初步下钻功能就可以了，再添加上loading状态，以及其他的节流等优化代码就可以了

返回上一级：总体代码

const goBacks = () => {
  let  lastItem = historyInfo.value.pop();
  if (lastItem && lastItem.parent && lastItem.parent.adcode) {
    if (lastItem.parent.adcode == "100000") {
      currentMapName.value = "china";
    }
    setMapList(lastItem.parent);
  }else{
  
  }

};

1：historyInfo是怎么来的，

在点击下钻的时候 会有一句：

    historyInfo.value.push(activeItem)

2：由于地图的name是中国的时候  会有一些bug（我遇到的是 南海诸岛不是缩略图，需要改成china才为缩略图） 所以加了一个判断 手动改为china（不需要可以忽略）

自此下钻和返回上一级的总体代码完成

下一篇：地图的拖拽与缩放

echars地图 另类版拖拽与放大缩小-CSDN博客

需要源码的可以私信我哦