openlayer加载天地图 并设置地图颜色为科技蓝

1.天地图是很多地图项目考虑的地图，但是由于天地图的配色与很多ui设计不符合，这里我是通过添加地图时候的className，添加css滤镜进行更改，效果良好，如下图所示：

核心代码：className: “baseLayerClass”,

        new TileLayer({
          className: "baseLayerClass",
          source: new Tianditu({
            key: "userkey",
          }),
        }),

这里我将滤镜放置在app.vue的style下，

filter:grayscale(100%) sepia(51%) invert(100%) saturate(350%) ;

2.改滤镜色稍微有点限制但是也可基本满足客户需求，滤镜参数可通过我的另外一篇博客设置：复制并改变图片设置的参数然后获取你需要改的颜色。注意滤镜顺序和参数值很重要，详细需要具体查看css文档。
点击跳转