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)
  })
相关推荐
正在学习前端的---小方同学2 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
键盘不能没有CV键5 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ6 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python6 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep7 小时前
【前端】前端运行环境的结构
前端
你的人类朋友7 小时前
【Node】认识multer库
前端·javascript·后端
Aitter7 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front8 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'9 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'9 小时前
css `dorp-shadow`
前端·css