地图样式

在 SDK 中提供了一些修改地图样式的属性,可以达到地图颜色过滤等一些效果。

1. 数据结构

viewingMode:'global' 模式下,即在地球场景下,可以通过设置场景配置的 map 属性中的 style 属性来自定义地图滤镜的相关设置。其数据结构如下:

interface Map {
  // 地图样式过滤
  style:Style
}

interface Style {
  //地图是否显示文字标注
  mark: boolean
  //地图颜色过滤
  filter: string
}

2. 对地图颜色进行过滤

若要对地图颜色进行过滤,可以设置其 filter 属性,示例代码如下:

代码
const scene = new ubm.Scene('app', {
  viewingMode: 'global',
  map: {
    basemap: "satellite",
    style: {
      filter: "url('#x-rays') hue-rotate(353deg) contrast(2) brightness(1.4) invert(0.15) saturate(0.9)",
    }
  }
})

3. 使用过滤插件 MapFilterPlugin

为了方便用户对地球地图调色,进而获取自己所需要的地图样式,我们 SDK 提供了地图过滤插件 MapFilterPlugin 。具体使用方式请查看使用示例:

const scene = new ubm.Scene('app', {...})

//地图过滤
const mapFilterPlugin = new ubm.MapFilterPlugin()
scene.plugin.register(mapFilterPlugin)