Echarts地图之——如何给地图添加外边框轮廓

有时候我们希望给地图外围加一圈边框来增加美感
但实际情况中,我们需要把国界的边框和各个省份属于国界的边框相吻合,否则就会造成两者看起来是错位的感觉
在这里插入图片描述
这就需要我们把echarts registerMap的全国省份json和国界边框json的坐标相一致。
这个json我们可以去datav官方下载:https://datav.aliyun.com/portal/school/atlas/area_selector
分别下载包含子区域和 不包含子区域的就可以了。

然后我们的地图展示用china命名,国界边框展示用chinaOutline命名即可。

echarts.registerMap('china', 。。。。。。。。。。。。。。。。
echarts.registerMap('chinaOutline', 。。。。。。。。。。。。。。。。。。

在series内创建两个type为map的项

series: [
    {
        type: 'map',
        map: 'chinaOutline',
        aspectScale: 0.85,
        zoom: 1.2,
        top: '9%',
        left: '11%',
        roam: false,
        label: {
            show: false
        },
        itemStyle: {
            // 颜色阴影等根据实际需要来设置
            areaColor: 'rgba(0,255,255,.02)',
            borderColor: '#b2fcff',
            borderWidth: 10,
            shadowColor: 'transparent',
            shadowOffsetX: 0,
            shadowOffsetY: 4,
            shadowBlur: 10,
        },
        tooltip: {
            show: false
        },
        zlevel: 1
    },
    {
        type: 'map',
        map: 'china',
        aspectScale: 0.85,
        zoom: 1.2,
        top: '9%',
        left: '11%',
        roam: false,
        selectedMode: 'multiple',
        tooltip: {
            //。。。。。。。。。。。。
        },
        label: {
            show: true,
            color: '#FFF',
            fontSize: 25,
        },
        itemStyle: {
            //。。。。。。。。。。。
        },
        emphasis: {
          // 。。。。。。。。。。。
        },
        select: {
           // 。。。。。。。。。。。
        },
        zlevel: 2,
        data: []
    },
]

只要两个的位置,缩放大小一样,页面上就不会有错位的问题了。
在这里插入图片描述
而且省份的边界正好处于边框的中心位置,看起来也很舒服。

相关推荐

  1. [C# WPF] 如何控件添加边框(Border)?

    2024-04-01 20:54:01       17 阅读

最近更新

  1. ERESOLVE overriding peer dependency npm install错误

    2024-04-01 20:54:01       0 阅读
  2. ChatGPT改写:论文写作新时代

    2024-04-01 20:54:01       0 阅读
  3. LeetCode49字母异位词分组

    2024-04-01 20:54:01       0 阅读
  4. 【JVM】JVM的垃圾回收机制与垃圾回收器的选择

    2024-04-01 20:54:01       0 阅读
  5. 从安装系统到部署datax

    2024-04-01 20:54:01       0 阅读

热门阅读

  1. 微信小程序(黑马优购:商品列表)

    2024-04-01 20:54:01       5 阅读
  2. 使用gradle离线编译ES 8.11

    2024-04-01 20:54:01       5 阅读
  3. Day35:学习尚上优选项目

    2024-04-01 20:54:01       3 阅读
  4. 说2个AI绘画自动生成器

    2024-04-01 20:54:01       3 阅读
  5. 机器视觉系统在工业零件检测中的应用

    2024-04-01 20:54:01       4 阅读
  6. HTML——1.简介、基础、元素

    2024-04-01 20:54:01       4 阅读
  7. C++与C语言

    2024-04-01 20:54:01       5 阅读
  8. LLM--打造Private GPT需要知道的一些概念及术语

    2024-04-01 20:54:01       6 阅读
  9. Linux 如何一键kill杀死某个被占用的端口

    2024-04-01 20:54:01       5 阅读
  10. c++ map

    2024-04-01 20:54:01       4 阅读
  11. vue3依赖注入解决根组件和多级组件件传值问题

    2024-04-01 20:54:01       4 阅读