Echarts渲染行政区划，实现聚焦高亮交互

首先需要准备行政区划的JSON数据，可以在DataV获取省市区的JSON数据。

最终效果图

渲染地图

建立一个地图容器，注意要给宽高

<!-- 地图容器 -->
<div id="map"></div>

请求JSON数据，渲染地图

$(function() {
  var mapChart = null
  // 请求地图JSON
  function getGeo(level, adcode) {
    const url = `../map/${level}/${adcode}.json`;
    $.get(url, function (geoJson) {
      var seriesData = geoJson.features.map(function (item) {
        return {
          name: item.properties.name,
          value: item.properties.adcode,
          level: item.properties.level,
          childrenNum: item.properties?.childrenNum,
          parentCode: item.properties.parent.adcode,
        };
      });
    renderMap(seriesData, geoJson);
    });
  }
  getGeo("city", "52");
   // 渲染地图
  function renderMap(seriesData, geoJson) {
    echarts.registerMap("geo", { geoJSON: geoJson });
    mapChart = echarts.init(document.getElementById('map'))
    mapChart.setOption({
      // 阴影层，让地图有点立体效果
      geo: [
        {
          map: "geo",
          aspectScale: 0.75,
          zoom: 1.12,
          silent: true,
          itemStyle: {
            areaColor: '#072329',
            shadowColor: '#062025',
            shadowBlur: 0,
            shadowOffsetX: 2,
            shadowOffsetY: 6,
            borderColor: 'rgba(0, 0, 0, 0.7)',
            borderWidth: 0.5,
          },
        },
      ],
      series: [
        {
          type: "map",
          map: "geo",
          selectedMode: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: "#417079",
            areaColor: {
              type: "linear",
              x: 0,
              y: 800,
              x2: 200,
              y2: 0,
              colorStops: [
                {
                  offset: 0.5,
                  color: "#37616b",
                },
                {
                  offset: 1,
                  color: "#0c2a31",
                },
              ],
              global: true,
            },
          },
          zoom: 1.1,
          label: {
            show: false,
            color: "#fff",
          },
          emphasis: {
            focus: true,
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "#4b8491",
            },
          },
          data: seriesData,
        }
      ]
    });
  }
})

绘制标注信息

标注信息是通过Echarts的散点绘制的，通过自定义图片实现

// 在请求JSON函数中，处理散点数据
function getGeo(level, adcode) {
  const url = `../map/${level}/${adcode}.json`;
  $.get(url, function (geoJson) {
    // 散点数据
    const coverData = geoJson.features.map((item) => {
      const { properties } = item;
      return {
        name: properties.name,
        value: properties.centroid,
        peopleNum: 10000,
        income: 50000
      };
    });

    var seriesData = geoJson.features.map(function (item) {
      return {
        name: item.properties.name,
        value: item.properties.adcode,
        level: item.properties.level,
        childrenNum: item.properties?.childrenNum,
        parentCode: item.properties.parent.adcode,
      };
    });
  renderMap(seriesData, geoJson, coverData);
  });
}

// 渲染地图中加入散点数据
function renderMap(seriesData, geoJson, coverData) {
 echarts.registerMap("geo", { geoJSON: geoJson });
 mapChart = echarts.init(document.getElementById('map'))
 mapChart.setOption({
   // 阴影层
   geo: [
     {
       map: "geo",
       aspectScale: 0.75,
       zoom: 1.12,
       silent: true,
       itemStyle: {
         areaColor: '#072329',
         shadowColor: '#062025',
         shadowBlur: 0,
         shadowOffsetX: 2,
         shadowOffsetY: 6,
         borderColor: 'rgba(0, 0, 0, 0.7)',
         borderWidth: 0.5,
       },
     },
   ],
   series: [
     {
       type: "map",
       map: "geo",
       selectedMode: false,
       itemStyle: {
         borderWidth: 1,
         borderColor: "#417079",
         areaColor: {
           type: "linear",
           x: 0,
           y: 800,
           x2: 200,
           y2: 0,
           colorStops: [
             {
               offset: 0.5,
               color: "#37616b",
             },
             {
               offset: 1,
               color: "#0c2a31",
             },
           ],
           global: true,
         },
       },
       zoom: 1.1,
       label: {
         show: false,
         color: "#fff",
       },
       emphasis: {
         focus: true,
         label: {
           show: false,
         },
         itemStyle: {
           areaColor: "#4b8491",
         },
       },
       data: seriesData,
     },
     {
       type: "scatter",
       coordinateSystem: "geo",
       symbol: function (value, params) {
         return "image://imgs/mark-line.png"; // 自定义图片
       },
       symbolSize: [38, 56],
       symbolRotate: -4,
       label: {
         show: true,
         offset: [-2, 0],
         position: "top",
         backgroundColor: "#204047",
         padding: [4, 8],
         borderRadius: 4,
         formatter: (param) => {
           return [
             "{name|" + param.name + "}",
             "{line|}",
             "{text|村民人数："+ param.data.peopleNum +"人}",
             "{text|年均收入："+ param.data.income +"元}",
           ].join("\n");
         },
         // 富文本给label添加样式
         rich: {
           name: {
             color: "#18f6df",
             padding: [0, 0, 4, 0],
           },
           line: {
             width: "100%",
             height: 0,
             borderWidth: 1,
             borderColor: "#18f6df",
           },
           text: {
             color: "#fff",
             padding: [6, 0, 0, 0],
           },
         },
       },
       emphasis: {
         focus: true,
         blurScope: "global",
       },
       z: 3,
       data: coverData,
     },
   ],
 });

地图块和标注高亮

只设置focus时发现，只有地图块会有聚焦效果，这里需要通过echarts的dispatchAction方法来实现

mapChart.on("mouseover", function (param) {
  mapChart.dispatchAction({
    type: "highlight",
    name: param.name,
  });
});
mapChart.on("mouseout", function (param) {
  mapChart.dispatchAction({
    type: "downplay",
  });
});

这里感觉立体效果还是差点意思，我给地图设置了一点旋转

#map {
  transform: rotateX(32deg) rotateY(-6deg) scale(1.125);
}

完整示例代码

<!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>map</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
      overflow: hidden;
    }
    html, body, #map {
      width: 100%;
      height: 100%;
    }
    #map {
      transform: rotateX(32deg) rotateY(-6deg) scale(1.125);
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="./js/jqueyr.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script>
    $(function() {
      var mapChart = null
      function getGeo(level, adcode) {
        const url = `../map/${level}/${adcode}.json`;
        $.get(url, function (geoJson) {
          // 散点数据
          const coverData = geoJson.features.map((item) => {
            const { properties } = item;
            return {
              name: properties.name,
              value: properties.centroid,
              // 显示数据
              peopleNum: 10000,
              income: 50000
            };
          });

          var seriesData = geoJson.features.map(function (item) {
            return {
              name: item.properties.name,
              value: item.properties.adcode,
              level: item.properties.level,
              childrenNum: item.properties?.childrenNum,
              parentCode: item.properties.parent.adcode,
            };
          });
        renderMap(seriesData, geoJson, coverData);
        });
      }
      getGeo("city", "52");
       // 渲染地图
      function renderMap(seriesData, geoJson, coverData) {
        echarts.registerMap("geo", { geoJSON: geoJson });
        mapChart = echarts.init(document.getElementById('map'))
        mapChart.setOption({
          // 阴影层
          geo: [
            {
              map: "geo",
              aspectScale: 0.75,
              zoom: 1.12,
              silent: true,
              itemStyle: {
                areaColor: '#072329',
                shadowColor: '#062025',
                shadowBlur: 0,
                shadowOffsetX: 2,
                shadowOffsetY: 6,
                borderColor: 'rgba(0, 0, 0, 0.7)',
                borderWidth: 0.5,
              },
            },
          ],
          series: [
            {
              type: "map",
              map: "geo",
              selectedMode: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#417079",
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 800,
                  x2: 200,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0.5,
                      color: "#37616b",
                    },
                    {
                      offset: 1,
                      color: "#0c2a31",
                    },
                  ],
                  global: true,
                },
              },
              zoom: 1.1,
              label: {
                show: false,
                color: "#fff",
              },
              emphasis: {
                focus: true,
                label: {
                  show: false,
                },
                itemStyle: {
                  areaColor: "#4b8491",
                },
              },
              data: seriesData,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: function (value, params) {
                return "image://imgs/mark-line.png";
              },
              symbolSize: [38, 56],
              symbolRotate: -4,
              label: {
                show: true,
                offset: [-2, 0],
                position: "top",
                backgroundColor: "#204047",
                padding: [4, 8],
                borderRadius: 4,
                formatter: (param) => {
                  console.log('param: ', param);
                  return [
                    "{name|" + param.name + "}",
                    "{line|}",
                    "{text|村民人数："+ param.data.peopleNum +"人}",
                    "{text|年均收入："+ param.data.income +"元}",
                  ].join("\n");
                },
                rich: {
                  name: {
                    color: "#18f6df",
                    padding: [0, 0, 4, 0],
                  },
                  line: {
                    width: "100%",
                    height: 0,
                    borderWidth: 1,
                    borderColor: "#18f6df",
                  },
                  text: {
                    color: "#fff",
                    padding: [6, 0, 0, 0],
                  },
                },
              },
              emphasis: {
                focus: true,
                blurScope: "global",
              },
              z: 3,
              data: coverData,
            },
          ],
        });
        // 联动高亮
        mapChart.on("mouseover", function (param) {
          mapChart.dispatchAction({
            type: "highlight",
            name: param.name,
          });
        });
        mapChart.on("mouseout", function (param) {
          mapChart.dispatchAction({
            type: "downplay",
          });
        });
      }
    })
  </script>
</body>
</html>