echarts 地图轮廓边框

一分帮主2024-01-15 18:37

echarts 地图轮廓边框

最近搞了个需求要求地图轮廓搞个边框,找了下官网没有找到对应的配置，在 issue 中看到有人图层叠加的方式实现，在此记录一下。其思想就是底图的边框搞粗一点，两个图层叠加后，达到边框效果。

js 复制代码

echartInst?.setOption({
    geo: [
      {
        // 跟随图层动画必须关闭，否则会出现图层分离的现象
        animationDurationUpdate: 0,
        // 禁用底图，底图坐标跟随顶层图层
        roam: false,
        map: 'test',
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        emphasis: {
          disabled: true
        },
        itemStyle: {
          areaColor: '#73E6FF',
          borderColor: '#73E6FF',
          borderWidth: 6,
          shadowColor: '#012FE0',
          shadowOffsetX: 2,
          shadowOffsetY: 10
        }
      },
      {
        type: 'map',
        map: 'test',
        roam: true,
        emphasis: {
          disabled: false,
          label: {
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#389BC5',
            borderColor: '#1E78C1',
            borderWidth: 1
          }
        },
        itemStyle: {
          areaColor: '#0F3877',
          borderColor: '#1E78C1',
          borderWidth: 1
        },
        label: {
          color: '#fff'
        }
      }
    ]
  })

bottomLayer 要把 roma 禁用掉，不然要做图层跟随逻辑的判断，这里我为了方便就禁掉了，让 bottomLayer 跟随 topLayer 图层变化(这里导致点击外轮廓时无反应) 。通过监听georoam事件，让 bottomLayer 的center,zoom 跟随着 topLayer 变化就完事了。这里需要注意的时 bottomLayer 的动画要关闭(animationDurationUpdate置为0,默认好像有0.5s),不然会看到明显的图层分离

js 复制代码

  echartInst.on('georoam', function () {
    const options = echartInst.getOption()
    const [bottomLayer,topLayer] = (options.geo as Array<any>)
    const { center, zoom } = topLayer
    bottomLayer.center = center
    bottomLayer.zoom = zoom
    echartInst.setOption(options)
  })