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)
  })
相关推荐
小白64023 分钟前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端
云和数据.ChenGuang8 分钟前
vue中构建脚手架
前端·javascript·vue.js
千与千寻酱13 分钟前
排列与组合在编程中的实现:从数学概念到代码实践
前端·python
朱昆鹏25 分钟前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog26 分钟前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
cjinhuo28 分钟前
标签页、书签太多找不到?AI 分组 + 拼音模糊搜索,开源插件秒解切换难题!
前端·算法·开源
小章鱼学前端29 分钟前
小程序中使用 Iconfont 图标的优化指南
前端
一心只读圣贤书33 分钟前
解决jinkins的CI、CD使用非root执行sudo命令时无密码权限导致报错的问题
前端
携欢44 分钟前
POrtSwigger靶场之CSRF where token validation depends on token being present通关秘籍
前端·csrf
weixin_446260851 小时前
MudBlazor:轻松构建美观的Web应用程序!
前端