地图滤镜插件
地图滤镜,顾名思义就是美化地图的外观。用户可以根据自己的需求和偏好,自定义设置地图样式。
地图滤镜插件
地图滤镜,顾名思义就是美化地图的外观。用户可以根据自己的需求和偏好,自定义设置地图样式。
地图滤镜插件主要用于GIS场景下,用户可自定义地图配色。
1. 功能说明
地图滤镜插件的主要功能就是调整地图的外观样式。具体功能可参考后续方法,其中有详细的介绍和使用。
2. 构造
在SDK中实例化地图滤镜插件,代码示例如下:
const mapFilterPlugin = new ubm.MapFilterPlugin()
3. 类型
3.1 过滤选项
过滤选项有以下几种:
| 值 | 说明 |
|---|---|
| hue-rotate | 色彩旋转 |
| contrast | 对比度 |
| brightness | 亮度 |
| grayscale | 灰度 |
| invert | 图像反色 |
| saturate | 饱和度 |
| opacity | 透明度 |
| sepia | 褐色 |
3.2 SVG过滤选项
| 选项 | 值 |
|---|---|
| 1 | teal-white |
| 2 | teal-lightgreen |
| 3 | sepia |
| 4 | purple-sepia |
| 5 | blackCurrant-and-mint |
| 6 | sea |
| 7 | warm-sea |
| 8 | spring-grass |
| 9 | red-sunset-with-purple |
| 10 | red-sunset |
| 11 | gold-sunset |
| 12 | dark-crimson-sepia |
| 13 | dark-blue-sepia |
| 14 | dark-green-sepia |
| 15 | x-rays |
| 16 | warm-x-rays |
| 17 | golden-x-rays |
| 18 | purple-warm |
| 19 | green-pink-acid |
| 20 | yellow-blue-acid |
| 21 | posterize |
| 22 | grain |
4. 属性
| 属性 | 类型 | 可选 | 说明 |
|---|---|---|---|
| filter | string | 必填 | 过滤条件 |
4.1 过滤条件
查看设置的过滤条件,代码示例如下:
const mapFilter = mapFilterPlugin.model.filter
5. 方法
| 方法 | 说明 |
|---|---|
| cssFilterChange | 修改样式 |
| updateMapFilter | 更新svg滤镜 |
| updateMapFilter | 更新地图滤镜 |
5.1 修改样式
cssFilterChange(value: number | string, key: string): void
参数value是指修改某个过滤选项的值,取值范围为0-1;
参数key是指修改的某个过滤选项,具体可查看过滤选项。
如设置图像反色为0.5,代码示例如下:
mapFilterPlugin.model.cssFilterChange(0.5,"invert")
5.2 更新svg滤镜
svgFilterChange(value: string): void
参数value是SVG过滤选项。
如设置svg滤镜为gold-sunset,代码示例如下:
mapFilterPlugin.model.svgFilterChange('gold-sunset')
5.3 更新地图滤镜
updateMapFilter(): void
更新地图滤镜,代码示例如下:
mapFilterPlugin.model.updateMapFilter()
注:不管是修改样式还是更新svg滤镜,最后都要执行更新地图滤镜的操作,否则都不生效。

BIMFlux AI
