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文档。
点击跳转

openlayer加载天地图并设置地图颜色为科技蓝相关推荐

QGIS加载天地图、高德地图
在ArcGIS中加载地图很麻烦,一来是国内的数据源太少,二是地图显示速度太慢. 不过在QGIS中加载地图,然后把shp文件加载,效果好很多.后来在 https://zhuanlan.zhihu.com ...
2021-04-26QGIS3.10加载天地图影像（地图瓦片）的一种方法
QGIS3.10加载天地图影像(地图瓦片)的一种方法目录 QGIS3.10加载天地图影像(地图瓦片)的一种方法 1.天地图地图瓦片的链接获取. 2.QGIS加载数据 3.关于url参数的一点提醒 1 ...
arcgis for Android 100.1 在线加载天地图和谷歌地图
距离上一篇arcgis for Android 已经很久.其实年初的时候就测试了arcgis for Android 100.1版本.搜集网上各篇文章,最后自已测试代码.修改代码.这一篇来讲一下加载在 ...
arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
openlayers加载天地图及天地图地形图影像图
openlayer加载天地图.天地图地形图.天地图影像图,相关代码有注释. 加载效果: 天地图底图天地图地形图天地图影像图相关代码: import {XYZ,TileImage} from 'o ...
react项目中使用esri-loader加载天地图
1.在项目中安装esri-loader npm install esri-loader // or yarn add esri-loader 2.加载代码如下: 代码是基于react hook编写: ...
OpenLayer学习之加载天地图在线地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key 注意: 天地图自2019年1月 1日起需获得开发授权,然后在引用的API 地址后增加授权信息即可(&tk ...
Mapbox加载天地图CGCS2000矢量瓦片地图服务
1.背景最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...
OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...

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

openlayer加载天地图并设置地图颜色为科技蓝相关推荐

最新文章

热门文章

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

openlayer加载天地图 并设置地图颜色为科技蓝相关推荐

最新文章

热门文章

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

openlayer加载天地图并设置地图颜色为科技蓝相关推荐