天地图修改主题颜色修改背景色

· 备忘笔记 · 2 comments · 694 Views

前言

天地图默认地图样式
最近公司比较忙,也没时间发些博文,最近正好由于项目需要大屏展示地图,大屏多数都是使用暗蓝色底图,目前天地图不提供暗蓝色瓦片,自带的JS API只支持black和indigo,但项目要求必须要用天地图。搜索引擎找了找解决方案,也是花里胡哨的各种方式都有,最后决定用CSS的filter解决这个问题,在博客记录下解决方法。

灵感

https://blog.csdn.net/Corey_mengxiaodong/article/details/84619875

通过这篇博文的介绍,大概确定了方向,就是用filter:url()加上预定义效果的函数调整出最终效果。

方法

  1. 打开:CSS Filter 编辑器
  2. 上传天地图的截图到编辑器,调整下方预设及右侧参数
    调整参数
  3. 将svg预设放置在<body>中,将编辑器中CSS Code的栏目所生成的CSS,加在天地图的canvas上面
    CSS Code

天地图改色效果

如果预设没有想要的效果,可以使用SVG Gradient Map Filter,自己调出一个

效果展示

经过调整后的最终展示效果,谁能想到这竟然是天地图呢?
调整后的最终展示效果

添加新评论
  1. 有详细步骤吗?没太明白各个模块具体是怎么调的?

    回复
  2. 没看懂这是干啥呢

    回复