echarts地图 区分内外边界线 自定义背景图 大屏自适应

本效果实现的难点在于：1、区分地图内外边界线 2、为地图添加自定义的背景图 3、实现大小自适应

设计地图分层结构

问题1：如何为echarts地图设置不同颜色的内外轮廓

探索：echarts没有提供专门区分内外border的配置项，网上常见的方法是在geo和series中叠加两层，让上层（设置了内轮廓)覆盖住下层（设置了外轮廓），但前提是两层地图的背景都是纯色不透明的，否则会导致下层地图的内轮廓遮不住

解决方法：沿用叠加的思想，初始化两个地图，一个使用带内边界的json，用于定义内边界效果；一个使用只带外轮廓的json，用于定义外边界效果。且外边界要更粗，内外边界颜色区别不能太大。

问题2：如何为echarts地图设置背景图

探索：网络上有使用itemStyle.color.image进行配置的，也可以使用graphic进行配置，但几种方法都不便于调整背景图的位置，导致地图边界与背景图无法契合

解决方法：使用img标签引入ui切好的背景图置于最底层，将两层echarts地图背景色都设置为透明，在浏览器中逐步调整背景图位置

整体dom结构如下：

需要设置各个层的position和z-index来实现叠加

地图配置

首先初始化顶层地图，即带内边框的地图，使用的是完整的json

		let mapJson = './map/430000_full.json'
        const myChart = echarts.init(document.getElementById('map1'))
        let option = {
          backgroundColor: 'rgba(0,0,0,0)',
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          geo: [
            {
              zlevel: 1,//geo显示级别，默认是0
              map: 'hunan',
              // 顶层地图的样式
              itemStyle: {
                normal: {
                  areaColor: 'rgba(0,0,0,0)',
                  borderWidth: 1,
                  borderColor: '#0dd6ed',
                  // shadowBlur: 10,
                  // shadowColor: "#FFFFFF"
                },
                emphasis: {
                  areaColor: "rgba(3,248,255,0.3)"
                }
              },
              label: {
                normal: {
                  show: true,
                  color: "#fff",
                  formatter: function (params) {
                    if (params.name == "湘西土家族苗族自治州") {
                      return "湘西州"
                    }
                  }
                },
                emphasis: {
                  show: true,
                  color: "#fff",
                  formatter: function (params) {
                    if (params.name == "湘西土家族苗族自治州") {
                      return "湘西州"
                    }
                  }
                }
              }
            }
          ],
          series: [
            {
              zlevel: 2,
              name: '国家级园区',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.gjLevel,
              symbol: 'image://./img/gj.png',
              symbolSize: function (val) {
                return 15;
              },
                },
                position: 'inside',
              }

            },
            {
              zlevel: 2,
              name: '省级园区',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.sjLevel,
              symbol: 'image://./img/sj.png',
              symbolSize: function (val) {
                return 15;
              },
                position: 'inside',
              }

            },
            {
              zlevel: 2,
              name: '综合保税区',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.zhLevel,
              symbol: 'image://./img/zh.png',
              symbolSize: function (val) {
                return 15;
              },
                position: 'inside',
                extraCssText: ''
              }

            }
          ]
        }

        myChart.showLoading();
        $.getJSON(mapJson, function (geoJson) {
          echarts.registerMap('hunan', geoJson);
          myChart.hideLoading();
          myChart.setOption(option);
        });

然后初始化第二层地图，即只带外边框的地图，使用的是不完整的json

		// 中间层 只有外部轮廓的地图
        let mapJson2 = './map/430000.json'
        const myChart2 = echarts.init(document.getElementById('map2'))
        let option2 = {
          backgroundColor: 'rgba(0,0,0,0)',
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          geo: [
            {
              zlevel: 1,//geo显示级别，默认是0
              map: 'hunan2',
              // 顶层地图的样式
              itemStyle: {
                normal: {
                  areaColor: 'rgba(0,0,0,0)',
                  borderWidth: 7,
                  borderColor: '#8ddffc',
                  shadowBlur: 10,
                  shadowColor: "#8ddffc"
                }
              },
              label: {
                show: false
              }
            }
          ]
        }
        $.getJSON(mapJson2, function (geoJson) {
          echarts.registerMap('hunan2', geoJson);
          myChart2.hideLoading();
          myChart2.setOption(option2);
        });

最底层是背景图片层，这层只需要在css中设置其宽高、位置即可

大屏自适应

用这种多层叠加方法绘制的地图无法使用echarts自带的resize，为了实现对这三层统一的控制，这里采用flex布局和动态调整scale的方法。
为地图容器的外层容器设置flex布局，使得地图始终居中：

定义动态改变容器大小比例的函数：

setScale() {
        let designWidth = 1920;//设计稿的宽度，根据实际项目调整
        let designHeight = 961;//设计稿的高度，根据实际项目调整
        let scale = document.documentElement.clientWidth / 			
        document.documentElement.clientHeight < designWidth / designHeight ?
          (document.documentElement.clientWidth / designWidth) :
          (document.documentElement.clientHeight / designHeight);
        document.querySelector('.container').style.transform = `scale(${scale})`;
      }

监听窗口尺寸改变，动态改变地图容器的比例大小：

window.onresize = () => {
  this.setScale()
}

有其他问题欢迎评论或者私信咨询！