echarts 地图轮廓边框

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)
  })
相关推荐
石金龙37 分钟前
[译] Composition in CSS
前端·css
白水清风39 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端1 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 小时前
Promise 的使用
前端·javascript
NBtab1 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins