StyleFacade — 样式子门面

通过 app.style 访问 Mapbox 样式管理功能。所有方法支持链式调用。

样式应用

apply(style, options)

应用完整样式。

apply(style: object, options?: { diff?: boolean }): this

参数	类型	描述
style	object	Mapbox 样式对象（必填）
diff	boolean	是否增量更新（仅变化部分）

app.style.apply({
  version: 8,
  sources: {
    osm: { type: 'raster', tiles: ['https://.../{z}/{x}/{y}.png'] },
  },
  layers: [
    { id: 'osm', type: 'raster', source: 'osm' },
  ],
});

// 增量更新
app.style.apply(newStyle, { diff: true });

get()

获取当前样式。

get(): object

const style = app.style.get();
// style: { version: 8, sources: {...}, layers: [...] }

属性修改

setPaint(layerId, name, value)

设置图层 paint 属性。

setPaint(layerId: string, name: string, value: unknown): this

参数	类型	描述
layerId	string	图层 ID
name	string	paint 属性名
value	unknown	属性值

app.style.setPaint('layer1', 'fill-color', '#ff0000');
app.style.setPaint('layer1', 'fill-opacity', 0.8);

setLayout(layerId, name, value)

设置图层 layout 属性。

setLayout(layerId: string, name: string, value: unknown): this

参数	类型	描述
layerId	string	图层 ID
name	string	layout 属性名
value	unknown	属性值

app.style.setLayout('layer1', 'visibility', 'visible');

setFilter(layerId, filter)

设置图层过滤器。

setFilter(layerId: string, filter: unknown[]): this

参数	类型	描述
layerId	string	图层 ID
filter	unknown[]	过滤器表达式

app.style.setFilter('layer1', ['==', 'name', 'test']);
app.style.setFilter('layer1', ['>', 'value', 10]);

图片管理

addImage(id, image)

添加图片资源。

addImage(id: string, image: unknown, options?: object): this

参数	类型	描述
id	string	图片标识
image	unknown	图片数据（Image / Canvas / ImageData 等）

app.style.addImage('icon', document.createElement('canvas'));

removeImage(id)

移除图片资源。

removeImage(id: string): this

app.style.removeImage('icon');

setSprite(url)

设置 sprite 图集。

setSprite(url: string): this

app.style.setSprite('https://example.com/sprite.json');

场景设置

setTerrain(options)

设置地形。

setTerrain(options?: { url?: string; exaggeration?: number }): this

参数	类型	描述
url	string	地形数据源 URL
exaggeration	number	高程夸张倍数

app.style.setTerrain({
  url: 'https://terrain.example.com',
  exaggeration: 1.5,
});

setLight(options)

设置光照。

setLight(options?: { anchor?: string; color?: string; intensity?: number }): this

参数	类型	描述
anchor	string	锚点（'viewport'）
color	string	光照颜色
intensity	number	强度 (0-1)

app.style.setLight({ anchor: 'viewport', color: '#ffffff', intensity: 0.5 });

setTheme(theme)

设置主题。

setTheme(theme: string): this

app.style.setTheme('dark');

链式调用

app.style
  .apply({ version: 8 })
  .setPaint('layer1', 'fill-opacity', 0.8)
  .setLayout('layer1', 'visibility', 'visible')
  .setFilter('layer1', ['>', 'value', 10])
  .setTerrain({ exaggeration: 2 })
  .setLight({ intensity: 1 })
  .setTheme('dark');