样式 Style

Style 类用于管理 Mapbox Style Spec 兼容的地图样式，支持添加/移除数据源和图层，以及动态修改样式属性。

Style

构造函数

class Style {
  constructor(spec?: StyleSpec);
}

方法

方法	参数	返回值	说明
addSource(id, source)	id: string, source: object	this	添加数据源
removeSource(id)	id: string	this	移除数据源
addLayer(layerDef, beforeId?)	layerDef: object, beforeId?: string	this	添加图层定义
removeLayer(id)	id: string	this	移除图层
getLayer(id)	id: string	object | undefined	获取图层定义
setPaintProperty(layerId, name, value)	layerId: string, name: string, value: unknown	this	设置画笔属性
setLayoutProperty(layerId, name, value)	layerId: string, name: string, value: unknown	this	设置布局属性
setFilter(layerId, filter)	layerId: string, filter: unknown[]	this	设置过滤器
toJSON()	—	StyleSpec	导出为 JSON

静态方法

方法	参数	返回值	说明
Style.fromJSON(json)	json: StyleSpec	Style	从 JSON 创建样式
Style.fromURL(url)	url: string	Promise<Style>	从 URL 加载样式

StyleSpec 接口

interface StyleSpec {
  version: number;                     // 样式版本（通常为 8）
  name?: string;                       // 样式名称
  sources: Record<string, object>;     // 数据源定义
  layers: Array<{
    id: string;
    type: string;
    source?: string;
    'source-layer'?: string;
    paint?: Record<string, unknown>;
    layout?: Record<string, unknown>;
    filter?: unknown[];
    minzoom?: number;
    maxzoom?: number;
  }>;
  glyphs?: string;                     // 字体 URL 模板
  sprites?: string;                    // 精灵图 URL
  metadata?: Record<string, unknown>;  // 元数据
}

---

示例

从头创建样式

import { Style } from '@gmap/standard';

const style = new Style({ version: 8, sources: {}, layers: [] });

// 添加数据源
style.addSource('osm', {
  type: 'raster',
  tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
  tileSize: 256,
});

// 添加图层
style.addLayer({
  id: 'osm-layer',
  type: 'raster',
  source: 'osm',
});

// 设置画笔属性
style.setPaintProperty('osm-layer', 'raster-opacity', 0.8);

// 设置过滤器
style.addSource('buildings', {
  type: 'geojson',
  data: buildingsGeoJSON,
});

style.addLayer({
  id: 'buildings-fill',
  type: 'fill',
  source: 'buildings',
});

style.setFilter('buildings-fill', ['>', 'height', 50]);
style.setPaintProperty('buildings-fill', 'fill-color', '#3388ff');
style.setPaintProperty('buildings-fill', 'fill-opacity', 0.6);
style.setLayoutProperty('buildings-fill', 'visibility', 'visible');

// 导出
const json = style.toJSON();
console.log(json);

从 JSON 创建

import { Style } from '@gmap/standard';

const style = Style.fromJSON({
  version: 8,
  sources: {
    'satellite': {
      type: 'raster',
      tiles: ['https://server/satellite/{z}/{x}/{y}.jpg'],
    },
  },
  layers: [
    {
      id: 'satellite-layer',
      type: 'raster',
      source: 'satellite',
    },
  ],
});

从 URL 加载

import { Style } from '@gmap/standard';

const style = await Style.fromURL('https://styles.example.com/style.json');
console.log(style.toJSON());

管理图层和数据源

import { Style } from '@gmap/standard';

const style = new Style({ version: 8, sources: {}, layers: [] });

// 添加多个数据源
style
  .addSource('roads', { type: 'vector', tiles: ['https://tiles/roads/{z}/{x}/{y}.pbf'] })
  .addSource('labels', { type: 'vector', tiles: ['https://tiles/labels/{z}/{x}/{y}.pbf'] });

// 添加图层（指定插入位置）
style.addLayer({ id: 'roads-fill', type: 'fill', source: 'roads' });
style.addLayer({ id: 'labels-text', type: 'symbol', source: 'labels' }, 'roads-fill');

// 获取图层
const roadLayer = style.getLayer('roads-fill');
console.log(roadLayer);

// 移除图层
style.removeLayer('roads-fill');

// 移除数据源
style.removeSource('roads');

与 MapModel 配合

import { Style } from '@gmap/standard';

const style = new Style({ version: 8, sources: {}, layers: [] });
style.addSource('my-source', { type: 'geojson', data: myGeoJSON });
style.addLayer({ id: 'my-layer', type: 'fill', source: 'my-source' });

// 应用到地图
map.setStyle(style);

// 或者直接通过 map 操作
const currentStyle = map.getStyle();