Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）-526互联

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Echarts伪3D地图    Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）</title>
    <script src="./js/echarts.min4.8.js"></script>
    <script src="./320000_full.js"></script>
    <!-- <script src="./map-shandong.js"></script> -->
    <!-- <script src="./map-shanxi.js"></script> -->
    <style>
      * {
        margin: 0;
      }
      .map-panel {
        position: relative;
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 55px auto;
        grid-template-areas:
          "header header"
          "left right";
        gap: 10px;
        padding: 10px;
      }
      .title {
        grid-area: header;
        display: grid;
        justify-items: center;
        align-items: center;
        font-size: 28px;
        font-weight: bold;
      }
      .shandong-map {
        grid-area: left;
        border: 1px solid #007acc;
        border-radius: 5px;
      }
      .shanxi-map {
        grid-area: right;
        border: 1px solid #007acc;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="map-panel">
      Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
      <div id="shandong-map" class="shandong-map"></div>
      <div id="shanxi-map" class="shanxi-map"></div>
    </div>
  </body>
  <script>
    window.onload = () => {
      initMap("mapjson", mapjson, "shandong-map");
      initMap("mapjson", mapjson, "shanxi-map");
    };

    function initMap(mapName, mapJsonData, domId) {
      echarts.registerMap(mapName, mapJsonData);
      let option = {
        tooltip: {
          show: false,
        },
        geo: [
          {
            show: true,
            map: mapName,
            zoom: 1,
            roam: 'false',
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            regions: [],
            zlevel: 1,
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"],
            layoutSize: "90%",
            itemStyle: {
              areaColor: "transparent",
            },
          },
          {
            show: true,
            map: mapName,
            zoom: 1,
            roam: 'false',
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            zlevel: 4,
            layoutCenter: ["50.5%", "50.5%"],
            layoutSize: "90%",
            aspectScale: 0.85,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(22, 186, 212,0.8)",
              shadowColor: "rgba(80, 183, 140,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
            silent: true,
          },
          {
            show: true,
            map: mapName,
            zoom: 1,
            roam: 'false',
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            zlevel: 3,
            layoutCenter: ["51%", "51%"],
            layoutSize: "90%",
            aspectScale: 0.85,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(9, 170, 148,0.6)",
              shadowColor: "rgb(80,183,140)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
            silent: true,
          },
          {
            show: true,
            map: mapName,
            zoom: 1,
            roam: 'false',
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            zlevel: 2,
            layoutCenter: ["51.5%", "51.5%"],
            layoutSize: "90%",
            aspectScale: 0.85,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(105, 174, 253,0.4)",
              shadowColor: "rgba(10, 177, 105,0.4)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
            silent: true,
          },
          {
            show: true,
            map: mapName,
            zoom: 1,
            roam: 'false',
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            zlevel: 1,
            layoutCenter: ["52%", "52%"],
            layoutSize: "90%",
            aspectScale: 0.85,
            itemStyle: {
              borderWidth: 5,
              borderColor: "rgb(6,125,119)",
              shadowColor: "rgba(10,177,105,0.3)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
            silent: true,
          },

        ],
        series: [
          {
            type: "map",
            map: mapName,
            zoom: 1,
            roam: true,
animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"],
            layoutSize: "90%",
            selectedMode: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#FF0",
                  fontSize: 14,
                },
                borderColor: "#FFFFFF",
                borderWidth: 1,
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(60,213,147)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(126, 207, 195,0.75)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#FF0",
                  fontSize: 14,
                },
                areaColor: "rgba(18, 190, 115, 0.6)",
                borderColor: "#ffdc00",
              },
            },
            zlevel: 99,
            data: [],
          },
        ],
      };

      let mapChart = echarts.init(document.getElementById(domId));
      mapChart.setOption(option);
      window.onresize = () => {
        mapChart.resize();
      };

      mapChart.on('georoam',(params)=>{
      let option = mapChart.getOption();//获得option对象
      let len=option.geo.length;
      if(params.zoom != null){ //捕捉到缩放时
        for(var i=0;i<len;i++){
            option.geo[i].center=option.series[0].center;
            option.geo[i].zoom=option.series[0].zoom;
        }
      }else{//捕捉到拖曳时

        for(var i=0;i<len;i++){
            option.geo[i].center=option.series[0].center;
        }
      }
      mapChart.setOption(option);//设置option
    })
    }
  </script>
</html>